Add more settings

src/components/form/Select.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+type DefaultSelectProps = JSX.IntrinsicElements['select'];
+
+export interface SelectProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+  label: string;
+}
+
+export const Select = React.forwardRef<
+  HTMLSelectElement,
+  SelectProps & DefaultSelectProps
+>(function Select(
+  { options, label, id, ...props }: SelectProps & DefaultSelectProps,
+  ref,
+) {
+  return (
+    <div className="space-y-1">
+      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+        {label}
+      </label>
+      <select
+        ref={ref}
+        {...props}
+        className="block w-full p-2 border dark:border-gray-600 rounded-md shadow-sm dark:bg-secondaryDark"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+});