refactor: consolidate card components into a single SurfaceCard
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.
This commit is contained in:
openhands committed
1 parent
ed6eaf33a0
commit
555c783d55
7 files changed
+178
-222
No files matched your search
@@ -1,83 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +1,48 @@
|
||||
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))";
|
||||
|
||||
/**
|
||||
* Public-site surface card. Mirrors the CSS .content-card / SectionCard visual
|
||||
* language (--radius-lg corners, --shadow-card, hairline border) so every page
|
||||
* that opts out of ContentCard still shares one consistent component.
|
||||
*/
|
||||
export function SurfaceCard({
|
||||
className = "",
|
||||
style,
|
||||
children,
|
||||
}: {
|
||||
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;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 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}`}
|
||||
@@ -26,18 +52,50 @@ export function SurfaceCard({
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
/** Padded body for a SurfaceCard. Override padding via className. */
|
||||
export function SurfaceCardBody({
|
||||
className = "p-5",
|
||||
children,
|
||||
}: {
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return <div className={className}>{children}</div>;
|
||||
}
|
||||
Reference in new issue
Block a user