From 90b55385d1c862ecec4f2bf7ae79e45eeaca76e2 Mon Sep 17 00:00:00 2001 From: xiften <108333567+not-ani@users.noreply.github.com> Date: Sat, 3 Aug 2024 21:58:11 -0600 Subject: [PATCH] fix: added loading button formating --- .../(home)/events/_components/CreateEvent.tsx | 15 ++-- apps/nextjs/src/app/(home)/events/page.tsx | 2 +- packages/auth/src/config.ts | 1 - packages/ui/src/loading-button.tsx | 85 +++++++++++-------- 4 files changed, 60 insertions(+), 43 deletions(-) diff --git a/apps/nextjs/src/app/(home)/events/_components/CreateEvent.tsx b/apps/nextjs/src/app/(home)/events/_components/CreateEvent.tsx index 1193c55..df26c10 100644 --- a/apps/nextjs/src/app/(home)/events/_components/CreateEvent.tsx +++ b/apps/nextjs/src/app/(home)/events/_components/CreateEvent.tsx @@ -11,7 +11,6 @@ import { useForm } from "react-hook-form"; import { createEventSchema } from "@amaxa/db/schema"; import { cn } from "@amaxa/ui"; import { Button } from "@amaxa/ui/button"; -import { LoadingButton } from "@amaxa/ui/loading-button"; import { Calendar } from "@amaxa/ui/calendar"; import { Dialog, @@ -32,6 +31,7 @@ import { FormMessage, } from "@amaxa/ui/form"; import { Input } from "@amaxa/ui/input"; +import { LoadingButton } from "@amaxa/ui/loading-button"; import { Popover, PopoverContent, PopoverTrigger } from "@amaxa/ui/popover"; import { Switch } from "@amaxa/ui/switch"; import { Textarea } from "@amaxa/ui/textarea"; @@ -75,7 +75,7 @@ export const CreateEvent = () => {
- + @@ -205,7 +205,6 @@ export const CreateEvent = () => { (
@@ -243,10 +242,14 @@ export const CreateEvent = () => { )} /> - - - Save changes + + Save changes + diff --git a/apps/nextjs/src/app/(home)/events/page.tsx b/apps/nextjs/src/app/(home)/events/page.tsx index ac3ec99..754df97 100644 --- a/apps/nextjs/src/app/(home)/events/page.tsx +++ b/apps/nextjs/src/app/(home)/events/page.tsx @@ -50,4 +50,4 @@ export default async function Home(props: { ); } -export const dynamic = "force-dynamic" +export const dynamic = "force-dynamic"; diff --git a/packages/auth/src/config.ts b/packages/auth/src/config.ts index a0a3855..112b367 100644 --- a/packages/auth/src/config.ts +++ b/packages/auth/src/config.ts @@ -1,4 +1,3 @@ -//TODO: add permissions stuff import type { DefaultSession, NextAuthConfig, diff --git a/packages/ui/src/loading-button.tsx b/packages/ui/src/loading-button.tsx index 14d6d14..082bbc6 100644 --- a/packages/ui/src/loading-button.tsx +++ b/packages/ui/src/loading-button.tsx @@ -1,61 +1,74 @@ -import * as React from 'react'; -import { Slot } from '@radix-ui/react-slot'; -import { cva, type VariantProps } from 'class-variance-authority'; -import { Loader2 } from 'lucide-react'; -import { cn } from '.'; +import type { VariantProps } from "class-variance-authority"; +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { cva } from "class-variance-authority"; +import { Loader2 } from "lucide-react"; + +import { cn } from "."; const buttonVariants = cva( - 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', - outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", }, size: { - default: 'h-10 px-4 py-2', - sm: 'h-9 rounded-md px-3', - lg: 'h-11 rounded-md px-8', - icon: 'h-10 w-10', + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", }, }, defaultVariants: { - variant: 'default', - size: 'default', + variant: "default", + size: "default", }, }, ); export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps { + VariantProps { asChild?: boolean; loading?: boolean; } const LoadingButton = React.forwardRef( - ({ className, variant, size, asChild = false, loading, children, ...props }, ref) => { + ( + { className, variant, size, asChild = false, loading, children, ...props }, + ref, + ) => { if (asChild) { return ( <> - {React.Children.map(children as React.ReactElement, (child: React.ReactElement) => { - return React.cloneElement(child, { - className: cn(buttonVariants({ variant, size }), className), - children: ( - <> - {loading && ( - - )} - {child.props.children} - - ), - }); - })} + {React.Children.map( + children as React.ReactElement, + (child: React.ReactElement) => { + return React.cloneElement(child, { + className: cn(buttonVariants({ variant, size }), className), + children: ( + <> + {loading && ( + + )} + {child.props.children} + + ), + }); + }, + )} ); @@ -69,13 +82,15 @@ const LoadingButton = React.forwardRef( {...props} > <> - {loading && } + {loading && ( + + )} {children} ); }, ); -LoadingButton.displayName = 'LoadingButton'; +LoadingButton.displayName = "LoadingButton"; export { LoadingButton, buttonVariants };