forked from Tadrisino/MathApp_frontend
32 lines
1.8 KiB
TypeScript
32 lines
1.8 KiB
TypeScript
import { useId } from 'react';
|
||
import { useCompanion } from '@/state/companion';
|
||
|
||
/**
|
||
* نشانِ تدریسینو: یک کاشیِ گرد با نمادِ همراهِ انتخابیِ کاربر (Σ، Δ، π، ω) به رنگِ همان همراه، و جرقهی کوچکِ
|
||
* چشمکزن، کنارِ نامِ تدریسینو. پیشتر همیشه «π»ِ نارنجی بود و با همراهِ کاربر جور نبود (خواستِ مالک، ۱۴۰۵-۰۷).
|
||
* خودِ SVG است (بیفایلِ تصویر).
|
||
*/
|
||
export function BrandMark({ size = 28, tone = 'light', withName = true }: { size?: number; tone?: 'light' | 'dark'; withName?: boolean }) {
|
||
const ink = tone === 'light' ? '#fff' : '#3C3F8F';
|
||
const c = useCompanion();
|
||
const gid = useId();
|
||
return (
|
||
<span className="inline-flex items-center gap-1.5" aria-label="تدریسینو ریاضی">
|
||
<svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
|
||
<defs>
|
||
<linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stopColor={c.light} />
|
||
<stop offset="1" stopColor={c.color} />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="1" y="1" width="30" height="30" rx="9" fill={`url(#${gid})`} stroke={tone === 'light' ? 'rgba(255,255,255,.55)' : 'none'} />
|
||
<text x="16" y="17" textAnchor="middle" dominantBaseline="central" fill="#fff" fontSize="19" fontWeight="900" fontFamily="Vazirmatn, system-ui, sans-serif">
|
||
{c.symbol}
|
||
</text>
|
||
<path className="spark" d="M25 4.5l.9 1.9 1.9.9-1.9.9-.9 1.9-.9-1.9-1.9-.9 1.9-.9z" fill="#FFD23F" />
|
||
</svg>
|
||
{withName && <span className="font-black tracking-tight" style={{ color: ink, fontSize: size * 0.62 }}>تدریسینو ریاضی</span>}
|
||
</span>
|
||
);
|
||
}
|