a tool for shared writing and social publishing
leaflet.pub
1import { pickers } from "../ThemeSetter";
2import { TextPickers } from "../Pickers/PageThemePickers";
3import { Color } from "react-aria-components";
4
5export const PagePickers = (props: {
6 primary: Color;
7 pageBackground: Color;
8 setPrimary: (color: Color) => void;
9 setPageBackground: (color: Color) => void;
10 openPicker: pickers;
11 setOpenPicker: (thisPicker: pickers) => void;
12 hasPageBackground: boolean;
13}) => {
14 return (
15 <div
16 className="themeLeafletControls text-primary flex flex-col gap-2 h-full bg-bg-page p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]"
17 style={{
18 backgroundColor: props.hasPageBackground
19 ? "rgba(var(--bg-page), var(--bg-page-alpha))"
20 : "transparent",
21 }}
22 >
23 <TextPickers
24 value={props.primary}
25 setValue={props.setPrimary}
26 openPicker={props.openPicker}
27 setOpenPicker={props.setOpenPicker}
28 />
29 {/* FONT PICKERS HIDDEN FOR NOW */}
30 {/* <hr className="border-border-light" />
31 <div className="flex gap-2">
32 <div className="w-6 h-6 font-bold text-center rounded-md bg-border-light">
33 Aa
34 </div>
35 <div className="font-bold">Header</div> <div>iA Writer</div>
36 </div>
37 <div className="flex gap-2">
38 <div className="w-6 h-6 place-items-center text-center rounded-md bg-border-light">
39 Aa
40 </div>{" "}
41 <div className="font-bold">Body</div> <div>iA Writer</div>
42 </div> */}
43 </div>
44 );
45};