6265e56a7f
Learn uses 64-gua card grid; liuyao/bazi/combined use two input cards plus sticky right AI panel; add manifest, service worker, and install prompt. Co-authored-by: Cursor <cursoragent@cursor.com>
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function ZenCard({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
className,
|
|
}: {
|
|
title?: string;
|
|
subtitle?: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"zen-card relative overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-5 shadow-sm backdrop-blur-sm sm:p-6",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="zen-card-glow pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full opacity-40" />
|
|
{(title || subtitle) && (
|
|
<header className="relative mb-4 border-b border-border/50 pb-3">
|
|
{title && (
|
|
<h2 className="text-base font-medium tracking-wide text-foreground">
|
|
{title}
|
|
</h2>
|
|
)}
|
|
{subtitle && (
|
|
<p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
|
|
)}
|
|
</header>
|
|
)}
|
|
<div className="relative space-y-4">{children}</div>
|
|
</section>
|
|
);
|
|
}
|