feat: fix responsive layout, add theme switcher

src/components/ui/select.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { ComponentPropsWithoutRef } from "react";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
 import BaseSelect from "react-select";
 import Creatable from "react-select/creatable";
 
@@ -8,11 +8,12 @@ type Props = ComponentPropsWithoutRef<typeof BaseSelect> & {
   onCreateOption?: (inputValue: string) => void;
 };
 
-const Select = ({ creatable, ...props }: Props) => {
+const Select = forwardRef<any, Props>(({ creatable, ...props }, ref) => {
   const Comp = creatable ? Creatable : BaseSelect;
 
   return (
     <Comp
+      ref={ref}
       unstyled
       classNames={{
         control: (p) =>
@@ -42,6 +43,6 @@ const Select = ({ creatable, ...props }: Props) => {
       {...props}
     />
   );
-};
+});
 
 export default Select;

src/components/ui/toggle.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from "react";
+import { Toggle as BaseToggle } from "react-daisyui";
+import FormControl from "./form-control";
+import { FieldValues } from "react-hook-form";
+
+type ToggleProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggle>,
+  "form"
+> & { label?: string };
+
+const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+  ({ label, ...props }, ref) => {
+    return (
+      <label className="inline-flex justify-start label label-text gap-2 cursor-pointer">
+        <BaseToggle ref={ref} {...props} />
+        {label}
+      </label>
+    );
+  }
+);
+
+type ToggleFieldProps<T extends FieldValues> = Omit<
+  React.ComponentPropsWithoutRef<typeof FormControl<T>>,
+  "render"
+> &
+  ToggleProps & {
+    inputClassName?: string;
+  };
+
+export const ToggleField = <T extends FieldValues>({
+  form,
+  name,
+  title,
+  className,
+  inputClassName,
+  ...props
+}: ToggleFieldProps<T>) => {
+  return (
+    <FormControl
+      form={form}
+      name={name}
+      title={title}
+      className={className}
+      render={(field) => (
+        <Toggle {...props} {...field} className={inputClassName} />
+      )}
+    />
+  );
+};
+
+export default Toggle;