draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

card.tsx (1805B)


      1 import { cn } from "@/lib/utils"
      2 import { forwardRef, HTMLAttributes } from "react"
      3 
      4 const Card = forwardRef<
      5   HTMLDivElement,
      6   HTMLAttributes<HTMLDivElement>
      7 >(({ className, ...props }, ref) => (
      8   <div
      9     ref={ref}
     10     className={cn(
     11       "rounded-lg border bg-card text-card-foreground shadow-sm",
     12       className
     13     )}
     14     {...props}
     15   />
     16 ))
     17 Card.displayName = "Card"
     18 
     19 const CardHeader = forwardRef<
     20   HTMLDivElement,
     21   HTMLAttributes<HTMLDivElement>
     22 >(({ className, ...props }, ref) => (
     23   <div
     24     ref={ref}
     25     className={cn("flex flex-col space-y-1.5 p-6", className)}
     26     {...props}
     27   />
     28 ))
     29 CardHeader.displayName = "CardHeader"
     30 
     31 const CardTitle = forwardRef<
     32   HTMLDivElement,
     33   HTMLAttributes<HTMLDivElement>
     34 >(({ className, ...props }, ref) => (
     35   <div
     36     ref={ref}
     37     className={cn(
     38       "text-2xl font-semibold leading-none tracking-tight",
     39       className
     40     )}
     41     {...props}
     42   />
     43 ))
     44 CardTitle.displayName = "CardTitle"
     45 
     46 const CardDescription = forwardRef<
     47   HTMLDivElement,
     48   HTMLAttributes<HTMLDivElement>
     49 >(({ className, ...props }, ref) => (
     50   <div
     51     ref={ref}
     52     className={cn("text-sm text-muted-foreground", className)}
     53     {...props}
     54   />
     55 ))
     56 CardDescription.displayName = "CardDescription"
     57 
     58 const CardContent = forwardRef<
     59   HTMLDivElement,
     60   HTMLAttributes<HTMLDivElement>
     61 >(({ className, ...props }, ref) => (
     62   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
     63 ))
     64 CardContent.displayName = "CardContent"
     65 
     66 const CardFooter = forwardRef<
     67   HTMLDivElement,
     68   HTMLAttributes<HTMLDivElement>
     69 >(({ className, ...props }, ref) => (
     70   <div
     71     ref={ref}
     72     className={cn("flex items-center p-6 pt-0", className)}
     73     {...props}
     74   />
     75 ))
     76 CardFooter.displayName = "CardFooter"
     77 
     78 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }