spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/theme-color-picker.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import { Palette, Check } from "lucide-react";18import { Button } from "@/components/ui/button";19import {20  DropdownMenu,21  DropdownMenuContent,22  DropdownMenuItem,23  DropdownMenuTrigger,24} from "@/components/ui/dropdown-menu";25import { useTheme, type ThemeColor } from "./theme-provider";2627const colorOptions: { value: ThemeColor; label: string; color: string }[] = [28  { value: "blue", label: "Bleu", color: "hsl(210, 100%, 50%)" },29  { value: "green", label: "Vert", color: "hsl(142, 76%, 45%)" },30  { value: "purple", label: "Violet", color: "hsl(255, 85%, 62%)" },31  { value: "red", label: "Rouge", color: "hsl(0, 84%, 60%)" },32  { value: "orange", label: "Orange", color: "hsl(14, 100%, 55%)" },33  { value: "cyan", label: "Cyan", color: "hsl(199, 89%, 55%)" },34];3536export function ThemeColorPicker() {37  const { themeColor, setThemeColor } = useTheme();3839  const handleColorChange = (color: ThemeColor) => {40    try {41      setThemeColor(color);42    } catch (error) {43      console.error("Failed to set theme color:", error);44    }45  };4647  return (48    <DropdownMenu modal={false}>49      <DropdownMenuTrigger asChild>50        <Button51          variant="ghost"52          size="icon"53          data-testid="button-theme-color"54          className="hover-elevate active-elevate-2 rounded-2xl hover:bg-primary/10 transition-all duration-300"55        >56          <Palette className="h-5 w-5" />57          <span className="sr-only">Choisir la couleur du thème</span>58        </Button>59      </DropdownMenuTrigger>60      <DropdownMenuContent align="end" className="w-48" sideOffset={5}>61        {colorOptions.map((option) => (62          <DropdownMenuItem63            key={option.value}64            onClick={() => handleColorChange(option.value)}65            className="flex items-center gap-3 cursor-pointer"66          >67            <div68              className="w-5 h-5 rounded-full border-2 border-border"69              style={{ backgroundColor: option.color }}70            />71            <span className="flex-1">{option.label}</span>72            {themeColor === option.value && (73              <Check className="w-4 h-4 text-primary" />74            )}75          </DropdownMenuItem>76        ))}77      </DropdownMenuContent>78    </DropdownMenu>79  );80}81