an app to share curated trails
sidetrail.app
1"use client";
2
3import { useState } from "react";
4import "./TrailColorPicker.css";
5import { COLOR_PRESETS } from "@/data/colors";
6
7interface TrailColorPickerProps {
8 currentAccentColor: string;
9 onColorChange: (accent: string, background: string) => void;
10}
11
12export function TrailColorPicker({ currentAccentColor, onColorChange }: TrailColorPickerProps) {
13 const [isOpen, setIsOpen] = useState(false);
14
15 return (
16 <>
17 <button
18 onClick={() => setIsOpen(!isOpen)}
19 className="TrailColorPicker-button"
20 style={{ background: currentAccentColor }}
21 title="change colors"
22 />
23 {isOpen && (
24 <div className="TrailColorPicker-popup">
25 <div className="TrailColorPicker-grid">
26 {COLOR_PRESETS.map((preset, index) => (
27 <button
28 key={index}
29 className={`TrailColorPicker-option ${currentAccentColor === preset.accent ? "TrailColorPicker-option--active" : ""}`}
30 style={{ background: preset.accent }}
31 onClick={() => {
32 onColorChange(preset.accent, preset.background);
33 setIsOpen(false);
34 }}
35 title={`Color ${index + 1}`}
36 />
37 ))}
38 </div>
39 </div>
40 )}
41 </>
42 );
43}