diff --git a/src/app/(site)/me/page.tsx b/src/app/(site)/me/page.tsx index 660eb7c973..53008c9345 100644 --- a/src/app/(site)/me/page.tsx +++ b/src/app/(site)/me/page.tsx @@ -7,6 +7,7 @@ import { claimReferral } from "@/actions/referral"; import { Reveal } from "@/components/motion-reveal"; import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail"; +import { SurfaceCard } from "@/components/surface-card"; import { auth } from "@/lib/auth"; import { db, @@ -382,14 +383,9 @@ export default async function MePage({ { value: friendCount.toLocaleString(), label: "Friends" }, { value: lastLoginDate, label: "Last login" }, ].map((s) => ( -
{s.label}
-
+ ))} -
+

)} -

+ -
+

)}

-
+ {recentRooms.length > 0 && ( -
+

))}

-
+ )} {badges.length > 0 && ( -
+

))}

-
+ )} -
+

))}

-
+
); } catch { content = ( -
+

-

+ ); } diff --git a/src/app/(site)/search/page.tsx b/src/app/(site)/search/page.tsx index 6944c49175..72d642e714 100644 --- a/src/app/(site)/search/page.tsx +++ b/src/app/(site)/search/page.tsx @@ -2,6 +2,7 @@ import { and, eq, like } from "drizzle-orm"; import type { Metadata } from "next"; import Link from "next/link"; import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail"; +import { SurfaceCard } from "@/components/surface-card"; import { db, Rooms, User } from "@/lib/db"; export const metadata: Metadata = { title: "Search" }; @@ -18,21 +19,14 @@ export default async function SearchPage({ if (!query) { return ( -
+

Enter a search term to find users.

-
+ ); } @@ -66,14 +60,7 @@ export default async function SearchPage({ return (
-
+
-
+

Results for "{query}" — {users.length} user @@ -109,14 +96,7 @@ export default async function SearchPage({

{users.length > 0 && ( -
+

))}

-
+ )} {rooms.length > 0 && ( -
+

))}

-
+ )} {users.length === 0 && rooms.length === 0 && ( -
+

No users or rooms found for "{query}".

-
+ )} ); diff --git a/src/app/(site)/verify/page.tsx b/src/app/(site)/verify/page.tsx index 52f6fa7bae..e1c05a8403 100644 --- a/src/app/(site)/verify/page.tsx +++ b/src/app/(site)/verify/page.tsx @@ -3,6 +3,7 @@ import { CheckCircle2, Clock, MailX } from "lucide-react"; import Link from "next/link"; import { getTranslations } from "next-intl/server"; import { isValidVerificationToken } from "@/actions/email-verify"; +import { SurfaceCard } from "@/components/surface-card"; import { db, User } from "@/lib/db"; type Status = "verified" | "already" | "invalid" | "unavailable"; @@ -30,15 +31,7 @@ function StatusCard({ return (
-
+
{children}
-
+
); } diff --git a/src/components/surface-card.tsx b/src/components/surface-card.tsx new file mode 100644 index 0000000000..631bda2041 --- /dev/null +++ b/src/components/surface-card.tsx @@ -0,0 +1,43 @@ +import type { CSSProperties, ReactNode } from "react"; + +const CARD_BORDER = + "color-mix(in srgb, var(--color-text-muted) 12%, transparent)"; + +/** + * 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, +}: { + className?: string; + style?: CSSProperties; + children: ReactNode; +}) { + return ( +
+ {children} +
+ ); +} + +/** Padded body for a SurfaceCard. Override padding via className. */ +export function SurfaceCardBody({ + className = "p-5", + children, +}: { + className?: string; + children: ReactNode; +}) { + return
{children}
; +}