dekun
9fc7336095
Cap content at 768-960px via PageShell width tiers, add muted outer margins, and limit gua grid to four columns. Co-authored-by: Cursor <cursoragent@cursor.com>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface GuaGridItem {
|
|
num: string;
|
|
name: string;
|
|
href: string;
|
|
}
|
|
|
|
export function GuaGrid({ items }: { items: GuaGridItem[] }) {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
|
|
{items.map(({ num, name, href }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"zen-card group relative flex flex-col items-center justify-center rounded-xl border border-border/50",
|
|
"bg-card/70 px-3 py-4 text-center shadow-sm transition-all duration-300",
|
|
"hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md",
|
|
)}
|
|
>
|
|
<span className="mb-2 flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-secondary/80 font-mono text-sm text-muted-foreground transition-colors group-hover:border-primary/40 group-hover:text-primary">
|
|
{num}
|
|
</span>
|
|
<span className="line-clamp-2 text-sm leading-snug text-foreground group-hover:text-primary">
|
|
{name}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|