refactor: remove Select component from UI library

app/components/ui/combobox.tsx

@@ -26,7 +26,7 @@ type TComboboxOption = {
   id: string
 }
 
-type TInputProperties<T extends FieldValues> = ComponentProps<
+type TComboboxProperties<T extends FieldValues> = ComponentProps<
   typeof HeadlessCombobox
 > & {
   id: string
@@ -40,7 +40,7 @@ type TInputProperties<T extends FieldValues> = ComponentProps<
 }
 
 export const Combobox = <TFormValues extends Record<string, unknown>>(
-  properties: TInputProperties<TFormValues>,
+  properties: TComboboxProperties<TFormValues>,
 ) => {
   const {
     id,

app/components/ui/select.tsx

@@ -1,67 +0,0 @@
-import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
-import { type ComponentProps, type ReactNode } from 'react'
-import {
-  get,
-  type FieldError,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-} from 'react-hook-form'
-import { useRemixFormContext } from 'remix-hook-form'
-
-type TInputProperties<T extends FieldValues> = Omit<
-  ComponentProps<'select'>,
-  'size'
-> & {
-  id: string
-  label?: ReactNode
-  name: Path<T>
-  rules?: RegisterOptions
-  placeholder?: string
-  options?: {
-    code: string
-    name: string
-    id: string
-  }[]
-}
-
-export const Select = <TFormValues extends Record<string, unknown>>(
-  properties: TInputProperties<TFormValues>,
-) => {
-  const { id, label, name, rules, disabled, placeholder, options, ...rest } =
-    properties
-
-  const {
-    register,
-    formState: { errors },
-  } = useRemixFormContext()
-
-  const error: FieldError = get(errors, name)
-
-  return (
-    <Field
-      className="relative"
-      disabled={disabled}
-      id={id}
-    >
-      <Label className="mb-1 block text-gray-700">
-        {label} {error && <span className="text-red-500">{error.message}</span>}
-      </Label>
-      <HeadlessSelect
-        className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
-        {...register(name, rules)}
-        {...rest}
-      >
-        <option value="">{placeholder}</option>
-        {options?.map(({ id, name }) => (
-          <option
-            key={id}
-            value={id}
-          >
-            {name}
-          </option>
-        ))}
-      </HeadlessSelect>
-    </Field>
-  )
-}

app/components/ui/switch.tsx

@@ -0,0 +1,80 @@
+import { Field, Label, Switch as HeadlessSwitch } from '@headlessui/react'
+import { type ReactNode } from 'react'
+import {
+  Controller,
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TSwitchProperties<T extends FieldValues> = {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  className?: string
+  inputClassName?: string
+}
+
+export const Switch = <TFormValues extends Record<string, unknown>>(
+  properties: TSwitchProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    containerClassName,
+    labelClassName,
+    className,
+    inputClassName,
+  } = properties
+
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <div className={twMerge('flex items-center', inputClassName)}>
+            <HeadlessSwitch
+              checked={field.value}
+              onChange={(checked) => {
+                field.onChange(checked)
+              }}
+              className={twMerge(
+                'group relative flex h-7 w-14 cursor-pointer rounded-full bg-black/10 p-1 shadow transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-black/10 data-[focus]:outline-1 data-[focus]:outline-white',
+                className,
+              )}
+            >
+              <span
+                aria-hidden="true"
+                className="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-7"
+              />
+            </HeadlessSwitch>
+          </div>
+        )}
+      />
+    </Field>
+  )
+}

app/pages/contents-create/index.tsx

@@ -9,6 +9,7 @@ import { TextEditor } from '~/components/text-editor'
 import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
+import { Switch } from '~/components/ui/switch'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -67,6 +68,15 @@ export const CreateContentsPage = () => {
     mode: 'onSubmit',
     fetcher,
     resolver: zodResolver(contentSchema),
+    defaultValues: {
+      categories: [],
+      tags: [],
+      title: '',
+      content: '',
+      featured_image: '',
+      is_premium: false,
+      live_at: '',
+    },
   })
 
   const { handleSubmit, control, watch } = formMethods
@@ -167,6 +177,13 @@ export const CreateContentsPage = () => {
               className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
               labelClassName="text-sm font-medium text-[#363636]"
             />
+            <Switch
+              id="is_premium"
+              name="is_premium"
+              label="Premium"
+              labelClassName="text-sm font-medium text-[#363636]"
+              inputClassName="h-[42px]"
+            />
           </div>
 
           <TextEditor