88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
"use client";
|
|
import { useId } from "react";
|
|
|
|
type GearDef = {
|
|
id: string;
|
|
cx: number;
|
|
cy: number;
|
|
r: number;
|
|
hr: number;
|
|
tc: number;
|
|
tw: number;
|
|
th: number;
|
|
};
|
|
|
|
export default function Logo({ className = "" }: { className?: string }) {
|
|
const uid = useId();
|
|
const col = "#f97316";
|
|
|
|
// 4 gears in a horizontal chain, two pairs slightly offset vertically
|
|
// Connector nodes sit between gears
|
|
const gears: GearDef[] = [
|
|
// left-outer: small
|
|
{ id: "g1", cx: 28, cy: 50, r: 12, hr: 4, tc: 8, tw: 4.5, th: 4.5 },
|
|
// left-inner: large
|
|
{ id: "g2", cx: 68, cy: 50, r: 18, hr: 6, tc: 12, tw: 5.5, th: 5.5 },
|
|
// right-inner: large
|
|
{ id: "g3", cx: 112, cy: 50, r: 18, hr: 6, tc: 12, tw: 5.5, th: 5.5 },
|
|
// right-outer: small
|
|
{ id: "g4", cx: 152, cy: 50, r: 12, hr: 4, tc: 8, tw: 4.5, th: 4.5 },
|
|
];
|
|
|
|
// Connector nodes between gears
|
|
const nodes = [
|
|
{ cx: 48, cy: 50 }, // between g1 and g2
|
|
{ cx: 90, cy: 50 }, // between g2 and g3
|
|
{ cx: 132, cy: 50 }, // between g3 and g4
|
|
];
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 180 100"
|
|
className={className}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-label="MBO-Tech-IT Logo"
|
|
>
|
|
<defs>
|
|
{gears.map((g) => (
|
|
<mask key={g.id} id={`${uid}-${g.id}`}>
|
|
<rect width="200" height="200" fill="black" />
|
|
<circle cx={g.cx} cy={g.cy} r={g.r + g.th + 1} fill="white" />
|
|
<circle cx={g.cx} cy={g.cy} r={g.hr} fill="black" />
|
|
</mask>
|
|
))}
|
|
</defs>
|
|
|
|
{/* Gears */}
|
|
{gears.map((g) => {
|
|
const angles = Array.from({ length: g.tc }, (_, i) => (360 / g.tc) * i);
|
|
return (
|
|
<g key={g.id} mask={`url(#${uid}-${g.id})`}>
|
|
{angles.map((a) => (
|
|
<rect
|
|
key={a}
|
|
x={g.cx - g.tw / 2}
|
|
y={g.cy - g.r - g.th}
|
|
width={g.tw}
|
|
height={g.th + 1}
|
|
rx="0.8"
|
|
fill={col}
|
|
transform={`rotate(${a}, ${g.cx}, ${g.cy})`}
|
|
/>
|
|
))}
|
|
<circle cx={g.cx} cy={g.cy} r={g.r} fill={col} />
|
|
</g>
|
|
);
|
|
})}
|
|
|
|
{/* Connector nodes */}
|
|
{nodes.map(({ cx, cy }) => (
|
|
<g key={`n-${cx}`}>
|
|
<circle cx={cx} cy={cy} r={5} fill={col} />
|
|
<circle cx={cx} cy={cy} r={2.5} fill="white" fillOpacity="0.3" />
|
|
</g>
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|