openhands
57710a7fe3
Gitea Actions Runner Test / test-job (push) Successful in 1s
CI / check (push) Failing after 26s
CI / tests-unit (push) Skipped
CI / tests-integration (push) Skipped
CI / tests-ui (push) Skipped
CI / preflight (push) Skipped
CI / deploy (push) Skipped
- add theme-aware helpers: btn-brand, btn-glass-dark, auth-input, auth-label, auth-alert, explore-pill, avatar-tile, aurora blobs and a hero scroll cue - reorder backdrop-filter declarations so the glass blur survives the production CSS optimizer in modern Chromium - hero: aurora glow, frosted recent-users chip, premium CTA buttons and cue - explore nav: icon pills with hover arrows; features: gradient icon tiles - stats: single glass panel with column dividers; join CTA: aurora + ring - auth forms: visible labels, icon inputs, eye/password toggle, gradient submit and pill footer links - auth pages: gradient card frame, aurora accents on the intro panel and hover-lift avatar tiles; unified pill-shaped top bar - drop the hard-coded register banner image in favor of the framed card
108 lines
3.1 KiB
TypeScript
108 lines
3.1 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";
|
|
import { ICON_LIGHTHOUSE } from "@/lib/site-icons";
|
|
|
|
/**
|
|
* 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-full border px-3 py-2.5 sm:px-5"
|
|
style={{
|
|
background:
|
|
"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
|
|
backdropFilter: "blur(14px)",
|
|
WebkitBackdropFilter: "blur(14px)",
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 10%, 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: 26, width: "auto", height: "auto" }}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
|
|
style={{
|
|
background:
|
|
"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
|
|
boxShadow:
|
|
"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
|
|
}}
|
|
>
|
|
<Image
|
|
src={ICON_LIGHTHOUSE}
|
|
alt=""
|
|
width={18}
|
|
height={18}
|
|
className="shrink-0"
|
|
unoptimized
|
|
style={{ filter: "brightness(0) invert(1)" }}
|
|
/>
|
|
</div>
|
|
)}
|
|
{showHotelName ? (
|
|
<span
|
|
className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
|
|
style={{ color: "var(--color-text-readable)" }}
|
|
>
|
|
{hotelName}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1 sm:px-2"
|
|
style={{
|
|
background:
|
|
"color-mix(in srgb, var(--color-text-muted) 5%, 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>
|
|
);
|
|
}
|