feat: CalenTIQ Admin branding (wordmark, favicon, titles). Refs EventHub/EventHubSpec#10

2026-07-26 22:25:25 +03:00
parent 6d647dd037
commit 8f931db0f0
10 changed files with 133 additions and 9 deletions
@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type Size = 'sm' | 'md' | 'lg';
+
+type Props = {
+    size?: Size;
+    className?: string;
+    /** Show Time Arc mark next to wordmark (default true). */
+    withMark?: boolean;
+    /** Append muted "Admin" after the brand (sidebar / login). */
+    withAdmin?: boolean;
+};
+
+const sizeMap: Record<Size, { mark: string; text: string; admin: string }> = {
+    sm: { mark: 'h-5 w-5', text: 'text-sm', admin: 'text-[11px]' },
+    md: { mark: 'h-7 w-7', text: 'text-2xl', admin: 'text-sm' },
+    lg: { mark: 'h-10 w-10', text: 'text-4xl', admin: 'text-base' },
+};
+
+/**
+ * Public brand lockup: Time Arc + CalenTIQ (Admin).
+ * Uses currentColor so the mark follows theme foreground.
+ */
+const BrandWordmark: React.FC<Props> = ({
+    size = 'md',
+    className,
+    withMark = true,
+    withAdmin = false,
+}) => {
+    const s = sizeMap[size];
+    return (
+        <div
+            className={cn('inline-flex items-center gap-2 text-foreground', className)}
+            data-testid="brand-wordmark"
+            aria-label={withAdmin ? 'CalenTIQ Admin' : 'CalenTIQ'}
+        >
+            {withMark && (
+                <svg
+                    className={cn('shrink-0', s.mark)}
+                    viewBox="0 0 1024 1024"
+                    fill="none"
+                    aria-hidden
+                >
+                    <g
+                        stroke="currentColor"
+                        strokeWidth="48"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    >
+                        <path d="M512 132 A380 380 0 1 0 512 892" />
+                        <path d="M512 512 L377.77 434.50" />
+                        <path d="M512 512 L698.20 404.50" />
+                    </g>
+                    <circle cx="512" cy="512" r="24" fill="currentColor" />
+                    <circle cx="816.06" cy="207.94" r="18" fill="currentColor" />
+                    <circle cx="884.39" cy="297.00" r="18" fill="currentColor" />
+                    <circle cx="927.35" cy="400.71" r="18" fill="currentColor" />
+                    <circle cx="942.00" cy="512.00" r="18" fill="currentColor" />
+                    <circle cx="927.35" cy="623.29" r="18" fill="currentColor" />
+                    <circle cx="884.39" cy="727.00" r="18" fill="currentColor" />
+                    <circle cx="816.06" cy="816.06" r="18" fill="currentColor" />
+                </svg>
+            )}
+            <p className={cn('leading-none font-extrabold tracking-tight', s.text)}>
+                Calen<span className="text-primary">TIQ</span>
+                {withAdmin && (
+                    <span className={cn('ml-1.5 font-semibold opacity-70', s.admin)}>Admin</span>
+                )}
+            </p>
+        </div>
+    );
+};
+
+export default BrandWordmark;