redesign the homepage

homepage/src/components/forms/ChoiceControls.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { classNames } from '@/lib/components/classNames';
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import styles from './ChoiceControls.module.css';
+
+interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: ReactNode;
+  description?: ReactNode;
+  invalid?: boolean;
+}
+
+function Choice({
+  label,
+  description,
+  invalid = false,
+  className,
+  type,
+  ...props
+}: ChoiceProps & { type: 'checkbox' | 'radio' }) {
+  return (
+    <label className={classNames(styles.choice, invalid && styles.invalid, className)}>
+      <input type={type} aria-invalid={invalid || undefined} {...props} />
+      <span className={styles.content}>
+        <span className={styles.label}>{label}</span>
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </span>
+    </label>
+  );
+}
+
+export function Checkbox(props: ChoiceProps) {
+  return <Choice type="checkbox" {...props} />;
+}
+
+export function Radio(props: ChoiceProps) {
+  return <Choice type="radio" {...props} />;
+}
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+export function Switch({ label, description, className, ...props }: SwitchProps) {
+  return (
+    <label className={classNames(styles.choice, className)}>
+      <input type="checkbox" role="switch" className={styles.switchInput} {...props} />
+      <span aria-hidden="true" className={styles.switchTrack}>
+        <span />
+      </span>
+      <span className={styles.content}>
+        <span className={styles.label}>{label}</span>
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </span>
+    </label>
+  );
+}