Initial commit

components/logo.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import Image from "next/image"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+interface LogoProps {
+  className?: string
+  showText?: boolean
+  showColor?: boolean | "dark" | "light"
+}
+
+export function Logo({ className = "block", showText = true, showColor = true }: LogoProps) {
+  const { theme, systemTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // After mounting, we can access the theme
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    // During SSR and before hydration, we can't know the theme
+    // So return a placeholder with the same dimensions
+    return (
+      <div className={`relative ${showText ? "w-[100px]" : "w-[50px]"} h-[50px] ${className}`}>
+        <div className="absolute inset-0 bg-transparent" />
+      </div>
+    )
+  }
+
+  const effectiveTheme = theme == "system" ? systemTheme : theme;
+  const isDark = effectiveTheme == "dark";
+  const logoSrc = showText
+    ? (showColor == true || showColor == theme) ? (isDark ? "/logo-dark.svg" : "/logo.svg") : "/logo-mono.svg"
+    : (showColor == true || showColor == theme) ? (isDark ? "/logo-icon-dark.svg" : "/logo-icon.svg") : "/logo-icon-mono.svg";
+
+  return (
+    <Link href="/" className={`relative ${showText ? "w-[100px]" : "w-[50px]"} ${showColor && isDark ? "" : ""} h-[50px] ${className}`}>
+      <Image
+        src={logoSrc || "/placeholder.svg"}
+        alt="TECHTONIC FAULT Logo"
+        fill
+        className="object-contain"
+        sizes={showText ? "(max-width: 768px) 150px, 200px" : "50px"}
+        priority
+      />
+    </Link>
+  )
+}