homeio

1import type { LucideIcon } from "@/components/icons/platform-icons";
2import type { ReactNode } from "react";
3import { cn } from "@/lib/utils";
4
5type WidgetCardProps = {
6  title?: string;
7  icon?: LucideIcon;
8  children: ReactNode;
9  className?: string;
10};
11
12export function WidgetCard({
13  title,
14  icon: Icon,
15  children,
16  className,
17}: WidgetCardProps) {
18  return (
19    <section
20      className={cn(
21        "relative shrink-0 overflow-hidden rounded-2xl border border-white/[0.09] p-4",
22        className,
23      )}
24      style={{
25        background: "var(--system-surface)",
26        backdropFilter: "blur(40px) saturate(160%)",
27        boxShadow: "var(--system-shadow-surface), inset 0 1px 0 rgba(255,255,255,0.12)",
28      }}
29    >
30      {/* Subtle accent top highlight */}
31      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent" />
32
33      {title ? (
34        <header className="mb-3.5 flex items-center gap-2">
35          {Icon ? (
36            <div className="flex size-5 items-center justify-center rounded-md bg-primary/15 ring-1 ring-inset ring-primary/20">
37              <Icon className="size-3 text-primary" />
38            </div>
39          ) : null}
40          <h3 className="text-[10px] font-semibold uppercase tracking-[0.15em] text-foreground/55">
41            {title}
42          </h3>
43        </header>
44      ) : null}
45      {children}
46    </section>
47  );
48}
49