spb/fetcha

1import * as React from "react";2import Link from "next/link";3import { cn } from "@/lib/utils";45/** Abstract mark: request → route → response. Three nodes, one path. */6export function LogoMark({ className, size = 22 }: { className?: string; size?: number }) {7  return (8    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={cn("shrink-0", className)} aria-hidden>9      <rect x="1" y="1" width="22" height="22" rx="6" className="fill-fg" />10      <path d="M6 12h4.5m0 0 3-4.5H18m-7.5 4.5 3 4.5H18" className="stroke-bg" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />11      <circle cx="6" cy="12" r="1.6" className="fill-accent" />12    </svg>13  );14}1516export function Logo({ className, href = "/", size = "md" }: { className?: string; href?: string | null; size?: "sm" | "md" | "lg" }) {17  const inner = (18    <span className={cn("inline-flex items-center gap-2 font-semibold tracking-[-0.03em] text-fg", size === "sm" && "text-[15px]", size === "md" && "text-[17px]", size === "lg" && "text-[22px]", className)}>19      <LogoMark size={size === "lg" ? 28 : size === "sm" ? 20 : 22} />20      fetcha21    </span>22  );23  if (!href) return inner;24  return (25    <Link href={href} className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40" aria-label="Fetcha home">26      {inner}27    </Link>28  );29}30