card.tsx raw

   1  import * as React from 'react'
   2  
   3  import { cn } from '@/lib/utils'
   4  
   5  const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   6    ({ className, ...props }, ref) => (
   7      <div
   8        ref={ref}
   9        className={cn('rounded-xl border bg-card text-card-foreground transition-all duration-200', className)}
  10        {...props}
  11      />
  12    )
  13  )
  14  Card.displayName = 'Card'
  15  
  16  const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  17    ({ className, ...props }, ref) => (
  18      <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
  19    )
  20  )
  21  CardHeader.displayName = 'CardHeader'
  22  
  23  const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  24    ({ className, ...props }, ref) => (
  25      <div
  26        ref={ref}
  27        className={cn('font-semibold leading-none tracking-tight', className)}
  28        {...props}
  29      />
  30    )
  31  )
  32  CardTitle.displayName = 'CardTitle'
  33  
  34  const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  35    ({ className, ...props }, ref) => (
  36      <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
  37    )
  38  )
  39  CardDescription.displayName = 'CardDescription'
  40  
  41  const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  42    ({ className, ...props }, ref) => (
  43      <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
  44    )
  45  )
  46  CardContent.displayName = 'CardContent'
  47  
  48  const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  49    ({ className, ...props }, ref) => (
  50      <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
  51    )
  52  )
  53  CardFooter.displayName = 'CardFooter'
  54  
  55  export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
  56