feat(3165): add label and select generic components

app/components/generic/Label.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import classNames from 'classnames';
+import React from 'react';
+
+export default function Label({
+  children,
+  htmlFor,
+  className = '',
+  required = false,
+}: {
+  children: React.ReactNode;
+  htmlFor: string;
+  className?: string;
+  required?: boolean;
+}) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={classNames('block text-sm font-medium leading-6 text-gray-900 mb--1', className)}
+    >
+      {children}
+      {required && <span className="text-red-500">*</span>}
+    </label>
+  );
+}

app/components/generic/select/FormMultiSelect.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { MultiSelect, ComboboxData } from '@mantine/core';
+import classnames from 'classnames';
+import _kebabCase from 'lodash-es/kebabCase';
+import { FocusEventHandler } from 'react';
+import Label from '../Label';
+
+export interface FormMultiSelectProps {
+  id?: string;
+  name: string;
+  label?: string;
+  data: ComboboxData;
+  onChange: (value: string[]) => void;
+  onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+  value: string[];
+  disabled?: boolean;
+  classNames?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+export default function FormMultiSelect({
+  id,
+  name,
+  label,
+  classNames,
+  data,
+  onChange,
+  onBlur,
+  value,
+  disabled = false,
+}: FormMultiSelectProps) {
+  if (!id) id = _kebabCase(name);
+
+  return (
+    <div className={classNames?.wrapper}>
+      {label && (
+        <Label htmlFor={id} className={classNames?.label}>
+          {label}
+        </Label>
+      )}
+
+      <MultiSelect
+        placeholder="select..."
+        data={data}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        searchable
+        disabled={disabled}
+        classNames={{ input: classnames('text-md', classNames?.input) }}
+      />
+    </div>
+  );
+}

app/components/generic/select/FormSingleSelect.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Select, ComboboxData, ComboboxItem } from '@mantine/core';
+import classnames from 'classnames';
+import _kebabCase from 'lodash-es/kebabCase';
+import { FocusEventHandler } from 'react';
+import Label from '../Label';
+
+export interface FormSingleSelectProps {
+  id?: string;
+  name: string;
+  label?: string;
+  data: ComboboxData;
+  onChange: (value: string, option: ComboboxItem) => void;
+  onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+  value: string;
+  disabled?: boolean;
+  classNames?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+export default function FormSingleSelect({
+  id,
+  name,
+  label,
+  classNames,
+  data,
+  onChange,
+  onBlur,
+  value,
+  disabled = false,
+}: FormSingleSelectProps) {
+  if (!id) id = _kebabCase(name);
+
+  return (
+    <div className={classNames?.wrapper}>
+      {label && (
+        <Label htmlFor={id} className={classNames?.label}>
+          {label}
+        </Label>
+      )}
+
+      <Select
+        placeholder="select..."
+        data={data}
+        onChange={(val, option) => {
+          if (val) onChange(val, option);
+        }}
+        onBlur={onBlur}
+        value={value}
+        searchable
+        disabled={disabled}
+        classNames={{ input: classnames('text-md', classNames?.input) }}
+      />
+    </div>
+  );
+}