64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { cn } from '@/utils/cn';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
export interface WidgetHeadProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export function WidgetHead({ children, className }: WidgetHeadProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'border-b border-border p-4 [&_.title]:whitespace-nowrap [&_.title]:font-medium',
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface WidgetTitleProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
icon?: LucideIcon;
|
|
}
|
|
export function WidgetTitle({
|
|
children,
|
|
className,
|
|
icon: Icon,
|
|
}: WidgetTitleProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'relative flex items-center gap-4',
|
|
className,
|
|
!!Icon && 'pl-12'
|
|
)}
|
|
>
|
|
{Icon && (
|
|
<div className="absolute left-0 rounded-lg bg-slate-100 p-2">
|
|
<Icon size={18} />
|
|
</div>
|
|
)}
|
|
<div className="title">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface WidgetBodyProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export function WidgetBody({ children, className }: WidgetBodyProps) {
|
|
return <div className={cn('p-4', className)}>{children}</div>;
|
|
}
|
|
|
|
export interface WidgetProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
export function Widget({ children, className }: WidgetProps) {
|
|
return <div className={cn('card self-start', className)}>{children}</div>;
|
|
}
|