Merge pull request 'fix: change login page to use radix ui labels' (#47)

Reviewed-on: #47
Reviewed-by: Dominik <mail@dominikstahl.dev>

package.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@radix-ui/react-hover-card": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-slot": "^1.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/components/labeled-input.tsx

@@ -1,4 +1,5 @@
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 export default function LabeledInput({
   type,
@@ -11,17 +12,17 @@ export default function LabeledInput({
   placeholder?: string;
   value?: string;
 }) {
-  const randomId = Math.random().toString(36).substring(2, 15);
+  const elementId = Math.random().toString(36).substring(2, 15);
 
   return (
-    <div className='flex flex-col gap-2'>
-      <label htmlFor={randomId}>{label}</label>
+    <div className='flex flex-col gap-1'>
+      <Label htmlFor={elementId}>{label}</Label>
 
       <Input
         type={type}
         placeholder={placeholder}
         defaultValue={value}
-        id={randomId}
+        id={elementId}
       />
     </div>
   );

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '@/lib/utils';
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot='label'
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

src/components/user/login-form.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button';
 
 export default function LoginForm() {
   return (
-    <form className='flex flex-col gap-4 w-full'>
+    <form className='flex flex-col gap-5 w-full'>
       <LabeledInput
         type='email'
         label='E-Mail'

yarn.lock

@@ -1042,6 +1042,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-label@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "@radix-ui/react-label@npm:2.1.6"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/1c94bd363b965aeeb6010539399da4bb894c29bcb777d11f6e9a0ab22c43621be59529f1a23cfbda1f3c0ba3d8a6fdd2a50200b6e9b5839a3fbf0c2299de163e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popper@npm:1.2.6":
   version: 1.2.6
   resolution: "@radix-ui/react-popper@npm:1.2.6"
@@ -4191,6 +4210,7 @@ __metadata:
     "@fortawesome/free-solid-svg-icons": "npm:^6.7.2"
     "@fortawesome/react-fontawesome": "npm:^0.2.2"
     "@radix-ui/react-hover-card": "npm:^1.1.13"
+    "@radix-ui/react-label": "npm:^2.1.6"
     "@radix-ui/react-slot": "npm:^1.2.2"
     "@tailwindcss/postcss": "npm:4.1.6"
     "@types/node": "npm:22.15.17"