Made Mission marker DB compatible

packages/ui/src/components/Input.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+	FieldValues,
+	Path,
+	RegisterOptions,
+	UseFormReturn,
+} from "react-hook-form";
+import { cn } from "../helper/cn";
+
+interface InputProps<T extends FieldValues>
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {
+	name: Path<T>;
+	form: UseFormReturn<T>;
+	formOptions?: RegisterOptions<T>;
+	label?: string;
+	placeholder?: string;
+}
+
+export const Input = <T extends FieldValues>({
+	name,
+	label = name,
+	placeholder = label,
+	form,
+	formOptions,
+	className,
+	...inputProps
+}: InputProps<T>) => {
+	return (
+		<label className="floating-label w-full mt-5">
+			<span className="text-lg flex items-center gap-2">{label}</span>
+			<input
+				{...form.register(name, formOptions)}
+				className={cn(
+					"input input-bordered 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>
+			)}
+		</label>
+	);
+};

packages/ui/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./Input";

packages/ui/src/helper/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => {
+	return twMerge(clsx(inputs));
+};

packages/ui/src/index.ts

@@ -1 +1,2 @@
 export * from "./helper/event";
+export * from "./components";