mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { BellRing, Check } from "lucide-react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Button } from "@/registry/default/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/default/ui/card"
|
|
import { Switch } from "@/registry/default/ui/switch"
|
|
|
|
const notifications = [
|
|
{
|
|
title: "Your call has been confirmed.",
|
|
description: "1 hour ago",
|
|
},
|
|
{
|
|
title: "You have a new message!",
|
|
description: "1 hour ago",
|
|
},
|
|
{
|
|
title: "Your subscription is expiring soon!",
|
|
description: "2 hours ago",
|
|
},
|
|
]
|
|
|
|
type CardProps = React.ComponentProps<typeof Card>
|
|
|
|
export default function CardDemo({ className, ...props }: CardProps) {
|
|
return (
|
|
<Card className={cn("w-[380px]", className)} {...props}>
|
|
<CardHeader>
|
|
<CardTitle>Notifications</CardTitle>
|
|
<CardDescription>You have 3 unread messages.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
<div className=" flex items-center space-x-4 rounded-md border p-4">
|
|
<BellRing />
|
|
<div className="flex-1 space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
Push Notifications
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Send notifications to device.
|
|
</p>
|
|
</div>
|
|
<Switch />
|
|
</div>
|
|
<div>
|
|
{notifications.map((notification, index) => (
|
|
<div
|
|
key={index}
|
|
className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
|
|
>
|
|
<span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{notification.title}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{notification.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full">
|
|
<Check /> Mark all as read
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|