openhands
a3e3356ea7
Unify the public site by making SectionCard and the verify status card use the same --radius-lg / --shadow-card tokens and primary-tint header as the existing CSS .content-card used by all content pages. This makes the entire (site) group visually consistent without rewriting every page, and keeps the shadcn Card in components/ui/card.tsx (used by admin) intact.
84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface SectionCardProps {
|
|
title: string;
|
|
icon?: string;
|
|
actionHref?: string;
|
|
actionLabel?: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
bodyClassName?: string;
|
|
}
|
|
|
|
/**
|
|
* Consistent, restrained panel used across the home page. Replaces the
|
|
* per-section neon gradients with a single calm surface + hairline divider so
|
|
* the page reads as professional rather than game-like.
|
|
*/
|
|
export function SectionCard({
|
|
title,
|
|
icon,
|
|
actionHref,
|
|
actionLabel,
|
|
children,
|
|
className,
|
|
bodyClassName,
|
|
}: SectionCardProps) {
|
|
return (
|
|
<div
|
|
className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${
|
|
className ?? ""
|
|
}`}
|
|
style={{
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
boxShadow: "var(--shadow-card)",
|
|
}}
|
|
>
|
|
<div
|
|
className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
|
|
style={{
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
|
background:
|
|
"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))",
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
{icon && (
|
|
<Image
|
|
src={icon}
|
|
alt=""
|
|
width={18}
|
|
height={18}
|
|
unoptimized
|
|
className="opacity-90"
|
|
/>
|
|
)}
|
|
<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>
|
|
<div className={bodyClassName ?? "p-5"}>{children}</div>
|
|
</div>
|
|
);
|
|
}
|