spb/claude-remote

1import { useId } from 'react';2import { useBrand } from '@/stores/branding';34/** Brand mark: rounded square filled with the brand gradient of the instance (--color-brand-1/2/3 in globals.css), white prompt glyph. Same drawing as public/icons/icon.svg. */5export function Logo({ className }: { className?: string }) {6  const brand = useBrand();7  const id = useId();8  return (9    <svg viewBox="0 0 64 64" className={className} role="img" aria-label={brand.product}>10      <defs>11        <linearGradient id={id} x1="6" y1="4" x2="60" y2="62" gradientUnits="userSpaceOnUse">12          <stop offset="0" style={{ stopColor: 'var(--color-brand-1)' }} />13          <stop offset="0.6" style={{ stopColor: 'var(--color-brand-2)' }} />14          <stop offset="1.15" style={{ stopColor: 'var(--color-brand-3)' }} />15        </linearGradient>16      </defs>17      <rect width="64" height="64" rx="16" fill={`url(#${id})`} />18      <path d="M18 21l13 11-13 11" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />19      <rect x="35" y="38.5" width="13" height="6" rx="3" fill="#fff" />20    </svg>21  );22}23