EpicNext-Cms/src/components/site-header.tsx

import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { auth } from "@/lib/auth";
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", ""),
  ]);

  let online = 0;
  try {
    online = await prisma.user.count({ where: { online: "1" } });
  } catch {
    online = 0;
  }

  return (
    <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>

            <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">
                {t("online", { count: online, hotel: hotelName ?? "Atom" })}
              </span>
            </div>
          </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)",
                }}
              >
                {t("nitroClient")}
              </button>
            </Link>
          </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">{t("tagline")}</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)",
                  }}
                >
                  {t("login")}
                </button>
              </Link>
              <p className="text-sm uppercase">{t("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" }}
                >
                  {t("createAccount")}
                </button>
              </Link>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}