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
@@ -5,10 +5,10 @@ import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { LoginForm } from "@/components/auth/login-form";
|
||||
import { Clock } from "@/components/clock";
|
||||
import { SectionCard } from "@/components/home-section";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { Reveal } from "@/components/motion-reveal";
|
||||
import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
|
||||
import { SurfaceCard } from "@/components/surface-card";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
import { cached } from "@/lib/cache";
|
||||
import { db, User } from "@/lib/db";
|
||||
@@ -123,13 +123,12 @@ export default async function LoginPage() {
|
||||
<div className="flex flex-col gap-8 lg:flex-row">
|
||||
{/* Left panel */}
|
||||
<div className="lg:w-80 shrink-0 space-y-4">
|
||||
<div
|
||||
className="relative overflow-hidden rounded-2xl border p-6 text-center"
|
||||
<SurfaceCard
|
||||
className="relative p-6 text-center"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
||||
background: `url(/assets/images/background.png) center/cover no-repeat`,
|
||||
boxShadow: "var(--shadow-card)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -182,10 +181,10 @@ export default async function LoginPage() {
|
||||
{t("welcomeBackSub", { hotelName })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
|
||||
{recentUsers.length > 0 && (
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={th("online", { count: online, hotel: "" }).trim()}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
bodyClassName="p-4"
|
||||
@@ -215,11 +214,11 @@ export default async function LoginPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
)}
|
||||
|
||||
{latestUsers.length > 0 && (
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title="Newest citizens"
|
||||
icon="/assets/images/icons/friends.png"
|
||||
bodyClassName="p-4"
|
||||
@@ -249,7 +248,7 @@ export default async function LoginPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
)}
|
||||
|
||||
<p
|
||||
@@ -271,7 +270,7 @@ export default async function LoginPage() {
|
||||
|
||||
{/* Right: form */}
|
||||
<div className="flex-1">
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("title")}
|
||||
icon="/assets/images/icons/navigation/me.png"
|
||||
bodyClassName="p-6"
|
||||
@@ -290,7 +289,7 @@ export default async function LoginPage() {
|
||||
}}
|
||||
nonce={nonce}
|
||||
/>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
@@ -254,8 +254,8 @@ export default async function MePage({
|
||||
) : null}
|
||||
|
||||
<Reveal>
|
||||
<div
|
||||
className="relative overflow-hidden rounded-2xl border p-6 flex items-start gap-6"
|
||||
<SurfaceCard
|
||||
className="relative p-6 flex items-start gap-6"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
|
||||
borderColor:
|
||||
@@ -343,13 +343,13 @@ export default async function MePage({
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{alertRaw ? (
|
||||
<Reveal delay={0.05}>
|
||||
<div
|
||||
className="rounded-2xl border px-6 py-4 text-center"
|
||||
<SurfaceCard
|
||||
className="px-6 py-4 text-center"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-accent) 12%, transparent)",
|
||||
@@ -363,7 +363,7 @@ export default async function MePage({
|
||||
>
|
||||
{alertRaw}
|
||||
</p>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
) : null}
|
||||
|
||||
|
||||
+16
-28
File diff suppressed because it is too large.
Load diff
@@ -5,10 +5,10 @@ import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { RegisterForm } from "@/components/auth/register-form";
|
||||
import { Clock } from "@/components/clock";
|
||||
import { SectionCard } from "@/components/home-section";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { Reveal } from "@/components/motion-reveal";
|
||||
import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
|
||||
import { SurfaceCard } from "@/components/surface-card";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
import { cached } from "@/lib/cache";
|
||||
import { db, User } from "@/lib/db";
|
||||
@@ -125,13 +125,12 @@ export default async function RegisterPage() {
|
||||
<div className="flex flex-col gap-8 lg:flex-row">
|
||||
{/* Left panel */}
|
||||
<div className="lg:w-80 shrink-0 space-y-4">
|
||||
<div
|
||||
className="relative overflow-hidden rounded-2xl border p-6 text-center"
|
||||
<SurfaceCard
|
||||
className="relative p-6 text-center"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
||||
background: `url(/assets/images/background.png) center/cover no-repeat`,
|
||||
boxShadow: "var(--shadow-card)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -181,10 +180,10 @@ export default async function RegisterPage() {
|
||||
{th("tagline")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
|
||||
{recentUsers.length > 0 && (
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={tpr("whoIsOnline")}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
bodyClassName="p-4"
|
||||
@@ -214,11 +213,11 @@ export default async function RegisterPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
)}
|
||||
|
||||
{latestUsers.length > 0 && (
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title="Newest citizens"
|
||||
icon="/assets/images/icons/friends.png"
|
||||
bodyClassName="p-4"
|
||||
@@ -248,7 +247,7 @@ export default async function RegisterPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
)}
|
||||
|
||||
<p
|
||||
@@ -270,7 +269,7 @@ export default async function RegisterPage() {
|
||||
|
||||
{/* Right: form */}
|
||||
<div className="flex-1">
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={tpr("title")}
|
||||
icon="/assets/images/icons/navigation/me.png"
|
||||
bodyClassName="p-6"
|
||||
@@ -289,7 +288,7 @@ export default async function RegisterPage() {
|
||||
}}
|
||||
nonce={nonce}
|
||||
/>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -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>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user