janpeter visser
ffda65490f
- Product aanmaken/bewerken/archiveren/herstellen (ST-101, ST-103) - SplitPane component met versleepbare splitter en localStorage (ST-104) - PanelNavBar herbruikbaar paneelheader component (ST-105) - PbiList met prioriteitsgroepen, inline aanmaken, filter en verwijderen (ST-106-ST-110) - StoryPanel placeholder rechter paneel met selectie via Zustand (ST-109) - App iconen geinstalleerd: favicon, apple-icon, PWA manifest (192/512px) - AppIcon SVG component in navigatiebar - Root layout metadata bijgewerkt naar Nederlands Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
// components/shared/app-icon.tsx
|
|
// Scrum4Me app icon — concept 5 (Rocket)
|
|
// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />
|
|
|
|
interface AppIconProps {
|
|
size?: number
|
|
className?: string
|
|
}
|
|
|
|
export function AppIcon({ size = 32, className }: AppIconProps) {
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 512 512"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
aria-label="Scrum4Me"
|
|
>
|
|
<defs>
|
|
<linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#1a1028"/>
|
|
<stop offset="100%" stopColor="#0d0a14"/>
|
|
</linearGradient>
|
|
<linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stopColor="#c4b5fd"/>
|
|
<stop offset="100%" stopColor="#7c3aed"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* Background */}
|
|
<rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
|
|
|
|
{/* Block 1 — PBI */}
|
|
<rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
|
|
|
|
{/* Block 2 — Story */}
|
|
<rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
|
|
|
|
{/* Block 3 — Task */}
|
|
<rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
|
|
|
|
{/* Rocket nose */}
|
|
<path
|
|
d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
|
|
fill="url(#s4m-nose)"
|
|
/>
|
|
|
|
{/* Window */}
|
|
<circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
|
|
<circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
|
|
<circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>
|
|
|
|
{/* Fins */}
|
|
<path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
|
<path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
|
|
|
{/* Flame */}
|
|
<path
|
|
d="M212 432 Q244 472 256 456 Q268 472 300 432"
|
|
stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
|
|
/>
|
|
<path
|
|
d="M232 432 Q248 460 256 448 Q264 460 280 432"
|
|
stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|