Mathew
fa4bf546b4
Nouveau logo : console de jeu portable avec une coche sur l'écran, sur un badge dégradé indigo→teal (couleurs d'accent de l'app). - Composant réutilisable Logo.tsx (id de dégradé unique via useId) - public/logo.svg + favicon dans index.html - Remplace l'icône Gamepad2 dans la sidebar, le login et l'onboarding Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { useId } from 'react'
|
|
|
|
/**
|
|
* Logo de l'application : une console de jeu portable dont l'écran affiche
|
|
* une coche (« GameDev » + suivi/terminé), sur un badge dégradé indigo→teal.
|
|
*/
|
|
export default function Logo({
|
|
size = 32,
|
|
className
|
|
}: {
|
|
size?: number
|
|
className?: string
|
|
}): JSX.Element {
|
|
const id = useId()
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 48 48"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
role="img"
|
|
aria-label="GameDev Tracker"
|
|
>
|
|
<defs>
|
|
<linearGradient id={id} x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#6366F1" />
|
|
<stop offset="1" stopColor="#14B8A6" />
|
|
</linearGradient>
|
|
</defs>
|
|
{/* Badge */}
|
|
<rect width="48" height="48" rx="11" fill={`url(#${id})`} />
|
|
{/* Corps de la console */}
|
|
<rect x="12" y="12" width="24" height="24" rx="6" fill="#fff" />
|
|
{/* Écran + coche */}
|
|
<rect x="15.5" y="15.5" width="17" height="11" rx="2.5" fill="#4F46E5" />
|
|
<path
|
|
d="M18.6 21.2l2.6 2.6 6.4-6"
|
|
stroke="#fff"
|
|
strokeWidth="2.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
{/* Croix directionnelle */}
|
|
<rect x="16.9" y="28.6" width="2.2" height="6" rx="1.1" fill="#4F46E5" />
|
|
<rect x="15" y="30.5" width="6" height="2.2" rx="1.1" fill="#4F46E5" />
|
|
{/* Boutons d'action */}
|
|
<circle cx="29.4" cy="30" r="1.7" fill="#4F46E5" />
|
|
<circle cx="32.5" cy="32.3" r="1.7" fill="#0D9488" />
|
|
</svg>
|
|
)
|
|
}
|