ChamberLight.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. interface ChamberLightProps {
  2. on: boolean;
  3. className?: string;
  4. }
  5. /**
  6. * Chamber light icon with on/off states.
  7. * Modern bulb design with radiating rays.
  8. * - On: Filled yellow bulb with visible rays
  9. * - Off: Outline only, muted color
  10. */
  11. export function ChamberLight({ on, className = "w-5 h-5" }: ChamberLightProps) {
  12. const bulbFill = on ? "#facc15" : "none"; // yellow-400 when on
  13. const strokeColor = on ? "#78350f" : "currentColor"; // amber-900 when on
  14. const rayOpacity = on ? 1 : 0;
  15. return (
  16. <svg
  17. viewBox="0 0 32 32"
  18. fill="none"
  19. strokeWidth="2"
  20. strokeLinecap="round"
  21. strokeLinejoin="round"
  22. className={className}
  23. >
  24. {/* Radiating rays */}
  25. <g stroke={strokeColor} opacity={rayOpacity}>
  26. <line x1="16" y1="2" x2="16" y2="6" />
  27. <line x1="6.1" y1="6.1" x2="8.9" y2="8.9" />
  28. <line x1="25.9" y1="6.1" x2="23.1" y2="8.9" />
  29. <line x1="2" y1="16" x2="6" y2="16" />
  30. <line x1="30" y1="16" x2="26" y2="16" />
  31. </g>
  32. {/* Bulb glass - smooth rounded shape */}
  33. <path
  34. d="M12 24v-2.3c0-.9-.4-1.7-1-2.3C9.2 17.6 8 15.4 8 13c0-4.4 3.6-8 8-8s8 3.6 8 8c0 2.4-1.2 4.6-3 6.4-.6.6-1 1.4-1 2.3V24"
  35. fill={bulbFill}
  36. stroke={strokeColor}
  37. />
  38. {/* Base rings */}
  39. <path d="M12 24h8" stroke={strokeColor} />
  40. <path d="M12 27h8" stroke={strokeColor} />
  41. <path d="M13 30h6" stroke={strokeColor} />
  42. </svg>
  43. );
  44. }