62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export function Card({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'rounded-lg border border-black/10 dark:border-white/10',
|
|
'bg-white/60 dark:bg-white/[0.03] shadow-sm backdrop-blur-sm',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function CardHeader({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn('px-5 py-4', className)} {...props} />
|
|
}
|
|
|
|
export function CardTitle({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h3
|
|
className={cn(
|
|
'text-sm font-medium uppercase tracking-wider text-neutral-900 dark:text-neutral-100',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function CardDescription({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLParagraphElement>) {
|
|
return (
|
|
<p
|
|
className={cn('text-sm text-neutral-700 dark:text-neutral-300', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function CardContent({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn('px-5 pb-5', className)} {...props} />
|
|
}
|