38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
interface ThemeLabelProps {
|
|
variant: "light" | "dark" | "system";
|
|
value?: "light" | "dark" | null;
|
|
label: string;
|
|
defaultChecked?: boolean;
|
|
register: any;
|
|
fieldName?: string;
|
|
}
|
|
|
|
export default function ThemeLabel(props: ThemeLabelProps) {
|
|
const { variant, label, value, defaultChecked, register, fieldName = "theme" } = props;
|
|
|
|
return (
|
|
<label
|
|
className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mb-0 sm:mr-4"
|
|
htmlFor={`${fieldName}-${variant}`}
|
|
data-testid={`${fieldName}-${variant}`}>
|
|
<input
|
|
className="peer absolute left-8 top-8"
|
|
type="radio"
|
|
value={value}
|
|
id={`${fieldName}-${variant}`}
|
|
defaultChecked={defaultChecked}
|
|
{...register(fieldName)}
|
|
/>
|
|
<div className="ring-inverted relative z-10 rounded-lg ring-offset-2 transition-all peer-checked:ring-2">
|
|
<img
|
|
aria-hidden="true"
|
|
className="cover w-full rounded-lg"
|
|
src={`/theme-${variant}.svg`}
|
|
alt={`theme ${variant}`}
|
|
/>
|
|
</div>
|
|
<p className="peer-checked:text-emphasis text-default mt-2 text-sm font-medium">{label}</p>
|
|
</label>
|
|
);
|
|
}
|