added chron to hub server, removed starterEvent

apps/hub/app/_components/ui/Select.tsx

@@ -1,62 +1,103 @@
-'use client';
+"use client";
 import {
-  FieldValues,
-  Path,
-  RegisterOptions,
-  UseFormReturn,
-} from 'react-hook-form';
-import SelectTemplate, { Props as SelectTemplateProps } from 'react-select';
-import { cn } from '../../../helper/cn';
-import dynamic from 'next/dynamic';
+	FieldValues,
+	Path,
+	RegisterOptions,
+	UseFormReturn,
+} from "react-hook-form";
+import SelectTemplate, {
+	Props as SelectTemplateProps,
+	StylesConfig,
+} from "react-select";
+import { cn } from "../../../helper/cn";
+import dynamic from "next/dynamic";
 
 interface SelectProps<T extends FieldValues> {
-  name: Path<T>;
-  form: UseFormReturn<T>;
-  formOptions?: RegisterOptions<T>;
-  label?: string;
-  placeholder?: string;
-  className?: string;
+	name: Path<T>;
+	form: UseFormReturn<T>;
+	formOptions?: RegisterOptions<T>;
+	label?: string;
+	placeholder?: string;
+	className?: string;
 }
 
+const customStyles: StylesConfig<any, false> = {
+	control: (provided) => ({
+		...provided,
+		backgroundColor: "var(--color-base-100)",
+		borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
+		borderRadius: "0.5rem",
+		padding: "0.25rem",
+		boxShadow: "none",
+		"&:hover": {
+			borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
+		},
+	}),
+	option: (provided, state) => ({
+		...provided,
+		backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
+		color: "var(--color-primary-content)",
+		"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
+	}),
+	multiValueLabel: (provided) => ({
+		...provided,
+		color: "var(--color-primary-content)",
+	}),
+	singleValue: (provided) => ({
+		...provided,
+		color: "var(--color-primary-content)",
+	}),
+	multiValue: (provided) => ({
+		...provided,
+		backgroundColor: "var(--color-base-300)",
+	}),
+	menu: (provided) => ({
+		...provided,
+		backgroundColor: "var(--color-base-100)",
+		borderRadius: "0.5rem",
+	}),
+};
+
 const SelectCom = <T extends FieldValues>({
-  name,
-  label = name,
-  placeholder = label,
-  form,
-  formOptions,
-  className,
-  ...inputProps
+	name,
+	label = name,
+	placeholder = label,
+	form,
+	formOptions,
+	className,
+	...inputProps
 }: SelectProps<T>) => {
-  return (
-    <div>
-      <span className="label-text text-lg flex items-center gap-2">
-        {label}
-      </span>
-      <SelectTemplate
-        {...form.register(name, formOptions)}
-        onChange={(newValue: any) => {
-          if ('value' in newValue) {
-            form.setValue(name, newValue.value);
-          } else {
-            form.setValue(name, newValue);
-          }
-          form.trigger(name);
-        }}
-        className={cn('w-full placeholder:text-neutral-600', className)}
-        placeholder={placeholder}
-        {...inputProps}
-      />
-      {form.formState.errors[name] && (
-        <p className="text-error">
-          {form.formState.errors[name].message as string}
-        </p>
-      )}
-    </div>
-  );
+	return (
+		<div>
+			<span className="label-text text-lg flex items-center gap-2">
+				{label}
+			</span>
+			<SelectTemplate
+				{...form.register(name, formOptions)}
+				onChange={(newValue: any) => {
+					if (Array.isArray(newValue)) {
+						form.setValue(name, newValue.map((v: any) => v.value) as any);
+					} else {
+						form.setValue(name, newValue.value);
+					}
+					form.trigger(name);
+				}}
+				styles={customStyles}
+				className={cn("w-full placeholder:text-neutral-600", className)}
+				placeholder={placeholder}
+				{...inputProps}
+			/>
+			{form.formState.errors[name]?.message && (
+				<p className="text-error">
+					{form.formState.errors[name].message as string}
+				</p>
+			)}
+		</div>
+	);
 };
 
 const SelectWrapper = (props: any) => <SelectCom {...props} />;
 
 export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
-  ssr: false,
+	ssr: false,
 });