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
@@ -8,10 +8,10 @@ import { AmbientOrbs } from "@/components/ambient-orbs";
|
||||
import { AnimatedCounter } from "@/components/animated-counter";
|
||||
import { HomeLoginForm } from "@/components/auth/home-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 { TypewriterText } from "@/components/typewriter-text";
|
||||
import { auth } from "@/lib/auth";
|
||||
@@ -321,15 +321,9 @@ export default async function Home() {
|
||||
icon: "/assets/images/icons/catalog.png",
|
||||
},
|
||||
].map((s) => (
|
||||
<div
|
||||
<SurfaceCard
|
||||
key={s.label}
|
||||
className="relative overflow-hidden rounded-2xl border bg-[var(--color-surface)] p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||
boxShadow:
|
||||
"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
className="relative p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
|
||||
>
|
||||
<div
|
||||
className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
|
||||
@@ -364,7 +358,7 @@ export default async function Home() {
|
||||
{s.label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -373,7 +367,7 @@ export default async function Home() {
|
||||
<div className="flex flex-col gap-4 md:flex-row">
|
||||
{/* Left: Login & Register */}
|
||||
<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={th("login")}
|
||||
icon="/assets/images/icons/navigation/me.png"
|
||||
bodyClassName="p-4"
|
||||
@@ -386,16 +380,10 @@ export default async function Home() {
|
||||
}}
|
||||
nonce={nonce}
|
||||
/>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
|
||||
<Link href="/register" className="relative block group">
|
||||
<div
|
||||
className="overflow-hidden rounded-2xl border transition-all duration-200 group-hover:shadow-lg"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<SurfaceCard className="transition-all duration-200 group-hover:shadow-lg">
|
||||
<Image
|
||||
src="/assets/images/EnterHubbly.png"
|
||||
alt="Register"
|
||||
@@ -404,7 +392,7 @@ export default async function Home() {
|
||||
className="block w-full"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
<span
|
||||
className="pointer-events-none absolute inset-0 flex items-center text-2xl font-extrabold text-white md:text-3xl"
|
||||
style={{
|
||||
@@ -418,7 +406,7 @@ export default async function Home() {
|
||||
</Link>
|
||||
|
||||
{latestUsers.length > 0 && (
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={tp("latestUsers", { count: users.toLocaleString() })}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
bodyClassName="p-4"
|
||||
@@ -443,13 +431,13 @@ export default async function Home() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
)}
|
||||
</Reveal>
|
||||
|
||||
{/* Right: News */}
|
||||
<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={tp("latestNews")}
|
||||
icon="/assets/images/icons/article.gif"
|
||||
actionHref="/news"
|
||||
@@ -509,14 +497,14 @@ export default async function Home() {
|
||||
{tp("noArticles")}
|
||||
</p>
|
||||
)}
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
{/* ── Online users ── */}
|
||||
{recentUsers.length > 0 && (
|
||||
<Reveal>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={tp("recentUsers")}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
actionHref="/community"
|
||||
@@ -547,7 +535,7 @@ export default async function Home() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
)}
|
||||
|
||||
@@ -601,7 +589,7 @@ export default async function Home() {
|
||||
{/* ── Recent photos ── */}
|
||||
{recentPhotos.length > 0 && (
|
||||
<Reveal>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={tp("recentPhotos")}
|
||||
icon="/assets/images/icons/camera.png"
|
||||
>
|
||||
@@ -627,7 +615,7 @@ export default async function Home() {
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,8 +4,8 @@ import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { updateMotto } from "@/actions/user-settings";
|
||||
import { SectionCard } from "@/components/home-section";
|
||||
import { Reveal } from "@/components/motion-reveal";
|
||||
import { SurfaceCard } from "@/components/surface-card";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { db, User } from "@/lib/db";
|
||||
import { avatarImageUrl } from "@/lib/format";
|
||||
@@ -47,8 +47,8 @@ export default async function SettingsPage() {
|
||||
<div className="flex flex-col gap-6 pb-14">
|
||||
{/* Header */}
|
||||
<Reveal>
|
||||
<div
|
||||
className="relative overflow-hidden rounded-2xl border px-5 py-4"
|
||||
<SurfaceCard
|
||||
className="relative px-5 py-4"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
||||
@@ -92,12 +92,12 @@ export default async function SettingsPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Profile card */}
|
||||
<Reveal delay={0.05}>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("publicProfile")}
|
||||
icon="/assets/images/icons/navigation/me.png"
|
||||
bodyClassName="p-5 flex items-center gap-5"
|
||||
@@ -147,12 +147,12 @@ export default async function SettingsPage() {
|
||||
{user.mail || t("noEmail")}
|
||||
</p>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Motto form */}
|
||||
<Reveal delay={0.1}>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("changeMotto")}
|
||||
icon="/assets/images/icons/star.gif"
|
||||
bodyClassName="p-5"
|
||||
@@ -197,12 +197,12 @@ export default async function SettingsPage() {
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Security card */}
|
||||
<Reveal delay={0.15}>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("securityTitle")}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
bodyClassName="p-5"
|
||||
@@ -226,61 +226,56 @@ export default async function SettingsPage() {
|
||||
>
|
||||
{t("twoFactorLink")}
|
||||
</Link>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Sessions link */}
|
||||
<Reveal delay={0.2}>
|
||||
<Link
|
||||
href="/settings/sessions"
|
||||
className="block overflow-hidden rounded-2xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/community.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="text-sm font-extrabold"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
Session Management
|
||||
</span>
|
||||
<p
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
View active sessions and sign out everywhere
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="text-lg font-bold"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
<Link href="/settings/sessions" className="block">
|
||||
<SurfaceCard className="transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/community.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="text-sm font-extrabold"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
Session Management
|
||||
</span>
|
||||
<p
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
View active sessions and sign out everywhere
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="text-lg font-bold"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</Link>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user