58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type BentoCardProps = {
|
|
eyebrow: string;
|
|
title: string;
|
|
description?: string;
|
|
icon?: ReactNode;
|
|
className?: string;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export function BentoCard({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
icon,
|
|
className,
|
|
children,
|
|
}: BentoCardProps) {
|
|
return (
|
|
<AppCard
|
|
layer="single"
|
|
interactive
|
|
className={cn(
|
|
"group h-full border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:bg-background/80 hover:shadow-lg",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex h-full flex-col gap-6 p-6">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
|
{eyebrow}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
|
|
{title}
|
|
</h3>
|
|
{description ? (
|
|
<p className="text-sm leading-7 text-muted-foreground">{description}</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
{icon ? (
|
|
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-nested border border-border/70 bg-background text-foreground transition-all duration-300 group-hover:-translate-y-0.5 group-hover:border-border-strong group-hover:shadow-sm">
|
|
{icon}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</AppCard>
|
|
);
|
|
}
|