add tron example + prettier config

swing-xyz · Sep 16, 2024 · 76c78d8 · 76c78d8
1 parent 4f52430
commit 76c78d8
Show file tree

Hide file tree

Showing 225 changed files with 2,880 additions and 2,787 deletions.
diff --git a/apps/directory/src/app/layout.tsx b/apps/directory/src/app/layout.tsx
@@ -1,23 +1,23 @@
-import { ThemeProvider } from "components/theme-provider";
-import "styles/globals.css";
+import { ThemeProvider } from 'components/theme-provider';
+import 'styles/globals.css';
 
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
-import { Header } from "components/header";
-import { Footer } from "components/footer";
+import { GeistSans } from 'geist/font/sans';
+import { GeistMono } from 'geist/font/mono';
+import { Header } from 'components/header';
+import { Footer } from 'components/footer';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <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
@@ -1,36 +1,36 @@
-import { Hero } from "components/hero";
-import { Templates } from "components/templates";
+import { Hero } from 'components/hero';
+import { Templates } from 'components/templates';
 
-import { Suspense } from "react";
-import { Filters } from "components/filters";
-import { TemplateGrid } from "components/template-grid";
-import { getTemplates } from "lib/templates";
+import { Suspense } from 'react';
+import { Filters } from 'components/filters';
+import { TemplateGrid } from 'components/template-grid';
+import { getTemplates } from 'lib/templates';
 
 const templates = getTemplates();
 
 export const metadata = {
-  metadataBase: new URL("https://examples.swing.xyz"),
-  title: "Swing Example Templates",
+  metadataBase: new URL('https://examples.swing.xyz'),
+  title: 'Swing Example Templates',
   description:
-    "Find an example template to help you get started integrating with Swing.",
+    'Find an example template to help you get started integrating with Swing.',
   openGraph: {
-    type: "website",
-    title: "Swing Example Templates",
+    type: 'website',
+    title: 'Swing Example Templates',
     description:
-      "Find an example template to help you get started integrating with Swing.",
+      'Find an example template to help you get started integrating with Swing.',
     images: [
       {
-        url: "/directory-landing.png",
+        url: '/directory-landing.png',
         width: 1200,
         height: 838,
-        alt: "Swing Example Templates",
+        alt: 'Swing Example Templates',
       },
     ],
   },
   twitter: {
-    card: "summary_large_image",
-    creator: "@swing_xyz",
-    site: "@swing_xyz",
+    card: 'summary_large_image',
+    creator: '@swing_xyz',
+    site: '@swing_xyz',
   },
   robots: {
     index: true,
@@ -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
@@ -1,26 +1,26 @@
-"use client";
+'use client';
 
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "components/ui/accordion";
-import { Checkbox } from "components/ui/checkbox";
-import { slugify } from "lib/slugify";
-import { usePathname, useSearchParams, useRouter } from "next/navigation";
-import { Button } from "./ui/button";
-
-import { XCircle } from "lucide-react";
-import { cn } from "lib/utils";
-import { keywordEntries } from "lib/keywords";
-import { useMediaQuery } from "hooks/use-media-query";
-import { Drawer, DrawerContent, DrawerTrigger } from "./ui/drawer";
-import { useState } from "react";
+} from 'components/ui/accordion';
+import { Checkbox } from 'components/ui/checkbox';
+import { slugify } from 'lib/slugify';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
+import { Button } from './ui/button';
+
+import { XCircle } from 'lucide-react';
+import { cn } from 'lib/utils';
+import { keywordEntries } from 'lib/keywords';
+import { useMediaQuery } from 'hooks/use-media-query';
+import { Drawer, DrawerContent, DrawerTrigger } from './ui/drawer';
+import { useState } from 'react';
 
 export function Filters() {
   const [open, setOpen] = useState(false);
-  const isDesktop = useMediaQuery("(min-width: 960px)");
+  const isDesktop = useMediaQuery('(min-width: 960px)');
 
   if (isDesktop) return <Filter />;
 
@@ -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}
@@ -105,15 +105,15 @@ function Filter() {
                             }
 
                             router.push(
-                              pathname + "?" + nextSearchParams.toString(),
+                              pathname + '?' + nextSearchParams.toString(),
                               {
                                 scroll: false,
                               },
                             );
                           }}
                         />
 
-                        <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
@@ -1,15 +1,15 @@
-import { GithubIcon } from "./icons/github";
-import { TwitterIcon } from "./icons/twitter";
+import { GithubIcon } from './icons/github';
+import { TwitterIcon } from './icons/twitter';
 
 const footerNavigation = [
   {
-    name: "GitHub",
-    href: "https://github.com/swing-xyz/examples",
+    name: 'GitHub',
+    href: 'https://github.com/swing-xyz/examples',
     icon: GithubIcon,
   },
   {
-    name: "X",
-    href: "https://x.com/swing_xyz",
+    name: 'X',
+    href: 'https://x.com/swing_xyz',
     icon: TwitterIcon,
   },
 ];
@@ -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/grid-pattern.tsx b/apps/directory/src/components/grid-pattern.tsx
@@ -5,7 +5,7 @@ export function GridPattern({
   y,
   squares,
   ...props
-}: React.ComponentPropsWithoutRef<"svg"> & {
+}: React.ComponentPropsWithoutRef<'svg'> & {
   width: number;
   height: number;
   x: string | number;

diff --git a/apps/directory/src/components/header.tsx b/apps/directory/src/components/header.tsx
@@ -1,17 +1,17 @@
-import { GithubIcon } from "./icons/github";
-import { SwingLogo } from "./icons/swing";
-import { Button } from "./ui/button";
+import { GithubIcon } from './icons/github';
+import { SwingLogo } from './icons/swing';
+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
@@ -1,5 +1,5 @@
-import { GridPattern } from "./grid-pattern";
-import { Button } from "./ui/button";
+import { GridPattern } from './grid-pattern';
+import { Button } from './ui/button';
 
 export function Hero() {
   return (
@@ -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/icons/github.tsx b/apps/directory/src/components/icons/github.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 
 export function GithubIcon(props: SVGProps<SVGSVGElement>) {
   return (

diff --git a/apps/directory/src/components/icons/swing.tsx b/apps/directory/src/components/icons/swing.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 
 export function SwingLogo(props: SVGProps<SVGSVGElement>) {
   return (

diff --git a/apps/directory/src/components/icons/twitter.tsx b/apps/directory/src/components/icons/twitter.tsx
@@ -1,4 +1,4 @@
-import type { SVGProps } from "react";
+import type { SVGProps } from 'react';
 
 export function TwitterIcon(props: SVGProps<SVGSVGElement>) {
   return (