a tool for shared writing and social publishing
leaflet.pub
1"use client";
2
3import { useMemo } from "react";
4import { pickers, setColorAttribute } from "../ThemeSetter";
5import { ColorPicker } from "./ColorPicker";
6import { useReplicache } from "src/replicache";
7import { useColorAttribute } from "../useColorAttribute";
8
9export const AccentPickers = (props: {
10 entityID: string;
11 openPicker: pickers;
12 setOpenPicker: (thisPicker: pickers) => void;
13}) => {
14 let { rep } = useReplicache();
15 let set = useMemo(() => {
16 return setColorAttribute(rep, props.entityID);
17 }, [rep, props.entityID]);
18
19 let accent1Value = useColorAttribute(
20 props.entityID,
21 "theme/accent-background",
22 );
23 let accent2Value = useColorAttribute(props.entityID, "theme/accent-text");
24
25 return (
26 <>
27 <div
28 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))]"
29 style={{
30 backgroundColor: "rgba(var(--accent-1), 0.5)",
31 }}
32 >
33 <ColorPicker
34 label="Accent"
35 value={accent1Value}
36 setValue={set("theme/accent-background")}
37 thisPicker={"accent-1"}
38 openPicker={props.openPicker}
39 setOpenPicker={props.setOpenPicker}
40 closePicker={() => props.setOpenPicker("null")}
41 />
42 <ColorPicker
43 label="Text on Accent"
44 value={accent2Value}
45 setValue={set("theme/accent-text")}
46 thisPicker={"accent-2"}
47 openPicker={props.openPicker}
48 setOpenPicker={props.setOpenPicker}
49 closePicker={() => props.setOpenPicker("null")}
50 />
51 </div>
52 </>
53 );
54};