implemented label wrapper

frontend/components/label-input.tsx

@@ -1,7 +1,5 @@
-import { Info } from "lucide-react";
+import { LabelWrapper } from "./label-wrapper";
 import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export function LabelInput({
   label,
@@ -16,25 +14,13 @@ export function LabelInput({
   required: boolean;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
-    <div className="space-y-2">
+    <LabelWrapper
-      <Label
+      label={label}
-        htmlFor={id}
+      helperText={helperText}
-        className="text-mmd font-medium flex items-center gap-1"
+      id={id}
-      >
+      required={required}
-        {label}
+    >
-        {required && <span className="text-red-500">*</span>}
+      <Input id={id} {...props} />
-        {helperText && (
+    </LabelWrapper>
-          <Tooltip>
-            <TooltipTrigger>
-              <Info className="w-3.5 h-3.5 text-muted-foreground" />
-            </TooltipTrigger>
-            <TooltipContent>{helperText}</TooltipContent>
-          </Tooltip>
-        )}
-      </Label>
-      <div className="relative">
-        <Input id={id} {...props} />
-      </div>
-    </div>
   );
 }

frontend/components/label-wrapper.tsx

@@ -0,0 +1,43 @@
+import { Info } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export function LabelWrapper({
+  label,
+  helperText,
+  id,
+  required,
+  children,
+}: {
+  label: string;
+  helperText: string;
+  id: string;
+  required: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-2">
+      <Label
+        htmlFor={id}
+        className="text-mmd font-medium flex items-center gap-1"
+      >
+        {label}
+        {required && <span className="text-red-500">*</span>}
+        {helperText && (
+          <Tooltip>
+            <TooltipTrigger>
+              <Info className="w-3.5 h-3.5 text-muted-foreground" />
+            </TooltipTrigger>
+            <TooltipContent>{helperText}</TooltipContent>
+          </Tooltip>
+        )}
+      </Label>
+      <div className="relative">{children}</div>
+    </div>
+  );
+}