Logo

import Logo from '@/components/ui/logo.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Logo />
    </div>
  )
}

import { cn } from "@/lib/utils";

type LogoVariant =
	| "default"   // dark mark + cyan accent; adapts via .dark class
	| "inverted"  // white mark + cyan accent; for dark backgrounds without .dark class
	| "white";    // fully white; for coloured or photo backgrounds

type LogoShape =
	| "full"      // mark + wordmark (default)
	| "mark"      // icon/symbol only
	| "wordmark"; // text only

interface LogoProps {
	className?: string;
	variant?: LogoVariant;
	shape?: LogoShape;
}

const SVG_CONFIG: Record<LogoShape, { viewBox: string; width: number; height: number }> = {
	full:     { viewBox: "0 0 512 134",   width: 122, height: 32 },
	mark:     { viewBox: "0 0 122 134",   width: 29,  height: 32 },
	wordmark: { viewBox: "152 43 361 48", width: 120, height: 16 },
};

function Logo({ className, variant = "default", shape = "full" }: LogoProps) {
	const darkFill =
		variant === "default" ? "fill-navy dark:fill-foreground" : "fill-white";
	const cyanFill = variant === "white" ? "fill-white" : "fill-aavya";

	const { viewBox, width, height } = SVG_CONFIG[shape];

	return (
		<svg
			width={width}
			height={height}
			viewBox={viewBox}
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
			aria-hidden="true"
			className={cn("shrink-0", className)}
		>
				{shape !== "wordmark" && (
					<>
						{/* Mark — left dark portion */}
						<path
							fillRule="evenodd"
							clipRule