-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathSelectColorChip.tsx
More file actions
56 lines (48 loc) · 1.9 KB
/
SelectColorChip.tsx
File metadata and controls
56 lines (48 loc) · 1.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import ColorChip from "@/components/chip/ColorChip";
import { CreateDashboard } from "@/zodSchema/dashboardSchema";
import { FieldValues, UseFormRegister, UseFormWatch } from "react-hook-form";
import { FaCheck } from "react-icons/fa6";
interface Props {
register: UseFormRegister<FieldValues>;
watch: UseFormWatch<FieldValues>;
}
interface SelectColorChipProps {
register: UseFormRegister<CreateDashboard>;
watch: UseFormWatch<CreateDashboard>;
}
const COLORS = [
{ value: "bg-green01", label: "Green", color: "#7AC555" },
{ value: "bg-purple01", label: "Purple", color: "#760DDE" },
{ value: "bg-orange01", label: "Orange", color: "#FFA500" },
{ value: "bg-blue01", label: "Blue", color: "#76A6EA" },
{ value: "bg-pink01", label: "Pink", color: "#E876EA" },
];
const SelectColorChip = ({ register, watch }: Props) => {
const selectedColor = watch("color");
return (
<div className="flex gap-2">
{COLORS.map((item) => (
<label key={item.label} className="relative">
<ColorChip color={item.value} />
{selectedColor === item.color && <FaCheck className="absolute left-[3px] top-[3px] size-6 text-white" />}
<input type="radio" {...register("color", { required: true })} value={item.color} className="hidden" />
</label>
))}
</div>
);
};
export const SelectColorChipByCreate = ({ register, watch }: SelectColorChipProps) => {
const selectedColor = watch("color");
return (
<div className="flex gap-2">
{COLORS.map((item) => (
<label key={item.label} className="relative">
<ColorChip color={item.value} />
{selectedColor === item.color && <FaCheck className="absolute left-[3px] top-[3px] size-6 text-white" />}
<input type="radio" {...register("color", { required: true })} value={item.color} className="hidden" />
</label>
))}
</div>
);
};
export default SelectColorChip;