Refactor site header, heroes, and design system

2026-03-08 00:29:51 +01:00
parent a18370d003
commit 0c2b67e378
56 changed files with 2714 additions and 1318 deletions
@@ -0,0 +1,45 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+type SiteLogoProps = {
+  lightLogoUrl?: string | null;
+  darkLogoUrl?: string | null;
+  alt: string;
+  priority?: boolean;
+};
+
+export function SiteLogo({
+  lightLogoUrl,
+  darkLogoUrl,
+  alt,
+  priority = false,
+}: SiteLogoProps) {
+  const { theme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const activeTheme = theme === "system" ? resolvedTheme : theme;
+  const isDark = mounted && activeTheme === "dark";
+  const fallbackSrc = isDark ? "/logos/dark-primary.svg" : "/logos/light-primary.svg";
+  const src = isDark ? darkLogoUrl || lightLogoUrl || fallbackSrc : lightLogoUrl || darkLogoUrl || fallbackSrc;
+
+  return (
+    <span className="block">
+      <Image
+        src={src}
+        alt={alt}
+        width={360}
+        height={92}
+        sizes="(min-width: 1280px) 360px, (min-width: 1024px) 320px, (min-width: 640px) 280px, 240px"
+        className="h-9 w-auto object-contain object-left sm:h-10 lg:h-11 xl:h-12"
+        priority={priority}
+      />
+    </span>
+  );
+}