feat: implement IconButton component and update SSOLogin to use it

This commit is contained in:
Maximilian Liebmann 2025-05-09 16:33:35 +02:00
parent 820c84cd8c
commit b81210d2ea
4 changed files with 70 additions and 51 deletions

View file

@ -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>
);
}

View file

@ -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( 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", "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: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
destructive: 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: 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: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost: 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: { 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: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default',
}, },
} },
) );
function Button({ function Button({
className, className,
@ -41,19 +41,19 @@ function Button({
size, size,
asChild = false, asChild = false,
...props ...props
}: React.ComponentProps<"button"> & }: React.ComponentProps<'button'> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
asChild?: boolean asChild?: boolean;
}) { }) {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : 'button';
return ( return (
<Comp <Comp
data-slot="button" data-slot='button'
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
{...props} {...props}
/> />
) );
} }
export { Button, buttonVariants } export { Button, buttonVariants };

View file

@ -3,8 +3,7 @@ import { Button } from '@/components/ui/button';
export default function LoginForm() { export default function LoginForm() {
return ( 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'
@ -23,6 +22,5 @@ export default function LoginForm() {
Login Login
</Button> </Button>
</form> </form>
</div>
); );
} }

View file

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