card.tsx raw

   1  import * as React from "react";
   2  
   3  import { cn } from "src/lib/utils";
   4  
   5  function Card({ className, ...props }: React.ComponentProps<"div">) {
   6    return (
   7      <div
   8        data-slot="card"
   9        className={cn(
  10          "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
  11          className
  12        )}
  13        {...props}
  14      />
  15    );
  16  }
  17  
  18  function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  19    return (
  20      <div
  21        data-slot="card-header"
  22        className={cn(
  23          "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
  24          className
  25        )}
  26        {...props}
  27      />
  28    );
  29  }
  30  
  31  function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  32    return (
  33      <div
  34        data-slot="card-title"
  35        className={cn("leading-none font-semibold", className)}
  36        {...props}
  37      />
  38    );
  39  }
  40  
  41  function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  42    return (
  43      <div
  44        data-slot="card-description"
  45        className={cn("text-sm text-muted-foreground", className)}
  46        {...props}
  47      />
  48    );
  49  }
  50  
  51  function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  52    return (
  53      <div
  54        data-slot="card-action"
  55        className={cn(
  56          "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
  57          className
  58        )}
  59        {...props}
  60      />
  61    );
  62  }
  63  
  64  function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  65    return (
  66      <div
  67        data-slot="card-content"
  68        className={cn("px-6", className)}
  69        {...props}
  70      />
  71    );
  72  }
  73  
  74  function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  75    return (
  76      <div
  77        data-slot="card-footer"
  78        className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
  79        {...props}
  80      />
  81    );
  82  }
  83  
  84  export {
  85    Card,
  86    CardHeader,
  87    CardFooter,
  88    CardTitle,
  89    CardAction,
  90    CardDescription,
  91    CardContent,
  92  };
  93