103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import * as React from 'react'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import { cn } from '../../utils/cn'
|
|
|
|
const cardVariants = cva(
|
|
'rounded-lg border border-border bg-surface-elevated overflow-hidden transition-all duration-normal',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: '',
|
|
interactive: [
|
|
'cursor-pointer',
|
|
'hover:shadow-lg hover:border-border-strong',
|
|
'active:shadow-md',
|
|
],
|
|
compact: 'p-0',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
}
|
|
)
|
|
|
|
export interface CardProps
|
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
VariantProps<typeof cardVariants> {}
|
|
|
|
const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
({ className, variant, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(cardVariants({ variant }), className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
)
|
|
Card.displayName = 'Card'
|
|
|
|
const CardHeader = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn('flex flex-col space-y-1.5 p-6 pb-4', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardHeader.displayName = 'CardHeader'
|
|
|
|
const CardTitle = React.forwardRef<
|
|
HTMLHeadingElement,
|
|
React.HTMLAttributes<HTMLHeadingElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<h3
|
|
ref={ref}
|
|
className={cn(
|
|
'text-lg font-semibold leading-tight text-content-primary',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardTitle.displayName = 'CardTitle'
|
|
|
|
const CardDescription = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<p
|
|
ref={ref}
|
|
className={cn('text-sm text-content-secondary', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardDescription.displayName = 'CardDescription'
|
|
|
|
const CardContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
|
))
|
|
CardContent.displayName = 'CardContent'
|
|
|
|
const CardFooter = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'flex items-center p-6 pt-0 border-t border-border bg-surface-subtle/50 mt-4 -mx-px -mb-px rounded-b-lg',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardFooter.displayName = 'CardFooter'
|
|
|
|
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
|