src/components/brand.tsx

Linked repository file from this build.

import Link from "next/link";
import type { ComponentProps } from "react";

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

/** The Iris mark: an outer ring around a filled pupil. Inherits `currentColor`. */
export function IrisMark({ className, ...props }: ComponentProps<"svg">) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      focusable="false"
      className={cn("size-6", className)}
      {...props}
    >
      <circle cx="12" cy="12" r="9.25" stroke="currentColor" strokeWidth="1.5" />
      <circle cx="12" cy="12" r="4.25" fill="currentColor" />
    </svg>
  );
}

/** Mark and wordmark as one link. Public pages use it in their header. */
export function Brand({ href = "/", className }: { href?: string; className?: string }) {
  return (
    <Link
      href={href}
      className={cn(
        "inline-flex items-center gap-2.5 rounded-md font-heading text-base font-semibold tracking-tight text-foreground",
        className,
      )}
    >
      <IrisMark className="size-6 text-primary" />
      Iris
    </Link>
  );
}