feat: implement IconButton component and update SSOLogin to use it

src/components/icon-button.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function IconButton({
+  icon,
+  children,
+  ...props
+}: {
+  icon: IconProp;
+  children: React.ReactNode;
+} & React.ComponentProps<typeof Button>) {
+  return (
+    <Button type='button' variant='default' {...props}>
+      <FontAwesomeIcon icon={icon} className='mr-2' />
+      {children}
+    </Button>
+  );
+}

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import * as React from 'react';
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -10,30 +10,30 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: "text-primary underline-offset-4 hover:underline",
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: "size-9",
+        icon: 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default',
     },
-  }
+  },
-)
+);
 
 function Button({
   className,
@@ -41,19 +41,19 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
-      data-slot="button"
+      data-slot='button'
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/user/login-form.tsx

@@ -3,26 +3,24 @@ import { Button } from '@/components/ui/button';
 
 export default function LoginForm() {
   return (
-    <div>
+    <form className='flex flex-col gap-4 w-7/8'>
-      <form className='flex flex-col gap-4'>
+      <LabeledInput
-        <LabeledInput
+        type='email'
-          type='email'
+        label='E-Mail'
-          label='E-Mail'
+        placeholder='Enter your E-Mail'
-          placeholder='Enter your E-Mail'
+      />
-        />
+      <LabeledInput
-        <LabeledInput
+        type='password'
-          type='password'
+        label='Password'
-          label='Password'
+        placeholder='Enter your Password'
-          placeholder='Enter your Password'
+      />
-        />
+      <Button
-        <Button
+        className='hover:bg-blue-600 hover:text-white'
-          className='hover:bg-blue-600 hover:text-white'
+        type='submit'
-          type='submit'
+        variant='secondary'
-          variant='secondary'
+      >
-        >
+        Login
-          Login
+      </Button>
-        </Button>
+    </form>
-      </form>
-    </div>
   );
 }

src/components/user/sso-login-button.tsx

@@ -1,6 +1,6 @@
 import { signIn } from '@/auth';
-import { Button } from '@/components/ui/button';
+import { IconButton } from '@/components/icon-button';
-//import { faOpenid } from '@fortawesome/free-brands-svg-icons';
+import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 
 export default function SSOLogin({
   provider,
@@ -11,19 +11,20 @@ export default function SSOLogin({
 }) {
   return (
     <form
-      className='flex flex-col items-center gap-4 w-full'
+      className='flex flex-col items-center gap-4 w-7/8'
       action={async () => {
         'use server';
         await signIn(provider);
       }}
     >
-      <Button
+      <IconButton
         className='w-full'
         type='submit'
-        variant='default' /*icon={faOpenid}*/
+        variant='default'
+        icon={faOpenid}
       >
         Login with {providerDisplayName}
-      </Button>
+      </IconButton>
     </form>
   );
 }