refactor

calvo-jp · Feb 29, 2024 · 604c2b4 · 604c2b4
1 parent 1d91aa7
commit 604c2b4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 32 deletions.
diff --git a/website/next.config.mjs b/website/next.config.mjs
@@ -2,6 +2,8 @@
 const nextConfig = {
   experimental: {
     optimizePackageImports: ['@untitled-theme/icons-react', '@ark-ui/react'],
+    serverMinification: true,
+    ppr: true,
   },
 };
 

diff --git a/website/src/app/@modal/(.)icons/[slug]/modal.tsx b/website/src/app/@modal/(.)icons/[slug]/modal.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import {Dialog} from '@ark-ui/react';
+import {Dialog, Tooltip} from '@ark-ui/react';
 import {XCloseIcon} from '@untitled-theme/icons-react';
 import {useRouter} from 'next/navigation';
 import {PropsWithChildren} from 'react';
+import {twMerge} from 'tailwind-merge';
 
 export function Modal({children}: PropsWithChildren) {
   const router = useRouter();
@@ -22,9 +23,28 @@ export function Modal({children}: PropsWithChildren) {
         <Dialog.Content className="fixed bottom-0 right-0 z-modal w-full border-t bg-white p-4 data-open:animate-slide-up data-closed:animate-slide-down md:p-6 lg:p-8 dark:bg-gray-true-950">
           <div className="max-w-lg [&_.shiki]:max-h-[48vh]">{children}</div>
 
-          <Dialog.CloseTrigger className="absolute right-3 top-3 p-1">
-            <XCloseIcon />
-          </Dialog.CloseTrigger>
+          <Tooltip.Root lazyMount unmountOnExit>
+            <Tooltip.Trigger asChild>
+              <Dialog.CloseTrigger className="absolute right-3 top-3 p-1">
+                <XCloseIcon />
+              </Dialog.CloseTrigger>
+            </Tooltip.Trigger>
+
+            <Tooltip.Positioner>
+              <Tooltip.Content className="rounded-md bg-gray-true-900 px-2.5 py-2 font-mono text-sm text-white data-open:animate-scalefade-in data-closed:animate-scalefade-out dark:bg-gray-true-50 dark:text-gray-true-800">
+                <Tooltip.Arrow
+                  className={twMerge(
+                    '[--arrow-size:theme(spacing.2)]',
+                    '[--arrow-background:theme(colors.gray-true[900])]',
+                    'dark:[--arrow-background:theme(colors.gray-true[100])]',
+                  )}
+                >
+                  <Tooltip.ArrowTip />
+                </Tooltip.Arrow>
+                Close
+              </Tooltip.Content>
+            </Tooltip.Positioner>
+          </Tooltip.Root>
         </Dialog.Content>
       </Dialog.Positioner>
     </Dialog.Root>

diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
@@ -1,6 +1,4 @@
-import {Tooltip} from '@ark-ui/react';
 import Link from 'next/link';
-import {twMerge} from 'tailwind-merge';
 import {Searchbar} from './searchbar';
 import {getIcons} from './utils';
 
@@ -40,35 +38,17 @@ export default async function IconsPage({searchParams}: Props) {
 
       <div className="grid grid-cols-6 gap-2 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12">
         {icons.map((icon) => (
-          <Tooltip.Root key={icon.slug} lazyMount unmountOnExit>
-            <Tooltip.Trigger
-              type="button"
+          <Link
+            key={icon.slug}
+            href={`/icons/${icon.slug}`}
+            className="flex aspect-square items-center justify-center rounded border p-2 transition duration-200 hover:bg-gray-true-50 focus:shadow-outline dark:hover:bg-gray-true-800/10"
+          >
+            <span
               dangerouslySetInnerHTML={{
                 __html: icon.html,
               }}
-              className="flex aspect-square items-center justify-center rounded border p-2 transition duration-200 hover:bg-gray-true-50 focus:shadow-outline dark:hover:bg-gray-true-800/10"
-              aria-label={icon.name}
-              asChild
-            >
-              <Link href={`/icons/${icon.slug}`} />
-            </Tooltip.Trigger>
-
-            <Tooltip.Positioner>
-              <Tooltip.Content className="rounded-md bg-gray-true-900 px-2.5 py-2 font-mono text-sm text-white data-open:animate-scalefade-in data-closed:animate-scalefade-out dark:bg-gray-true-50 dark:text-gray-true-800">
-                <Tooltip.Arrow
-                  className={twMerge(
-                    '[--arrow-size:theme(spacing.2)]',
-                    '[--arrow-background:theme(colors.gray-true[900])]',
-                    'dark:[--arrow-background:theme(colors.gray-true[100])]',
-                  )}
-                >
-                  <Tooltip.ArrowTip />
-                </Tooltip.Arrow>
-
-                {icon.name}
-              </Tooltip.Content>
-            </Tooltip.Positioner>
-          </Tooltip.Root>
+            />
+          </Link>
         ))}
       </div>
     </>