lfg

app/(app)/showcase/page.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+
+import { ListSites } from "@/app/(app)/showcase/partials/list-sites"
+import { Header } from "@/components/header"
+import { siteConfig } from "@/resources/config/site"
+import type { Metadata } from "next"
+import { Container } from "ui"
+
+export const metadata: Metadata = {
+  title: "Showcase",
+  description: "A showcase of justd components, tools, and more.",
+  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? siteConfig.url),
+  applicationName: siteConfig.name
+}
+
+export default async function Page() {
+  const res = await fetch(
+    "https://raw.githubusercontent.com/justdlabs/showcase/refs/heads/main/sites.json"
+  )
+  const sites = await res.json()
+  return (
+    <>
+      <Header>
+        Show
+        <span className="text-muted-fg">case</span>
+      </Header>
+      <Container className="py-4 sm:py-16">
+        <ListSites sites={sites} />
+      </Container>
+    </>
+  )
+}

app/(app)/showcase/partials/list-sites.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+
+import { getSiteName } from "@/resources/lib/utils"
+import { Collection, ListBox as Primitive, ListBoxItem, Section, Text } from "react-aria-components"
+import { Avatar } from "ui"
+
+interface Props {
+  sites: {
+    name: string
+    url: string
+  }[]
+}
+
+export function ListSites({ sites }: Props) {
+  return (
+    <Primitive aria-label="Showcase">
+      <Section className="grid lg:grid-cols-4 sm:grid-cols-2 gap-4 lg:gap-6">
+        <Collection items={sites}>
+          {(item) => {
+            return (
+              <ListBoxItem
+                target="_blank"
+                className="flex items-center focus:outline-none focus-visible:ring-1 focus-visible:ring-ring gap-x-3 bg-secondary/70 hover:bg-secondary transition ring-1 ring-border rounded-lg px-3 py-2.5"
+                textValue={item.name}
+                href={item.url}
+                id={getSiteName(item.url)}
+              >
+                <Avatar
+                  size="medium"
+                  shape="square"
+                  src={`https://favicon.im/${item.url}`}
+                  alt="irsyad.co favicon (large)"
+                />
+                <div className="flex flex-col gap-y-0.5">
+                  <Text slot="label" className="font-medium lg:text-sm">
+                    {item.name}
+                  </Text>
+                  <Text slot="description" className="text-muted-fg text-xs">
+                    {item.url}
+                  </Text>
+                </div>
+              </ListBoxItem>
+            )
+          }}
+        </Collection>
+      </Section>
+    </Primitive>
+  )
+}

components/theme-provider.tsx

@@ -7,7 +7,7 @@ import { type ThemeProviderProps } from "next-themes/dist/types"
 
 const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
   return (
-    <NextThemesProvider storageKey="justd-theme" {...props}>
+    <NextThemesProvider enableSystem storageKey="justd-theme" {...props}>
       {children}
     </NextThemesProvider>
   )

components/ui/dropdown.tsx

@@ -114,7 +114,7 @@ const DropdownItemDetails = ({ label, description, classNames, ...props }: Dropd
   const { slot, children, title, ...restProps } = props
 
   return (
-    <div className="flex flex-col gap-1" {...restProps}>
+    <div className="flex flex-col gap-y-1" {...restProps}>
       {label && (
         <Text
           slot={slot ?? "label"}

components/ui/modal.tsx

@@ -29,10 +29,10 @@ const modalOverlayStyles = tv({
       false: "bg-dark/15 dark:bg-dark/40"
     },
     isEntering: {
-      true: "ease-out animate-in fade-in"
+      true: "motion-ease-out motion-duration-300 motion-opacity-in"
     },
     isExiting: {
-      true: "duration-200 ease-in animate-out fade-out"
+      true: "motion-ease-out motion-duration-200 motion-opacity-out"
     }
   }
 })
@@ -44,16 +44,25 @@ const modalContentStyles = tv({
   ],
   variants: {
     isEntering: {
+      // true: [
+      //   "animate-in ease-out duration-200 slide-in-from-bottom-[20%]",
+      //   "sm:slide-in-from-bottom-auto sm:slide-in-from-top-[80%] sm:slide-in-from-left-1/2"
+      // ]
       true: [
-        "animate-in ease-out duration-200 slide-in-from-bottom-[20%]",
-        "sm:slide-in-from-bottom-auto sm:slide-in-from-top-[80%] sm:slide-in-from-left-1/2"
+        "motion-blur-in-md motion-opacity-in",
+        "sm:motion-translate-y-in-[-25%] motion-duration-300",
+        "motion-translate-y-in-[25%]"
       ]
     },
     isExiting: {
       true: [
-        "duration-200 ease-in animate-out slide-out-to-bottom-56",
-        "sm:exiting:slide-out-to-top-[80%] sm:slide-out-to-left-1/2"
+        "sm:motion-translate-y-out-[-25%] motion-duration-200 motion-opacity-out",
+        "motion-translate-y-out-[25%]"
       ]
+      // true: [
+      //   "duration-200 ease-in animate-out slide-out-to-bottom-56",
+      //   "sm:exiting:slide-out-to-top-[80%] sm:slide-out-to-left-1/2"
+      // ]
     },
     size: {
       xs: "sm:max-w-xs",

components/ui/popover.tsx

@@ -58,11 +58,16 @@ const popoverContentStyles = tv({
     },
     isEntering: {
       true: [
-        "duration-50 ease-out animate-in fade-in placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1"
+        // "duration-50 ease-out animate-in fade-in placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 placement-top:slide-in-from-bottom-1 placement-bottom:slide-in-from-top-1",
+        "motion-ease-out motion-blur-in motion-duration-100",
+        "placement-left:motion-preset-slide-left placement-right:motion-preset-slide-right placement-top:motion-preset-slide-up placement-bottom:motion-preset-slide-down"
       ]
     },
     isExiting: {
-      true: "duration-50 ease-in animate-out fade-out placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 placement-top:slide-out-to-bottom-1 placement-bottom:slide-out-to-top-1"
+      true: [
+        "motion-duration-75 motion-ease-in-out-back"
+        // 'placement-left:motion-preset-slide-right-md placement-right:motion-preset-slide-left-md placement-top:motion-preset-slide-down-md placement-bottom:motion-preset-slide-up-md'
+      ]
     }
   }
 })

package.json

@@ -78,6 +78,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-motion": "^0.3.0-beta",
     "typescript": "^5.6.3",
     "velite": "0.1.0-beta.11"
   },

resources/lib/utils.ts

@@ -19,6 +19,10 @@ export function wait(number: number) {
   return new Promise((resolve) => setTimeout(resolve, number))
 }
 
+export function getSiteName(url: string): string {
+  return url.replace(/^(https?:\/\/)?(www\.)?/, "").split(".")[0]
+}
+
 export function extractAndFormat(url: string): string {
   const match = url.match(/\/([^/]+)\.html/)
   if (match) {

resources/types/global.d.ts

@@ -2,6 +2,8 @@ import "rehype-pretty-code"
 
 declare module "react-syntax-highlighter/dist/esm/styles/prism"
 
+// declare module "tailwindcss-motion"
+
 declare module "rehype-pretty-code" {
   interface Options {
     theme?: string