leaflet.pub
a tool for shared writing and social publishing
awarm.space
1import { pickers } from "../ThemeSetter";
2import { Color } from "react-aria-components";
3import { ColorPicker } from "../Pickers/ColorPicker";
4
5export const PubAccentPickers = (props: {
6 accent1: Color;
7 accent2: Color;
8 setAccent1: (color: Color) => void;
9 setAccent2: (color: Color) => void;
10 openPicker: pickers;
11 setOpenPicker: (thisPicker: pickers) => void;
12}) => {
13 return (
14 <>
15 <div
16 className="themeLeafletControls text-accent-2 flex flex-col gap-2 h-full bg-bg-leaflet p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent-1))]"
17 style={{
18 backgroundColor: "rgba(var(--accent-1), 0.5)",
19 }}
20 >
21 <ColorPicker
22 label="Accent"
23 value={props.accent1}
24 setValue={props.setAccent1}
25 thisPicker={"accent-1"}
26 openPicker={props.openPicker}
27 setOpenPicker={props.setOpenPicker}
28 closePicker={() => props.setOpenPicker("null")}
29 />
30 <ColorPicker
31 label="Text on Accent"
32 value={props.accent2}
33 setValue={props.setAccent2}
34 thisPicker={"accent-2"}
35 openPicker={props.openPicker}
36 setOpenPicker={props.setOpenPicker}
37 closePicker={() => props.setOpenPicker("null")}
38 />
39 </div>
40 </>
41 );
42};