spb/datacenterindex

1import Link from "next/link";2import type { CSSProperties } from "react";3import { cn } from "@/components/ui/cn";45/**6 * DataCenterIndex mark — a globe (circle + meridian) crossed by three rack lines;7 * the middle line is the accent "index tick" that runs past the globe's edge.8 * Monochrome ink + one accent; readable from 16 px to 512 px.9 */10export function LogoMark({ size = 24, className, ink = "currentColor", accent = "var(--accent)", title = "DataCenterIndex", style }: { size?: number; className?: string; ink?: string; accent?: string; title?: string; style?: CSSProperties }) {11  return (12    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={cn("shrink-0", className)} role="img" aria-label={title} style={style}>13      <circle cx="15" cy="16" r="12" stroke={ink} strokeWidth="2.2" />14      <path d="M15 4c-3.2 2.9-4.8 6.9-4.8 12s1.6 9.1 4.8 12c3.2-2.9 4.8-6.9 4.8-12S18.2 6.9 15 4Z" stroke={ink} strokeWidth="1.4" />15      <path d="M4.6 10.6h20.8M4.6 21.4h20.8" stroke={ink} strokeWidth="2" strokeLinecap="round" />16      <path d="M3 16h28" stroke={accent} strokeWidth="2.6" strokeLinecap="round" />17    </svg>18  );19}2021/** Wordmark: "DataCenter" heavy + "Index" light, tight tracking; optional thin index mark. */22export function Wordmark({ className, compact }: { className?: string; compact?: boolean }) {23  return (24    <span className={cn("inline-flex items-baseline whitespace-nowrap leading-none tracking-[-0.02em] text-ink", className)}>25      <span className="font-semibold">DataCenter</span>26      <span className="font-normal text-ink-2">Index</span>27      {!compact && <span aria-hidden className="ml-1.5 inline-block h-[0.55em] w-[2px] translate-y-[1px] bg-accent" />}28    </span>29  );30}3132export function Logo({ href = "/", size = 22, className, compact, textClassName }: { href?: string | null; size?: number; className?: string; compact?: boolean; textClassName?: string }) {33  const inner = (34    <>35      <LogoMark size={size} />36      <Wordmark compact={compact} className={cn("text-[16px]", textClassName)} />37    </>38  );39  if (!href) return <span className={cn("inline-flex items-center gap-2", className)}>{inner}</span>;40  return (41    <Link href={href} className={cn("inline-flex min-h-10 items-center gap-2 rounded-xs", className)} aria-label="DataCenterIndex — home">42      {inner}43    </Link>44  );45}46