Port AtomCMS atom theme faithfully (Tailwind v4 + real CSS/assets + shell)
Make the template match the atom theme, not just approximate it: - Add Tailwind v4 (+forms/typography plugins, postcss) and port the real atom CSS (global.css + atom app.css) into globals.css: nav-item underline, currency + navigation icon classes, site-bg, card-base/hover-lift, text utils — asset paths adapted to /assets. - Copy the real theme assets (backgrounds, icons/currency/navigation, profile, leaderboards) into public/assets. - Rebuild the shell 1:1 from the atom Blade: TopHeader (currency pills + user/admin dropdowns, auth-only), SiteHeader (header image + black/50 overlay, logo+online+Nitro client / guest Login+Create-account CTA), Navigation (white bar, nav-item + Community/Assistance dropdowns), Footer. ThemeVars injects the DB-driven CSS custom properties into :root like app.blade.php. Layout uses the atom body/site-bg + grid-cols-12 max-w-7xl content wrapper. Verified: tsc 0, next build exit 0; curl confirms the atom markup, compiled CSS references the assets, and background-light.jpg + currency/navigation icons all serve 200.
This commit is contained in:
Simo committed
1 parent
e668fa85ec
commit
e19debb795
337 files changed
+1172
-398
No files matched your search
+96
-118
@@ -1,136 +1,114 @@
|
||||
import Link from "next/link";
|
||||
import { auth, signOut } from "@/lib/auth";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
|
||||
export async function SiteHeader() {
|
||||
const [hotelName, session] = await Promise.all([
|
||||
siteSettings.get("hotel_name", "Atom"),
|
||||
const [session, hotelName, header, logo] = await Promise.all([
|
||||
auth(),
|
||||
siteSettings.get("hotel_name", "Atom"),
|
||||
siteSettings.get("cms_header", "/assets/images/background.png"),
|
||||
siteSettings.get("cms_logo", ""),
|
||||
]);
|
||||
|
||||
let credits = 0;
|
||||
let duckets = 0;
|
||||
let diamonds = 0;
|
||||
if (session?.user?.id) {
|
||||
try {
|
||||
const id = Number(session.user.id);
|
||||
const [user, currencies] = await Promise.all([
|
||||
prisma.user.findUnique({ where: { id }, select: { credits: true } }),
|
||||
prisma.usersCurrency.findMany({ where: { userId: id } }),
|
||||
]);
|
||||
credits = user?.credits ?? 0;
|
||||
for (const c of currencies) {
|
||||
if (c.type === 0) duckets = c.amount;
|
||||
if (c.type === 5) diamonds = c.amount;
|
||||
}
|
||||
} catch {
|
||||
// DB unavailable — render the header without live balances.
|
||||
}
|
||||
let online = 0;
|
||||
try {
|
||||
online = await prisma.user.count({ where: { online: "1" } });
|
||||
} catch {
|
||||
online = 0;
|
||||
}
|
||||
|
||||
const isStaff = (session?.user?.rank ?? 0) >= 7;
|
||||
|
||||
return (
|
||||
<header className="site-header">
|
||||
<div className="bar">
|
||||
<Link href="/" className="brand">
|
||||
<span className="dot" />
|
||||
{hotelName}
|
||||
</Link>
|
||||
<nav className="nav">
|
||||
<Link className="nav-item" href="/">
|
||||
Home
|
||||
</Link>
|
||||
<Link className="nav-item" href="/news">
|
||||
News
|
||||
</Link>
|
||||
<Link className="nav-item" href="/shop">
|
||||
Shop
|
||||
</Link>
|
||||
<Link className="nav-item" href="/marketplace">
|
||||
Market
|
||||
</Link>
|
||||
<Link className="nav-item" href="/community">
|
||||
Community
|
||||
</Link>
|
||||
<Link className="nav-item" href="/photos">
|
||||
Photos
|
||||
</Link>
|
||||
<Link className="nav-item" href="/leaderboard">
|
||||
Leaderboard
|
||||
</Link>
|
||||
<Link className="nav-item" href="/guilds">
|
||||
Guilds
|
||||
</Link>
|
||||
<Link className="nav-item" href="/rares">
|
||||
Rares
|
||||
</Link>
|
||||
<Link className="nav-item" href="/help">
|
||||
Help
|
||||
</Link>
|
||||
{session?.user ? (
|
||||
<Link className="nav-item" href="/client">
|
||||
Hotel
|
||||
<div
|
||||
className="relative flex min-h-[13rem] h-52 w-full items-center justify-center"
|
||||
style={{ background: `url(${header})`, backgroundSize: "cover", backgroundPosition: "center" }}
|
||||
>
|
||||
<div className="absolute h-full w-full bg-black/50" />
|
||||
|
||||
{session?.user ? (
|
||||
<div className="relative flex h-full w-full max-w-7xl items-center justify-center pr-10 md:justify-between">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<Link href="/" className="ml-7">
|
||||
{logo ? (
|
||||
// biome-ignore lint/performance/noImgElement: external/CDN logo
|
||||
<img
|
||||
className="transition duration-300 ease-in-out hover:scale-105"
|
||||
src={logo}
|
||||
alt="Hotel logo"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-3xl font-extrabold text-white text-shadow">{hotelName}</span>
|
||||
)}
|
||||
</Link>
|
||||
) : null}
|
||||
{isStaff ? (
|
||||
<Link className="nav-item" href="/admin">
|
||||
Admin
|
||||
</Link>
|
||||
) : null}
|
||||
</nav>
|
||||
<span className="spacer" />
|
||||
{session?.user ? (
|
||||
<>
|
||||
<div className="currencies">
|
||||
<span className="currency">
|
||||
<span className="coin credits">cr</span>
|
||||
{credits}
|
||||
</span>
|
||||
<span className="currency">
|
||||
<span className="coin duckets">d</span>
|
||||
{duckets}
|
||||
</span>
|
||||
<span className="currency">
|
||||
<span className="coin diamonds">◆</span>
|
||||
{diamonds}
|
||||
|
||||
<div
|
||||
className="hidden md:flex items-center px-4 rounded-md relative h-[50px]"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
>
|
||||
<div
|
||||
className="absolute -left-1 h-6 w-6 rotate-45"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
/>
|
||||
<span className="relative">
|
||||
{online} {hotelName} online
|
||||
</span>
|
||||
</div>
|
||||
<Link className="nav-item" href="/friends">
|
||||
Friends
|
||||
</Link>
|
||||
<Link className="nav-item" href="/redeem">
|
||||
Redeem
|
||||
</Link>
|
||||
<Link className="nav-item" href="/settings">
|
||||
Settings
|
||||
</Link>
|
||||
<Link className="nav-item" href={`/u/${session.user.name}`}>
|
||||
{session.user.name}
|
||||
</Link>
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
await signOut({ redirectTo: "/" });
|
||||
}}
|
||||
>
|
||||
<button type="submit" className="btn btn-outline">
|
||||
Logout
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
|
||||
<Link href="/client">
|
||||
<button
|
||||
type="button"
|
||||
className="font-bold py-3 px-6 rounded-xl shadow-xl border-2 transition-all duration-300 hover:scale-110 hover:shadow-2xl text-base tracking-wide"
|
||||
style={{
|
||||
backgroundColor: "var(--button-color)",
|
||||
color: "var(--button-text-color)",
|
||||
borderColor: "rgba(255,255,255,0.3)",
|
||||
}}
|
||||
>
|
||||
Nitro client
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link className="nav-item" href="/register">
|
||||
Register
|
||||
</Link>
|
||||
<Link className="btn btn-outline" href="/login">
|
||||
Login
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative flex justify-center px-4">
|
||||
<div
|
||||
className="font-semibold flex flex-col items-center md:w-[600px]"
|
||||
style={{ color: "#ffffff", textShadow: "0 1px 4px rgba(0,0,0,0.7)" }}
|
||||
>
|
||||
<p className="hidden text-center text-xl md:block">
|
||||
An online virtual world where you can create your own avatar, make friends, chat,
|
||||
create rooms and much more!
|
||||
</p>
|
||||
<div className="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
|
||||
<Link href="/login">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-full border-2 px-8 py-2 uppercase transition duration-200 ease-in-out"
|
||||
style={{
|
||||
borderColor: "var(--color-primary)",
|
||||
backgroundColor: "var(--color-primary)",
|
||||
color: "var(--button-text-color)",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</Link>
|
||||
<p className="text-sm uppercase">Or</p>
|
||||
<Link href="/register">
|
||||
<button
|
||||
type="button"
|
||||
className="uppercase px-8 py-2.5 rounded-full transition ease-in-out duration-200"
|
||||
style={{ backgroundColor: "var(--color-accent)", color: "#ffffff" }}
|
||||
>
|
||||
Create an account
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user