61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Link } from "@tanstack/react-router"
|
|
|
|
import { useTheme } from "@/components/theme-provider"
|
|
import { cn } from "@/lib/utils"
|
|
import icon from "/assets/images/spatialhub-icon.svg"
|
|
import iconLight from "/assets/images/spatialhub-icon-light.svg"
|
|
import logo from "/assets/images/spatialhub-logo.svg"
|
|
import logoLight from "/assets/images/spatialhub-logo-light.svg"
|
|
|
|
interface LogoProps {
|
|
variant?: "full" | "icon" | "responsive"
|
|
className?: string
|
|
asLink?: boolean
|
|
}
|
|
|
|
export function Logo({
|
|
variant = "full",
|
|
className,
|
|
asLink = true,
|
|
}: LogoProps) {
|
|
const { resolvedTheme } = useTheme()
|
|
const isDark = resolvedTheme === "dark"
|
|
|
|
const fullLogo = isDark ? logoLight : logo
|
|
const iconLogo = isDark ? iconLight : icon
|
|
|
|
const content =
|
|
variant === "responsive" ? (
|
|
<>
|
|
<img
|
|
src={fullLogo}
|
|
alt="SpatialHub"
|
|
className={cn(
|
|
"h-6 w-auto group-data-[collapsible=icon]:hidden",
|
|
className,
|
|
)}
|
|
/>
|
|
<img
|
|
src={iconLogo}
|
|
alt="SpatialHub"
|
|
className={cn(
|
|
"size-5 hidden group-data-[collapsible=icon]:block",
|
|
className,
|
|
)}
|
|
/>
|
|
</>
|
|
) : (
|
|
<img
|
|
src={variant === "full" ? fullLogo : iconLogo}
|
|
alt="SpatialHub"
|
|
className={cn(variant === "full" ? "h-6 w-auto" : "size-5", className)}
|
|
/>
|
|
)
|
|
|
|
if (!asLink) {
|
|
return content
|
|
}
|
|
|
|
return <Link to="/">{content}</Link>
|
|
}
|