44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
export default function Logo({
|
|
size = 40,
|
|
variant = "dark",
|
|
}: {
|
|
size?: number;
|
|
variant?: "dark" | "light";
|
|
}) {
|
|
// A ring of stylised people around a warm sun — approximates the UP Parivaar mark.
|
|
const people = [
|
|
{ a: -90, c: "#2530C4" }, // top - navy/blue
|
|
{ a: -30, c: "#F7A400" }, // right upper - yellow
|
|
{ a: 30, c: "#FF8001" }, // right lower - orange
|
|
{ a: 90, c: "#F45700" }, // bottom - deep orange
|
|
{ a: 150, c: "#7ECA4F" }, // left lower - green
|
|
{ a: 210, c: "#3FB27A" }, // left upper - teal-green
|
|
];
|
|
|
|
return (
|
|
<span className="logo">
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden>
|
|
<circle cx="50" cy="50" r="17" fill="#fff" stroke="#F1E4D6" />
|
|
{people.map((p, i) => {
|
|
const rad = (p.a * Math.PI) / 180;
|
|
const cx = 50 + Math.cos(rad) * 31;
|
|
const cy = 50 + Math.sin(rad) * 31;
|
|
return (
|
|
<g key={i} transform={`rotate(${p.a + 90} ${cx} ${cy})`}>
|
|
<circle cx={cx} cy={cy - 8} r="6.4" fill={p.c} />
|
|
<path
|
|
d={`M ${cx - 9} ${cy + 12} Q ${cx} ${cy - 3} ${cx + 9} ${cy + 12} Z`}
|
|
fill={p.c}
|
|
/>
|
|
</g>
|
|
);
|
|
})}
|
|
</svg>
|
|
<span className="logo__text">
|
|
<span className={`logo__title logo__title--${variant}`}>UP PARIVAAR</span>
|
|
<span className={`logo__sub logo__sub--${variant}`}>DALLAS</span>
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|