326 lines
11 KiB
TypeScript
326 lines
11 KiB
TypeScript
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/radix/components/example"
|
|
import {
|
|
Alert,
|
|
AlertAction,
|
|
AlertDescription,
|
|
AlertTitle,
|
|
} from "@/registry/bases/radix/ui/alert"
|
|
import { Badge } from "@/registry/bases/radix/ui/badge"
|
|
import { Button } from "@/registry/bases/radix/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/bases/radix/ui/card"
|
|
import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
|
|
import { Input } from "@/registry/bases/radix/ui/input"
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "@/registry/bases/radix/ui/item"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/bases/radix/ui/select"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function AlertExample() {
|
|
return (
|
|
<ExampleWrapper className="lg:grid-cols-1">
|
|
<AlertExample1 />
|
|
<AlertExample2 />
|
|
<AlertExample3 />
|
|
<AlertExample4 />
|
|
<AlertExample5 />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function AlertExample1() {
|
|
return (
|
|
<Example title="Basic" className="style-sera:bg-transparent">
|
|
<div className="mx-auto flex w-full max-w-lg flex-col gap-4">
|
|
<Alert>
|
|
<AlertTitle>Success! Your changes have been saved.</AlertTitle>
|
|
</Alert>
|
|
<Alert>
|
|
<AlertTitle>Success! Your changes have been saved.</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with title and description.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Alert>
|
|
<AlertDescription>
|
|
This one has a description only. No title. No icon.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AlertExample2() {
|
|
return (
|
|
<Example title="With Icons" className="style-sera:bg-transparent">
|
|
<div className="mx-auto flex w-full max-w-lg flex-col gap-4">
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>
|
|
Let's try one with icon, title and a <a href="#">link</a>.
|
|
</AlertTitle>
|
|
</Alert>
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertDescription>
|
|
This one has an icon and a description only. No title.{" "}
|
|
<a href="#">But it has a link</a> and a <a href="#">second link</a>.
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>Success! Your changes have been saved</AlertTitle>
|
|
<AlertDescription>
|
|
This is an alert with icon, title and description.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>
|
|
This is a very long alert title that demonstrates how the component
|
|
handles extended text content and potentially wraps across multiple
|
|
lines
|
|
</AlertTitle>
|
|
</Alert>
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertDescription>
|
|
This is a very long alert description that demonstrates how the
|
|
component handles extended text content and potentially wraps across
|
|
multiple lines
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>
|
|
This is an extremely long alert title that spans multiple lines to
|
|
demonstrate how the component handles very lengthy headings while
|
|
maintaining readability and proper text wrapping behavior
|
|
</AlertTitle>
|
|
<AlertDescription>
|
|
This is an equally long description that contains detailed
|
|
information about the alert. It shows how the component can
|
|
accommodate extensive content while preserving proper spacing,
|
|
alignment, and readability across different screen sizes and
|
|
viewport widths. This helps ensure the user experience remains
|
|
consistent regardless of the content length.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AlertExample3() {
|
|
return (
|
|
<Example title="Destructive" className="style-sera:bg-transparent">
|
|
<div className="mx-auto flex w-full max-w-lg flex-col gap-4">
|
|
<Alert variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>Something went wrong!</AlertTitle>
|
|
<AlertDescription>
|
|
Your session has expired. Please log in again.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Alert variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>Unable to process your payment.</AlertTitle>
|
|
<AlertDescription>
|
|
<p>
|
|
Please verify your <a href="#">billing information</a> and try
|
|
again.
|
|
</p>
|
|
<ul className="list-inside list-disc">
|
|
<li>Check your card details</li>
|
|
<li>Ensure sufficient funds</li>
|
|
<li>Verify billing address</li>
|
|
</ul>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AlertExample4() {
|
|
return (
|
|
<Example title="With Actions" className="style-sera:bg-transparent">
|
|
<div className="mx-auto flex w-full max-w-lg flex-col gap-4">
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>The selected emails have been marked as spam.</AlertTitle>
|
|
<AlertAction>
|
|
<Button size="xs">Undo</Button>
|
|
</AlertAction>
|
|
</Alert>
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>The selected emails have been marked as spam.</AlertTitle>
|
|
<AlertDescription>
|
|
This is a very long alert title that demonstrates how the component
|
|
handles extended text content.
|
|
</AlertDescription>
|
|
<AlertAction>
|
|
<Badge variant="secondary">Badge</Badge>
|
|
</AlertAction>
|
|
</Alert>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AlertExample5() {
|
|
return (
|
|
<Example title="Inside Card" className="style-sera:bg-transparent">
|
|
<Card className="mx-auto w-full max-w-lg">
|
|
<CardHeader>
|
|
<CardTitle>Create project</CardTitle>
|
|
<CardDescription>
|
|
Fill in the form below to create a new project.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4 style-sera:gap-8">
|
|
<Alert>
|
|
<IconPlaceholder
|
|
lucide="CircleAlertIcon"
|
|
tabler="IconExclamationCircle"
|
|
hugeicons="AlertCircleIcon"
|
|
phosphor="WarningCircleIcon"
|
|
remixicon="RiErrorWarningLine"
|
|
/>
|
|
<AlertTitle>
|
|
You have reached the limit of 3 free projects.
|
|
</AlertTitle>
|
|
<AlertDescription>
|
|
Upgrade to Pro to create unlimited projects.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="project-name">Name</FieldLabel>
|
|
<Input id="project-name" placeholder="My project" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="project-framework">Framework</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="project-framework">
|
|
<SelectValue placeholder="Select a framework" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="next">Next.js</SelectItem>
|
|
<SelectItem value="remix">Remix</SelectItem>
|
|
<SelectItem value="astro">Astro</SelectItem>
|
|
<SelectItem value="nuxt">Nuxt</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</FieldGroup>
|
|
<Item variant="outline">
|
|
<ItemMedia variant="image" className="border">
|
|
<IconPlaceholder
|
|
lucide="FolderIcon"
|
|
tabler="IconFolder"
|
|
hugeicons="Folder01Icon"
|
|
phosphor="FolderIcon"
|
|
remixicon="RiFolderLine"
|
|
/>
|
|
</ItemMedia>
|
|
<ItemContent>
|
|
<ItemTitle>Project Alpha</ItemTitle>
|
|
<ItemDescription>Created 2 days ago</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full">Create project</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</Example>
|
|
)
|
|
}
|