80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
variant?: 'default' | 'muted' | 'elevated' | 'outline';
|
|
hover?: boolean;
|
|
}
|
|
|
|
const paddings: Record<string, string> = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-4',
|
|
lg: 'p-6',
|
|
};
|
|
|
|
export function Card({
|
|
padding = 'md',
|
|
variant = 'default',
|
|
hover,
|
|
className,
|
|
children,
|
|
...props
|
|
}: CardProps) {
|
|
const variants: Record<NonNullable<CardProps['variant']>, string> = {
|
|
default: 'bg-[var(--bl-surface-card,#1a1a2e)] border-[var(--bl-border,#2a2a4a)]',
|
|
muted: 'bg-[var(--bl-surface-muted,#252540)] border-[var(--bl-border,#2a2a4a)]',
|
|
elevated: 'bg-[var(--bl-bg-elevated,#12151c)] border-[var(--bl-border,#2a2a4a)] shadow-sm',
|
|
outline: 'bg-transparent border-[var(--bl-border,#2a2a4a)]',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'rounded-xl border',
|
|
variants[variant],
|
|
hover && 'transition-colors hover:border-[var(--bl-accent,#5A8CFF)]/40',
|
|
paddings[padding],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
|
|
export function CardHeader({ className, children, ...props }: CardHeaderProps) {
|
|
return (
|
|
<div className={clsx('mb-3', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type CardTitleProps = React.ComponentPropsWithoutRef<'h3'>;
|
|
|
|
export function CardTitle({ className, children, ...props }: CardTitleProps) {
|
|
return (
|
|
<h3
|
|
className={clsx('text-lg font-semibold text-[var(--bl-text-primary,#fff)]', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h3>
|
|
);
|
|
}
|
|
|
|
export type CardDescriptionProps = React.ComponentPropsWithoutRef<'p'>;
|
|
|
|
export function CardDescription({ className, children, ...props }: CardDescriptionProps) {
|
|
return (
|
|
<p className={clsx('text-sm text-[var(--bl-text-secondary,#a0a0b0)]', className)} {...props}>
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|