Function Header

src/components/header.jsx:7–131

()

import { useTheme } from "next-themes";

export function Header() {

  const { user } = useAuth();
  const { theme, setTheme } = useTheme();
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header className={`fixed top-[var(--incident-height,0px)] left-0 right-0 z-50 w-full transition-all duration-300 bg-white/70 dark:bg-white/5 backdrop-blur-xl border-b ${isScrolled ? "border-slate-200 dark:border-white/10 shadow-sm dark:shadow-[0_4px_30px_rgba(0,0,0,0.5)]" : "border-transparent shadow-none"}`}>
      <div className="w-full px-4 sm:px-6 md:px-12 lg:px-16 h-16 flex items-center justify-between">

        {/* Left Side: Logo */}
        <div className="flex items-center">
          <a href="/" className="flex items-center gap-2 sm:gap-4 group">
            <div className="flex items-center gap-2 sm:gap-3">
              <img src="/stackryze_logo_black.png" alt="Stackryze Logo" className="h-8 sm:h-10 md:h-10 w-auto dark:hidden" />
              <img src="/stackryze_logo_white.png" alt="Stackryze Logo" className="h-8 sm:h-10 md:h-10 w-auto hidden dark:block" />
              <span className="text-sm sm:text-lg md:text-xl font-extrabold text-slate-900 dark:text-white tracking-tight">Stackryze Domains</span>
            </div>
            <div className="hidden xl:block h-5 w-[1px] bg-slate-300 dark:bg-slate-700"></div>
            <div className="hidden xl:flex items-baseline gap-0.5">
              <div className="flex items-center font-bold text-lg tracking-tight gap-0.5">
                <span className="text-orange-500">IN</span>
                <span className="text-slate-900 dark:text-white">DE</span>
                <span className="text-green-600">VS</span>
              </div>
              <span className="text-sm font-semibold text-slate-500 dark:text-slate-400 tracking-tight">.in</span>
            </div>
            <div className="hidden xl:block h-5 w-[1px] bg-slate-300 dark:bg-slate-700"></div>
            <div className="hidden xl:flex items-baseline gap-0.5">
              <div className="flex items-center font-bold text-lg tracking-tight gap-0.5">
                <span className="text-slate-900 dark:text-white">SRYZE</span>
              </div>
              <span className="text-sm font-semibold text-slate-500 dark:text-slate-400 tracking-tight">.cc</span>
            </div>
            <div className="hidden xl:block h-5 w-[1px] bg-slate-300 dark:bg-slate-700"></div>
            <div className="hidden xl:flex items-baseline gap-0.5">
              <div className="flex items-center font-bold text-lg tracking-tight gap-0.5">
                <span className="text-rose-500">RYZE</span>
                <span className="text-slate-900 dark:text-white">DNS</span>
              </div>
              <span className="text-sm font-semibold text-slate-500 dark:text-slate-400 tracking-tight">.org</span>
            </div>
            <div className="hidden xl:block h-5 w-[1px] bg-slate-300 dark:bg-slate-700"></div>
            <div className="hidden xl:flex items-baseline gap-0.5">
              <div className="flex items-center font-bold text-lg tracking-tight gap-0.5">
                <span className="text-slate-900 dark:text-white">NX</span>
              </div>
              <span className="text-sm font-semibold text-slate-500 dark:text-slate-400 tracking-tight">.kg</span>
            </div>
          </a>