89 lines
2.2 KiB
TypeScript
89 lines
2.2 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-4',
|
|
md: 'p-5',
|
|
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)] shadow-sm shadow-black/[0.04]',
|
|
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-lg shadow-black/10',
|
|
outline: 'bg-transparent border-[var(--bl-border,#2a2a4a)]',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'rounded-xl border',
|
|
variants[variant],
|
|
hover &&
|
|
'transition duration-150 hover:-translate-y-0.5 hover:border-[var(--bl-accent,#5A8CFF)] hover:shadow-lg hover:shadow-black/10',
|
|
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-4 flex flex-col gap-1', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type CardTitleProps = React.ComponentPropsWithoutRef<'h3'>;
|
|
|
|
export function CardTitle({ className, children, ...props }: CardTitleProps) {
|
|
return (
|
|
<h3
|
|
className={clsx(
|
|
'm-0 text-base font-semibold leading-6 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('m-0 text-sm leading-6 text-[var(--bl-text-secondary,#a0a0b0)]', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|