[V0_FILE]typescriptreact:file="components/card-demo.tsx" source="https://ui.shadcn.com/docs/components/card" isMerged="true" import type React from "react" import { BellRing, Check } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Switch } from "@/components/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 export function CardDemo({ className, ...props }: CardProps) { return ( Notifications You have 3 unread messages.

Push Notifications

Send notifications to device.

{notifications.map((notification, index) => (

{notification.title}

{notification.description}

))}

) } [V0_FILE]typescriptreact:file="components/card-style-variants.tsx" import { BellRing, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { cn } from "@/lib/utils" 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 StyleVariant = "modern" | "minimal" | "dark" | "playful" interface CardStyleProps { variant: StyleVariant className?: string } export function CardStyleVariants() { return (

) } function NotificationCard({ variant, className }: CardStyleProps) { // Base styles for each variant const styles = { modern: { card: "bg-gradient-to-br from-purple-50 to-blue-50 border border-blue-100 shadow-lg", header: "border-b border-blue-100", title: "text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600", description: "text-blue-600/70", content: "space-y-4", notificationBox: "bg-white border border-blue-100 rounded-lg shadow-sm", icon: "text-purple-500", switchContainer: "bg-white rounded-lg shadow-sm", dot: "bg-gradient-to-r from-purple-500 to-blue-500", button: "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white", }, minimal: { card: "bg-white border-0 shadow-sm", header: "border-b border-gray-100", title: "text-gray-900", description: "text-gray-500", content: "space-y-3", notificationBox: "border-0 border-b border-gray-100 last:border-0 rounded-none", icon: "text-gray-400", switchContainer: "bg-gray-50 border-0", dot: "bg-gray-400", button: "bg-gray-900 hover:bg-gray-800 text-white", }, dark: { card: "bg-gray-900 border border-gray-800 shadow-xl", header: "border-b border-gray-800", title: "text-white", description: "text-gray-400", content: "space-y-4", notificationBox: "border border-gray-800 bg-gray-800/50", icon: "text-blue-400", switchContainer: "bg-gray-800 border-0", dot: "bg-blue-500", button: "bg-blue-600 hover:bg-blue-700 text-white", }, playful: { card: "bg-yellow-50 border-2 border-dashed border-yellow-300 rounded-3xl shadow-lg", header: "border-b-2 border-dashed border-yellow-300", title: "text-orange-600 font-bold", description: "text-orange-500", content: "space-y-4", notificationBox: "bg-white border-2 border-pink-200 rounded-2xl", icon: "text-pink-500", switchContainer: "bg-white border-2 border-green-200 rounded-2xl", dot: "bg-pink-500", button: "bg-green-500 hover:bg-green-600 text-white rounded-full font-bold", }, } const style = styles[variant] return (

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

{notifications.map((notification, index) => (

{notification.title}

{notification.description}

))}

) }