swing-xyz · KarinaKurm · Oct 2, 2024 · Sep 9, 2024 · Sep 16, 2024 · Sep 29, 2024
diff --git a/apps/directory/src/app/layout.tsx b/apps/directory/src/app/layout.tsx
@@ -12,12 +12,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <head />
 
       <body
-        className={`bg-background font-sans relative antialiased max-h-screen min-h-full ${GeistSans.variable} ${GeistMono.variable}`}
+        className={`bg-background relative max-h-screen min-h-full font-sans antialiased ${GeistSans.variable} ${GeistMono.variable}`}
       >
         <ThemeProvider>
           <Header />
 
-          <main className="max-w-6xl mx-auto">{children}</main>
+          <main className="mx-auto max-w-6xl">{children}</main>
 
           <Footer />
         </ThemeProvider>

diff --git a/apps/directory/src/app/page.tsx b/apps/directory/src/app/page.tsx
@@ -44,7 +44,7 @@ export default function Directory() {
       <Hero />
 
       <div id="templates" className="container">
-        <div className="flex flex-col min-[960px]:flex-row gap-10 py-16 sm:py-20">
+        <div className="flex flex-col gap-10 py-16 sm:py-20 min-[960px]:flex-row">
           <div className="min-[960px]:w-56">
             <Suspense>
               <Filters />

diff --git a/apps/directory/src/components/filters.tsx b/apps/directory/src/components/filters.tsx
@@ -45,7 +45,7 @@ function Filter() {
   return (
     <div className="relative overflow-auto">
       <div className="flex items-center justify-between">
-        <h4 className="font-bold text-base">Filter</h4>
+        <h4 className="text-base font-bold">Filter</h4>
 
         <Button
           className={cn({
@@ -59,7 +59,7 @@ function Filter() {
             });
           }}
         >
-          <XCircle className="h-4 w-4 mr-2 text-muted" /> Clear
+          <XCircle className="text-muted mr-2 h-4 w-4" /> Clear
         </Button>
       </div>
 
@@ -74,7 +74,7 @@ function Filter() {
 
             return (
               <AccordionItem key={filterKey} value={filter}>
-                <AccordionTrigger className="text-sm px-3" iconSide="left">
+                <AccordionTrigger className="px-3 text-sm" iconSide="left">
                   {filter}
                 </AccordionTrigger>
 
@@ -87,7 +87,7 @@ function Filter() {
                       <label
                         key={optionValue}
                         htmlFor={optionValue}
-                        className="flex flex-row items-center space-x-3 space-y-0 rounded-md bg-secondary text-secondary-foreground p-3 hover:bg-secondary/60 cursor-pointer text-sm"
+                        className="bg-secondary text-secondary-foreground hover:bg-secondary/60 flex cursor-pointer flex-row items-center space-x-3 space-y-0 rounded-md p-3 text-sm"
                       >
                         <Checkbox
                           id={optionValue}
@@ -113,7 +113,7 @@ function Filter() {
                           }}
                         />
 
-                        <span className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex-grow font-normal">
+                        <span className="flex-grow text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                           {option}
                         </span>
                       </label>

diff --git a/apps/directory/src/components/footer.tsx b/apps/directory/src/components/footer.tsx
@@ -27,14 +27,14 @@ export function Footer() {
             >
               <span className="sr-only">{item.name}</span>
               <item.icon
-                className="h-5 w-5 fill-muted hover:fill-muted/80"
+                className="fill-muted hover:fill-muted/80 h-5 w-5"
                 aria-hidden="true"
               />
             </a>
           ))}
         </div>
         <div className="mt-8 md:order-1 md:mt-0">
-          <p className="text-center text-xs leading-5 text-muted">
+          <p className="text-muted text-center text-xs leading-5">
             &copy; {new Date().getFullYear()} Swing. All rights reserved.
           </p>
         </div>

diff --git a/apps/directory/src/components/header.tsx b/apps/directory/src/components/header.tsx
@@ -4,14 +4,14 @@ import { Button } from "./ui/button";
 
 export function Header() {
   return (
-    <header className="absolute top-0 inset-x-0 flex justify-between items-center h-20 p-4 max-w-6xl mx-auto z-10">
+    <header className="absolute inset-x-0 top-0 z-10 mx-auto flex h-20 max-w-6xl items-center justify-between p-4">
       <a href="https://swing.xyz" target="_blank">
         <SwingLogo className="h-7" />
       </a>
 
       <nav className="flex items-center gap-5">
         <a
-          className="text-sm font-medium hover:opacity-90 hidden sm:block"
+          className="hidden text-sm font-medium hover:opacity-90 sm:block"
           href="https://developers.swing.xyz"
           target="_blank"
         >
@@ -20,7 +20,7 @@ export function Header() {
 
         <Button className="hidden sm:inline-flex" variant="outline" asChild>
           <a href="https://github.com/swing-xyz/examples" target="__blank">
-            <GithubIcon className="w-4 h-4 mr-2" /> Fork on Github
+            <GithubIcon className="mr-2 h-4 w-4" /> Fork on Github
           </a>
         </Button>
 

diff --git a/apps/directory/src/components/hero.tsx b/apps/directory/src/components/hero.tsx
@@ -18,7 +18,7 @@ export function Hero() {
                 [7, 3],
                 [10, 6],
               ]}
-              className="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
+              className="dark:fill-white/2.5 absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:stroke-white/5"
             />
           </div>
           <svg
@@ -31,12 +31,12 @@ export function Hero() {
         </div>
       </div>
 
-      <div className="container mx-auto max-w-3xl pt-32 sm:pt-40 lg:pt-48 pb-12 sm:pb-20">
+      <div className="container mx-auto max-w-3xl pb-12 pt-32 sm:pb-20 sm:pt-40 lg:pt-48">
         <div className="text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-foreground md:text-5xl">
+          <h1 className="text-foreground text-3xl font-bold tracking-tight md:text-5xl">
             Swing Example Templates
           </h1>
-          <p className="mt-6 text-lg leading-8 text-muted">
+          <p className="text-muted mt-6 text-lg leading-8">
             Kickstart your Swing integration with ready-to-ship repositories.
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">

diff --git a/apps/directory/src/components/template-grid.tsx b/apps/directory/src/components/template-grid.tsx
@@ -23,7 +23,7 @@ export type TemplateMeta = {
 
 export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 min-[960px]:grid-cols-2 lg:grid-cols-3 gap-5">
+    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 min-[960px]:grid-cols-2 lg:grid-cols-3">
       {templates.map((template) => {
         const FrameworkIcon = template.framework
           ? FrameworkIcons[template.framework as keyof typeof FrameworkIcons]
@@ -32,7 +32,7 @@ export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
         return (
           <Card
             key={template.id}
-            className="sm:max-w-72 hover:scale-105 duration-300 mx-auto flex flex-col relative overflow-hidden bg-background"
+            className="bg-background relative mx-auto flex flex-col overflow-hidden duration-300 hover:scale-105 sm:max-w-72"
           >
             <a
               className="absolute inset-0"
@@ -42,7 +42,7 @@ export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
 
             <div
               className={cn(
-                "h-44 flex items-center justify-center bg-gradient-to-r",
+                "flex h-44 items-center justify-center bg-gradient-to-r",
                 {
                   "to-slate-800": template.framework === "Next.js",
                   "to-sky-500": template.framework === "Webpack",
@@ -69,7 +69,7 @@ export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
               <CardDescription>{template.description}</CardDescription>
             </CardHeader>
 
-            <CardFooter className="gap-x-2 flex-wrap gap-y-2">
+            <CardFooter className="flex-wrap gap-x-2 gap-y-2">
               {template.framework ? (
                 <Badge variant="secondary">{template.framework}</Badge>
               ) : null}

diff --git a/apps/directory/src/components/ui/accordion.tsx b/apps/directory/src/components/ui/accordion.tsx
@@ -30,7 +30,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-90 gap-x-3",
+        "flex flex-1 items-center gap-x-3 py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-90",
         className,
         {
           "justify-between": iconSide === "right",
@@ -56,7 +56,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>

diff --git a/apps/directory/src/components/ui/avatar.tsx b/apps/directory/src/components/ui/avatar.tsx
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}

diff --git a/apps/directory/src/components/ui/card.tsx b/apps/directory/src/components/ui/card.tsx
@@ -11,7 +11,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "bg-card text-card-foreground rounded-lg border shadow-sm",
       className,
     )}
     {...props}
@@ -52,7 +52,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

diff --git a/apps/directory/src/components/ui/checkbox.tsx b/apps/directory/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-muted ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=checked]:text-background",
+      "border-muted ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-foreground data-[state=checked]:text-background peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

diff --git a/apps/directory/src/components/ui/dialog.tsx b/apps/directory/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

diff --git a/apps/directory/src/components/ui/drawer.tsx b/apps/directory/src/components/ui/drawer.tsx
@@ -43,12 +43,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background max-h-screen",
+        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto max-h-screen flex-col rounded-t-[10px] border",
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
@@ -98,7 +98,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

diff --git a/examples/gas-widget-nextjs/src/app/layout.tsx b/examples/gas-widget-nextjs/src/app/layout.tsx
@@ -11,10 +11,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative flex max-h-screen min-h-full text-white bg-slate-900">
+      <body className="relative flex max-h-screen min-h-full bg-slate-900 text-white">
         <Sidebar />
 
-        <main className="relative flex flex-col w-full min-h-screen overflow-y-auto">
+        <main className="relative flex min-h-screen w-full flex-col overflow-y-auto">
           <div className="flex justify-end p-6">
             <Button
               href="https://github.com/swing-xyz/examples/tree/main/examples/gas-widget-nextjs"

diff --git a/examples/gas-widget-nextjs/src/app/page.tsx b/examples/gas-widget-nextjs/src/app/page.tsx
@@ -3,7 +3,7 @@ import "@swing.xyz/ui/theme.css";
 
 export default function SwapPage() {
   return (
-    <div className="flex items-center justify-center h-full">
+    <div className="flex h-full items-center justify-center">
       <Gas
         title="Gas Refill with MetaWallet"
         projectId="example-gas-widget-nextjs"