43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import type { LucideIcon } from 'lucide-react';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
export function ActionTile({
|
||
icon: Icon,
|
||
label,
|
||
description,
|
||
className,
|
||
onClick
|
||
}: {
|
||
icon: LucideIcon;
|
||
label: string;
|
||
description?: string;
|
||
className?: string;
|
||
onClick?: () => void;
|
||
}) {
|
||
const content = (
|
||
<>
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white">
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
<div className="max-w-[92px] text-[12px] font-medium leading-tight">{label}</div>
|
||
{description ? <p className="line-clamp-2 text-[11px] leading-tight text-[#667085]">{description}</p> : null}
|
||
</>
|
||
);
|
||
|
||
const baseClass = cn('flex min-h-[92px] flex-col items-center justify-center gap-2 rounded-[22px] bg-[#f4f5f8] p-3 text-center', className);
|
||
|
||
if (onClick) {
|
||
return (
|
||
<button type="button" onClick={onClick} className={cn(baseClass, 'transition hover:bg-[#eceef4]')}>
|
||
{content}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
return <div className={baseClass}>{content}</div>;
|
||
}
|
||
|
||
export function SectionTitle({ children }: { children: React.ReactNode }) {
|
||
return <h2 className="mb-4 mt-8 text-[26px] font-medium tracking-tight">{children} ›</h2>;
|
||
}
|