Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.7 kB · 54 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455"use client";
import { useMemo } from "react";import { pickers, setColorAttribute } from "../ThemeSetter";import { ColorPicker } from "./ColorPicker";import { useReplicache } from "src/replicache";import { useColorAttribute } from "../useColorAttribute";
export const AccentPickers = (props: { entityID: string; openPicker: pickers; setOpenPicker: (thisPicker: pickers) => void;}) => { let { rep } = useReplicache(); let set = useMemo(() => { return setColorAttribute(rep, props.entityID); }, [rep, props.entityID]);
let accent1Value = useColorAttribute( props.entityID, "theme/accent-background", ); let accent2Value = useColorAttribute(props.entityID, "theme/accent-text");
return ( <> <div 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))]" style={{ backgroundColor: "rgba(var(--accent-1), 0.5)", }} > <ColorPicker label="Accent" value={accent1Value} setValue={set("theme/accent-background")} thisPicker={"accent-1"} openPicker={props.openPicker} setOpenPicker={props.setOpenPicker} closePicker={() => props.setOpenPicker("null")} /> <ColorPicker label="Text on Accent" value={accent2Value} setValue={set("theme/accent-text")} thisPicker={"accent-2"} openPicker={props.openPicker} setOpenPicker={props.setOpenPicker} closePicker={() => props.setOpenPicker("null")} /> </div> </> );};