gbclient/app/settings/appearance/appearance-form.tsx

"use client";

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const appearanceFormSchema = z.object({
  theme: z.enum(['light', 'dark'], {
    required_error: 'Please select a theme.',
  }),
  font: z.enum(['inter', 'manrope', 'system'], {
    invalid_type_error: 'Select a font',
    required_error: 'Please select a font.',
  }),
});

type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;

const defaultValues: Partial<AppearanceFormValues> = {
  theme: 'light',
};

export function AppearanceForm() {
  const { control, handleSubmit } = useForm<AppearanceFormValues>({
    resolver: zodResolver(appearanceFormSchema),
    defaultValues,
  });

  const onSubmit = (data: AppearanceFormValues) => {
    console.log(JSON.stringify(data, null, 2));
  };

  return (
    <div className="space-y-4">
      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">Font</label>
        <Controller
          control={control}
          name="font"
          render={({ field: { onChange, value } }) => (
            <select
              className="w-full p-2 border rounded"
              value={value}
              onChange={(e) => onChange(e.target.value)}
            >
              <option value="inter">Inter</option>
              <option value="manrope">Manrope</option>
              <option value="system">System</option>
            </select>
          )}
        />
        <p className="text-sm text-gray-500">
          Set the font you want to use in the dashboard.
        </p>
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">Theme</label>
        <p className="text-sm text-gray-500 mb-2">
          Select the theme for the dashboard.
        </p>
        <Controller
          control={control}
          name="theme"
          render={({ field: { onChange, value } }) => (
            <div className="flex space-x-4">
              <button
                type="button"
                className={`px-4 py-2 rounded ${value === 'light' ? 'bg-gray-200' : 'bg-white'}`}
                onClick={() => onChange('light')}
              >
                Light
              </button>
              <button
                type="button"
                className={`px-4 py-2 rounded ${value === 'dark' ? 'bg-gray-200' : 'bg-white'}`}
                onClick={() => onChange('dark')}
              >
                Dark
              </button>
            </div>
          )}
        />
      </div>

      <button
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        onClick={handleSubmit(onSubmit)}
      >
        Update preferences
      </button>
    </div>
  );
}