07cd3bde3b
- Added theme context and provider for light/dark mode support. - Integrated theme toggle button in the Header component. - Updated UI components to utilize CSS variables for consistent theming. - Enhanced Kanban components and forms with new theme styles for better visual coherence. - Adjusted global styles to define color variables for both themes, improving maintainability.
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { HTMLAttributes, forwardRef } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
variant?: 'default' | 'elevated' | 'bordered' | 'column';
|
|
}
|
|
|
|
const Card = forwardRef<HTMLDivElement, CardProps>(
|
|
({ className, variant = 'default', ...props }, ref) => {
|
|
const variants = {
|
|
default: 'bg-[var(--card)]/50 border border-[var(--border)]/50',
|
|
elevated: 'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20',
|
|
bordered: 'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg',
|
|
column: 'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20'
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'rounded-lg backdrop-blur-sm transition-all duration-200',
|
|
variants[variant],
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Card.displayName = 'Card';
|
|
|
|
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn('p-4 border-b border-[var(--border)]/50', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
|
|
CardHeader.displayName = 'CardHeader';
|
|
|
|
const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<h3
|
|
ref={ref}
|
|
className={cn('font-mono font-semibold text-[var(--foreground)] tracking-wide', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
|
|
CardTitle.displayName = 'CardTitle';
|
|
|
|
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn('p-4', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
|
|
CardContent.displayName = 'CardContent';
|
|
|
|
const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn('p-4 border-t border-[var(--border)]/50', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
|
|
CardFooter.displayName = 'CardFooter';
|
|
|
|
export { Card, CardHeader, CardTitle, CardContent, CardFooter };
|