| 1 | /** |
| 2 | * BrandWordmark - 布局区域复用的品牌字标 |
| 3 | */ |
| 4 | |
| 5 | import { cn } from '@/utils/className' |
| 6 | |
| 7 | export const BRAND_TITLE = 'AitoEarn' |
| 8 | |
| 9 | type BrandWordmarkTag = 'h1' | 'span' |
| 10 | type BrandWordmarkSize = 'sidebar' | 'mobile' |
| 11 | |
| 12 | export interface BrandWordmarkProps { |
| 13 | as?: BrandWordmarkTag |
| 14 | size?: BrandWordmarkSize |
| 15 | className?: string |
| 16 | } |
| 17 | |
| 18 | const WORDMARK_SIZE_CLASSNAME: Record<BrandWordmarkSize, string> = { |
| 19 | sidebar: 'text-[1.05rem] tracking-[-0.045em]', |
| 20 | mobile: 'text-base tracking-[-0.04em]', |
| 21 | } |
| 22 | |
| 23 | const ANCHOR_SIZE_CLASSNAME: Record<BrandWordmarkSize, string> = { |
| 24 | sidebar: 'text-[1.1em]', |
| 25 | mobile: 'text-[1.08em]', |
| 26 | } |
| 27 | |
| 28 | export function BrandWordmark({ |
| 29 | as = 'span', |
| 30 | size = 'sidebar', |
| 31 | className, |
| 32 | }: BrandWordmarkProps) { |
| 33 | const Component = as |
| 34 | |
| 35 | return ( |
| 36 | <Component |
| 37 | className={cn( |
| 38 | 'm-0 flex select-none items-baseline whitespace-nowrap font-semibold leading-none', |
| 39 | WORDMARK_SIZE_CLASSNAME[size], |
| 40 | className, |
| 41 | )} |
| 42 | aria-label={BRAND_TITLE} |
| 43 | > |
| 44 | <span |
| 45 | className={cn( |
| 46 | 'inline-block font-bold text-foreground transition-transform duration-300 group-hover/logo:-translate-y-px', |
| 47 | ANCHOR_SIZE_CLASSNAME[size], |
| 48 | )} |
| 49 | > |
| 50 | A |
| 51 | </span> |
| 52 | <span className="text-foreground/90">ito</span> |
| 53 | <span |
| 54 | className={cn( |
| 55 | 'inline-flex items-baseline bg-gradient-back bg-clip-text text-transparent transition-transform duration-300 group-hover/logo:translate-x-px', |
| 56 | )} |
| 57 | > |
| 58 | <span className={cn('inline-block font-bold', ANCHOR_SIZE_CLASSNAME[size])}>E</span> |
| 59 | <span>arn</span> |
| 60 | </span> |
| 61 | </Component> |
| 62 | ) |
| 63 | } |
| 64 |