56 lines
1.6 KiB
React
56 lines
1.6 KiB
React
|
import { Button } from "@douyinfe/semi-ui";
|
||
|
|
import { IconCheckboxTick } from "@douyinfe/semi-icons";
|
||
|
|
import { tableThemes } from "../data/constants";
|
||
|
|
|
||
|
|
export default function ColorPallete({
|
||
|
|
currentColor,
|
||
|
|
onClearColor,
|
||
|
|
onPickColor,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="flex justify-between items-center p-2">
|
||
|
|
<div className="font-medium">Theme</div>
|
||
|
|
<Button type="tertiary" size="small" onClick={onClearColor}>
|
||
|
|
Clear
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div className="py-3 space-y-3">
|
||
|
|
<div>
|
||
|
|
{tableThemes.slice(0, Math.ceil(tableThemes.length / 2)).map((c) => (
|
||
|
|
<button
|
||
|
|
key={c}
|
||
|
|
style={{ backgroundColor: c }}
|
||
|
|
className="p-3 rounded-full mx-1"
|
||
|
|
onClick={() => onPickColor(c)}
|
||
|
|
>
|
||
|
|
{currentColor === c ? (
|
||
|
|
<IconCheckboxTick style={{ color: "white" }} />
|
||
|
|
) : (
|
||
|
|
<IconCheckboxTick style={{ color: c }} />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{tableThemes.slice(Math.ceil(tableThemes.length / 2)).map((c) => (
|
||
|
|
<button
|
||
|
|
key={c}
|
||
|
|
style={{ backgroundColor: c }}
|
||
|
|
className="p-3 rounded-full mx-1"
|
||
|
|
onClick={() => onPickColor(c)}
|
||
|
|
>
|
||
|
|
<IconCheckboxTick
|
||
|
|
style={{
|
||
|
|
color: currentColor === c ? "white" : c,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|