openhands
555c783d55
Replace the three near-identical public card primitives (ContentCard for content pages, SectionCard for auth/account, and the new SurfaceCard) by merging SectionCard into SurfaceCard, which now supports an optional header (title/icon/action). Every remaining ad-hoc inline `rounded-2xl border` card across (site) is converted to SurfaceCard, preserving each card's unique visuals (background images, blur, gradients) via the style passthrough. Net result: the public site uses exactly two card components — ContentCard (CMS/content pages) and SurfaceCard (everything else) — and the shadcn Card in components/ui/card.tsx is left untouched for admin. Also deletes the now-unused components/home-section.tsx.
102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
const CARD_BORDER =
|
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";
|
|
const CARD_DIVIDER =
|
|
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
|
|
const CARD_HEADER_BG =
|
|
"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))";
|
|
|
|
export interface SurfaceCardProps {
|
|
children: ReactNode;
|
|
/** Optional header title. */
|
|
title?: string;
|
|
/** Optional header icon (image URL). */
|
|
icon?: string;
|
|
/** Optional header action link. */
|
|
actionHref?: string;
|
|
actionLabel?: string;
|
|
/** Class for the body wrapper (only used when a header is present). */
|
|
bodyClassName?: string;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
/**
|
|
* The single public-site card component. Mirrors the CSS `.content-card` visual
|
|
* language (--radius-lg corners, --shadow-card, hairline border). Pass `title`
|
|
* / `icon` / `actionHref` to render a section header, exactly like the old
|
|
* a card header. Without a header, children render directly so callers control
|
|
* padding via `className`.
|
|
*/
|
|
export function SurfaceCard({
|
|
children,
|
|
title,
|
|
icon,
|
|
actionHref,
|
|
actionLabel,
|
|
bodyClassName,
|
|
className = "",
|
|
style,
|
|
}: SurfaceCardProps) {
|
|
const hasHeader = Boolean(title || icon || (actionHref && actionLabel));
|
|
|
|
return (
|
|
<div
|
|
className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
|
|
style={{
|
|
borderColor: CARD_BORDER,
|
|
boxShadow: "var(--shadow-card)",
|
|
...style,
|
|
}}
|
|
>
|
|
{hasHeader && (
|
|
<div
|
|
className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
|
|
style={{ borderColor: CARD_DIVIDER, background: CARD_HEADER_BG }}
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
{icon && (
|
|
<Image
|
|
src={icon}
|
|
alt=""
|
|
width={18}
|
|
height={18}
|
|
unoptimized
|
|
className="opacity-90"
|
|
/>
|
|
)}
|
|
{title && (
|
|
<h2
|
|
className="text-sm font-bold tracking-tight"
|
|
style={{
|
|
fontFamily: "var(--font-nunito)",
|
|
color: "var(--color-text-readable)",
|
|
}}
|
|
>
|
|
{title}
|
|
</h2>
|
|
)}
|
|
</div>
|
|
{actionHref && actionLabel && (
|
|
<Link
|
|
href={actionHref}
|
|
className="text-xs font-semibold transition-colors hover:text-[var(--color-primary)] hover:underline"
|
|
style={{ color: "var(--color-text-muted)" }}
|
|
>
|
|
{actionLabel}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasHeader ? (
|
|
<div className={bodyClassName ?? "p-5"}>{children}</div>
|
|
) : (
|
|
children
|
|
)}
|
|
</div>
|
|
);
|
|
}
|