# All files / src/components/ui card.tsx

0% Statements 0/9
100% Branches 0/0
0% Functions 0/7
0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92

     import * as React from "react"

    import { cn } from "@/lib/utils"

    function Card({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card"
          className={cn(
            "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
            className
          )}
          {...props}
        />
      )
    }

    function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card-header"
          className={cn(
            "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
            className
          )}
          {...props}
        />
      )
    }

    function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card-title"
          className={cn("leading-none font-semibold", className)}
          {...props}
        />
      )
    }

    function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card-description"
          className={cn("text-muted-foreground text-sm", className)}
          {...props}
        />
      )
    }

    function CardAction({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card-action"
          className={cn(
            "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
            className
          )}
          {...props}
        />
      )
    }

    function CardContent({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card-content"
          className={cn("px-6", className)}
          {...props}
        />
      )
    }

    function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
      return (
        <div
          data-slot="card-footer"
          className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
          {...props}
        />
      )
    }

    export {
      Card,
      CardHeader,
      CardFooter,
      CardTitle,
      CardAction,
      CardDescription,
      CardContent}