feat: add new menu

app/components/Input.tsx

@@ -1,14 +1,17 @@
 import { useRef } from 'react';
-import { type AriaTextFieldProps, useTextField } from 'react-aria';
+import { type AriaTextFieldProps, useId, useTextField } from 'react-aria';
 import cn from '~/utils/cn';
 
 export interface InputProps extends AriaTextFieldProps<HTMLInputElement> {
 	isRequired?: boolean;
+	className?: string;
 }
 
 export default function Input(props: InputProps) {
-	const { label } = props;
+	const { label, className } = props;
 	const ref = useRef<HTMLInputElement | null>(null);
+	const id = useId(props.id);
+
 	const {
 		labelProps,
 		inputProps,
@@ -22,7 +25,7 @@ export default function Input(props: InputProps) {
 		<div className="flex flex-col">
 			<label
 				{...labelProps}
-				htmlFor={props.name}
+				htmlFor={id}
 				className={cn(
 					'text-xs font-medium px-3 mb-0.5',
 					'text-headplane-700 dark:text-headplane-100',
@@ -34,11 +37,13 @@ export default function Input(props: InputProps) {
 				{...inputProps}
 				required={props.isRequired}
 				ref={ref}
+				id={id}
 				className={cn(
 					'rounded-xl px-3 py-2',
 					'focus:outline-none focus:ring',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
+					className,
 				)}
 			/>
 			{props.description && (