openhands
b57697b2e0
- Extract shared AuthTopBar frosted top bar; reuse in login & register - Add .page-grid class replacing 48 inline grid styles - Add .table-scroll + .table-cell-truncate helpers; wrap leaderboard/staff tables - Constrain settings page width (max-w-5xl) and stack profile card on mobile - Use theme background var for shop category icon (dark-mode safe)
96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
import Image from "next/image";
|
|
import { Clock } from "@/components/clock";
|
|
import { LanguageSwitcher } from "@/components/language-switcher";
|
|
import { Reveal } from "@/components/motion-reveal";
|
|
import { ThemeSwitcher } from "@/components/theme-switcher";
|
|
|
|
/**
|
|
* Shared frosted-glass top bar for the public auth pages (login, register,
|
|
* etc.). Shows the hotel logo + name on the left and language / clock / theme
|
|
* controls on the right. Defaults mirror the homepage top bar so auth pages
|
|
* share one consistent look.
|
|
*/
|
|
export function AuthTopBar({
|
|
hotelName,
|
|
logo,
|
|
showHotelName = true,
|
|
}: {
|
|
hotelName: string;
|
|
logo?: string | null;
|
|
showHotelName?: boolean;
|
|
}) {
|
|
return (
|
|
<Reveal>
|
|
<div
|
|
className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3"
|
|
style={{
|
|
background:
|
|
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
|
backdropFilter: "blur(14px)",
|
|
WebkitBackdropFilter: "blur(14px)",
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
|
boxShadow:
|
|
"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
{logo ? (
|
|
<Image
|
|
src={logo}
|
|
alt={hotelName}
|
|
width={100}
|
|
height={28}
|
|
className="shrink-0 object-contain"
|
|
unoptimized
|
|
style={{ maxHeight: 28, width: "auto", height: "auto" }}
|
|
/>
|
|
) : (
|
|
<Image
|
|
src="/assets/images/icons/lighthouse.png"
|
|
alt={hotelName}
|
|
width={28}
|
|
height={28}
|
|
className="shrink-0"
|
|
unoptimized
|
|
/>
|
|
)}
|
|
{showHotelName ? (
|
|
<span
|
|
className="hidden sm:inline text-sm font-extrabold uppercase tracking-wide"
|
|
style={{ color: "var(--color-text-readable)" }}
|
|
>
|
|
{hotelName}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className="flex items-center gap-1 sm:gap-1.5 rounded-lg px-1.5 py-1 sm:px-2"
|
|
style={{
|
|
background:
|
|
"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
|
|
}}
|
|
>
|
|
<LanguageSwitcher />
|
|
<div
|
|
className="hidden sm:block w-px h-5"
|
|
style={{
|
|
background:
|
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
}}
|
|
/>
|
|
<Clock />
|
|
<div
|
|
className="w-px h-5"
|
|
style={{
|
|
background:
|
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
}}
|
|
/>
|
|
<ThemeSwitcher />
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
);
|
|
}
|