This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
+112
-97
@@ -1,113 +1,128 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { cached } from "@/lib/cache";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
|
||||
export async function SiteHeader() {
|
||||
const t = await getTranslations("header");
|
||||
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", ""),
|
||||
]);
|
||||
const t = await getTranslations("header");
|
||||
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 online: number;
|
||||
try {
|
||||
online = await cached("online_count", 10_000, () => prisma.user.count({ where: { online: "1" } }));
|
||||
} catch {
|
||||
online = 0;
|
||||
}
|
||||
let online: number;
|
||||
try {
|
||||
online = await cached("online_count", 10_000, () =>
|
||||
prisma.user.count({ where: { online: "1" } }),
|
||||
);
|
||||
} catch {
|
||||
online = 0;
|
||||
}
|
||||
|
||||
const bannerUrl =
|
||||
header && header !== "/assets/images/background.png" ? header : "/assets/images/banner.png";
|
||||
const bannerUrl =
|
||||
header && header !== "/assets/images/background.png"
|
||||
? header
|
||||
: "/assets/images/banner.png";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="site-header relative w-full overflow-hidden"
|
||||
style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }}
|
||||
>
|
||||
{/* Background image */}
|
||||
<div className="absolute inset-0" style={{ background: `url(${bannerUrl}) center/cover no-repeat` }} />
|
||||
return (
|
||||
<div
|
||||
className="site-header relative w-full overflow-hidden"
|
||||
style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }}
|
||||
>
|
||||
{/* Background image */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{ background: `url(${bannerUrl}) center/cover no-repeat` }}
|
||||
/>
|
||||
|
||||
{/* Gradient overlays */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.7) 100%)",
|
||||
}}
|
||||
/>
|
||||
{/* Gradient overlays */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.7) 100%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle dot pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.04]"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)",
|
||||
backgroundSize: "20px 20px",
|
||||
}}
|
||||
/>
|
||||
{/* Subtle dot pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.04]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)",
|
||||
backgroundSize: "20px 20px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Decorative glows */}
|
||||
<div
|
||||
className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-[0.12] blur-[120px]"
|
||||
style={{ background: "var(--color-primary)" }}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full opacity-[0.08] blur-[100px]"
|
||||
style={{ background: "var(--color-primary)" }}
|
||||
/>
|
||||
{/* Decorative glows */}
|
||||
<div
|
||||
className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-[0.12] blur-[120px]"
|
||||
style={{ background: "var(--color-primary)" }}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full opacity-[0.08] blur-[100px]"
|
||||
style={{ background: "var(--color-primary)" }}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative flex flex-col items-center justify-center px-4 py-8 md:py-12 min-h-[clamp(12rem,30vw,18rem)]">
|
||||
<Link href="/" className="transition-transform duration-300 hover:scale-105 mb-8">
|
||||
{logo ? (
|
||||
<Image
|
||||
className="drop-shadow-2xl block"
|
||||
src={logo}
|
||||
alt={hotelName ?? "Hotel"}
|
||||
width={200}
|
||||
height={120}
|
||||
style={{ maxHeight: 120, width: "auto", height: "auto" }}
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<h1
|
||||
className="text-center font-extrabold tracking-tight leading-none text-white"
|
||||
style={{
|
||||
fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
|
||||
textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
{hotelName} - Hotel
|
||||
</h1>
|
||||
)}
|
||||
</Link>
|
||||
{/* Content */}
|
||||
<div className="relative flex flex-col items-center justify-center px-4 py-8 md:py-12 min-h-[clamp(12rem,30vw,18rem)]">
|
||||
<Link
|
||||
href="/"
|
||||
className="transition-transform duration-300 hover:scale-105 mb-8"
|
||||
>
|
||||
{logo ? (
|
||||
<Image
|
||||
className="drop-shadow-2xl block"
|
||||
src={logo}
|
||||
alt={hotelName ?? "Hotel"}
|
||||
width={200}
|
||||
height={120}
|
||||
style={{ maxHeight: 120, width: "auto", height: "auto" }}
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<h1
|
||||
className="text-center font-extrabold tracking-tight leading-none text-white"
|
||||
style={{
|
||||
fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
|
||||
textShadow:
|
||||
"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
{hotelName} - Hotel
|
||||
</h1>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Online badge */}
|
||||
<div
|
||||
className="flex items-center gap-3 px-6 py-3 rounded-full"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
backdropFilter: "blur(16px)",
|
||||
WebkitBackdropFilter: "blur(16px)",
|
||||
border: "1px solid rgba(255,255,255,0.10)",
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
|
||||
}}
|
||||
>
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
||||
</span>
|
||||
<span className="text-sm font-bold tracking-wide" style={{ color: "rgba(255,255,255,0.9)" }}>
|
||||
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* Online badge */}
|
||||
<div
|
||||
className="flex items-center gap-3 px-6 py-3 rounded-full"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
backdropFilter: "blur(16px)",
|
||||
WebkitBackdropFilter: "blur(16px)",
|
||||
border: "1px solid rgba(255,255,255,0.10)",
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
|
||||
}}
|
||||
>
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-bold tracking-wide"
|
||||
style={{ color: "rgba(255,255,255,0.9)" }}
|
||||
>
|
||||
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user