Merge pull request #145 from peternnadi1999/feat/ui-label-component

feat(ui): add reusable Label component

Author: codebestia

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-label":"^2.1.15",
     "@radix-ui/react-tooltip": "^1.2.16",
     "@stellar/freighter-api": "^5.0.0",
     "@stellar/stellar-sdk": "^14.1.1",

src/app/register/register-client.tsx

@@ -391,6 +391,11 @@ export function RegisterClient() {
                   }
                   required
                 />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="lastName">Last name</Label>
+                <Input
+                  id="lastName"
               </label>
               <label className="grid gap-2 text-sm font-medium">
                 Last name
@@ -401,6 +406,11 @@ export function RegisterClient() {
                   }
                   required
                 />
+              </div>
+              <div className="grid gap-2 sm:col-span-2">
+                <Label htmlFor="email">Email address</Label>
+                <Input
+                  id="email"
               </label>
               <label className="grid gap-2 text-sm font-medium sm:col-span-2">
                 Email address
@@ -412,23 +422,23 @@ export function RegisterClient() {
                   onChange={(event) => updateField("email", event.target.value)}
                   required
                 />
-              </label>
+              </div>
             </div>
           ) : null}
 
           {step === 2 ? (
             <div className="grid gap-4">
-              <label className="grid gap-2 text-sm font-medium">
-                Business name
-                <input
-                  className="h-11 rounded-md border bg-background px-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
+              <div className="grid gap-2">
+                <Label htmlFor="businessName">Business name</Label>
+                <Input
+                  id="businessName"
                   value={values.businessName}
                   onChange={(event) =>
                     updateField("businessName", event.target.value)
                   }
                   required
                 />
-              </label>
+              </div>
               <label className="grid gap-2 text-sm font-medium">
                 Business logo
                 <input
@@ -609,4 +619,4 @@ export function RegisterClient() {
       </section>
     </main>
   );
-}
+}

src/components/ui/input.tsx

@@ -6,6 +6,12 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
+        ref={ref}
+        type={type}
+        data-slot="input"
+        className={cn(
+          "h-11 w-full rounded-md border bg-background px-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50",
+          "file:mr-3 file:rounded-md file:border-0 file:bg-secondary file:px-3 file:py-2 file:text-sm file:font-semibold file:text-primary",
         type={type}
         ref={ref}
         data-slot="input"
@@ -22,3 +28,4 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 Input.displayName = "Input";
 
 export { Input };
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    data-slot="label"
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };