Logo

1import * as React from "react"
2 
3import { getBrand } from "@/lib/brand"
4import { cn } from "@/lib/utils"
5 
6/** Interrupted-A mark. Edit the SVG paths to change the logo. */
7export function LogoMark({
8  className,
9  title,
10}: {
11  className?: string
12  title?: string
13}) {
14  const label = title ?? getBrand().name
15  return (
16    <svg
17      viewBox="0 0 48 48"
18      width="24"
19      height="24"
20      fill="none"
21      role="img"
22      aria-label={label}
23      className={cn("text-foreground", className)}
24    >
25      <title>{label}</title>
26      <path
27        d="M14 36 L24 10 L34 36"
28        stroke="currentColor"
29        strokeWidth="4"
30        strokeLinecap="round"
31        strokeLinejoin="round"
32      />
33      <rect
34        x="17.5"
35        y="24.3"
36        width="13"
37        height="3.6"
38        rx="1.8"
39        fill="var(--color-brand, #0b7bff)"
40      />
41    </svg>
42  )
43}
44 
45export function LogoWordmark({
46  className,
47  markClassName,
48  name,
49}: {
50  className?: string
51  markClassName?: string
52  name?: string
53}) {
54  const label = name ?? getBrand().name
55  return (
56    <span className={cn("inline-flex items-center gap-2.5", className)}>
57      <LogoMark
58        className={cn("h-7 w-7 shrink-0", markClassName)}
59        title={label}
60      />
61      <span className="text-[19px] leading-none font-medium tracking-[-0.01em] text-foreground">
62        {label}
63      </span>
64    </span>
65  )
66}