Zimeng Xiong
156 lines
4.4 KiB
TypeScript
156 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
|
|
export const Logo: React.FC<{ className?: string }> = ({ className }) => {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 512 512"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
>
|
|
<defs>
|
|
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
|
|
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
|
|
<feComponentTransfer>
|
|
<feFuncA type="linear" slope="0.2"></feFuncA>
|
|
</feComponentTransfer>
|
|
<feMerge>
|
|
<feMergeNode></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
{/* Group: The Dashboard Grid (2x2) */}
|
|
<g
|
|
strokeWidth="32"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="stroke-[#2D3748] dark:stroke-[#E2E8F0]"
|
|
>
|
|
{/* Top Left: Bar Chart */}
|
|
<rect
|
|
x="40"
|
|
y="40"
|
|
width="200"
|
|
height="200"
|
|
rx="32"
|
|
strokeWidth="24"
|
|
className="fill-[#E6FFFA] dark:fill-[#134E4A]"
|
|
></rect>
|
|
<path
|
|
d="M100 180 V 140"
|
|
className="stroke-[#38B2AC] dark:stroke-[#2DD4BF]"
|
|
></path>
|
|
<path
|
|
d="M140 180 V 100"
|
|
className="stroke-[#38B2AC] dark:stroke-[#2DD4BF]"
|
|
></path>
|
|
<path
|
|
d="M180 180 V 160"
|
|
className="stroke-[#38B2AC] dark:stroke-[#2DD4BF]"
|
|
></path>
|
|
{/* Top Right: Pie Chart */}
|
|
<rect
|
|
x="272"
|
|
y="40"
|
|
width="200"
|
|
height="200"
|
|
rx="32"
|
|
strokeWidth="24"
|
|
className="fill-[#FFFAF0] dark:fill-[#7C2D12]"
|
|
></rect>
|
|
<circle
|
|
cx="372"
|
|
cy="140"
|
|
r="50"
|
|
strokeWidth="24"
|
|
className="stroke-[#DD6B20] dark:stroke-[#FB923C]"
|
|
></circle>
|
|
{/* Slice */}
|
|
<path
|
|
d="M372 140 L 405 105"
|
|
strokeWidth="12"
|
|
className="stroke-[#DD6B20] dark:stroke-[#FB923C]"
|
|
></path>
|
|
{/* Bottom Left: List/Text */}
|
|
<rect
|
|
x="40"
|
|
y="272"
|
|
width="200"
|
|
height="200"
|
|
rx="32"
|
|
strokeWidth="24"
|
|
className="fill-[#FAF5FF] dark:fill-[#581C87]"
|
|
></rect>
|
|
<line
|
|
x1="80"
|
|
y1="332"
|
|
x2="200"
|
|
y2="332"
|
|
className="stroke-[#805AD5] dark:stroke-[#A78BFA]"
|
|
></line>
|
|
<line
|
|
x1="80"
|
|
y1="372"
|
|
x2="160"
|
|
y2="372"
|
|
className="stroke-[#805AD5] dark:stroke-[#A78BFA]"
|
|
></line>
|
|
<line
|
|
x1="80"
|
|
y1="412"
|
|
x2="180"
|
|
y2="412"
|
|
className="stroke-[#805AD5] dark:stroke-[#A78BFA]"
|
|
></line>
|
|
{/* Bottom Right: The "Creation" Zone */}
|
|
{/* Dashed placeholder for the item being created */}
|
|
<rect
|
|
x="272"
|
|
y="272"
|
|
width="200"
|
|
height="200"
|
|
rx="32"
|
|
fill="none"
|
|
strokeWidth="24"
|
|
strokeDasharray="30 30"
|
|
className="stroke-[#E53E3E] dark:stroke-[#F87171]"
|
|
></rect>
|
|
</g>
|
|
{/* The Pencil (Floating over the bottom right) */}
|
|
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
|
|
{/* Body */}
|
|
<path
|
|
d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
|
|
strokeWidth="24"
|
|
strokeLinejoin="round"
|
|
className="fill-[#F6E05E] dark:fill-[#FACC15] stroke-[#2D3748] dark:stroke-[#E2E8F0]"
|
|
></path>
|
|
{/* Eraser */}
|
|
<path
|
|
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z"
|
|
strokeWidth="24"
|
|
strokeLinejoin="round"
|
|
className="fill-[#F687B3] dark:fill-[#F472B6] stroke-[#2D3748] dark:stroke-[#E2E8F0]"
|
|
></path>
|
|
{/* Collar */}
|
|
<rect
|
|
x="-25"
|
|
y="-100"
|
|
width="50"
|
|
height="30"
|
|
strokeWidth="24"
|
|
strokeLinejoin="round"
|
|
className="fill-[#CBD5E0] dark:fill-[#475569] stroke-[#2D3748] dark:stroke-[#E2E8F0]"
|
|
></rect>
|
|
{/* Tip Lead */}
|
|
<path
|
|
d="M-8 108 L0 120 L8 108 Z"
|
|
className="fill-[#2D3748] dark:fill-[#E2E8F0]"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
);
|
|
};
|