feat: new empty placeholder component

apps/dashboard/app/(app)/[...not-found]/page.tsx

@@ -1,18 +1,16 @@
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
+import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import Link from "next/link";
 export default function NotFound() {
   return (
-    <EmptyPlaceholder className="my-4 ">
-      <EmptyPlaceholder.Title>404 Not Found</EmptyPlaceholder.Title>
-      <EmptyPlaceholder.Description>
-        We couldn't find the page that you're looking for!
-      </EmptyPlaceholder.Description>
-      <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
+    <Empty>
+      <Empty.Title>404 Not Found</Empty.Title>
+      <Empty.Description>We couldn't find the page that you're looking for!</Empty.Description>
+      <Empty.Actions>
         <Link href="/">
           <Button variant="default">Go Back</Button>
         </Link>
-      </div>
-    </EmptyPlaceholder>
+      </Empty.Actions>
+    </Empty>
   );
 }

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx

@@ -8,7 +8,6 @@ import { CreateNewRole } from "@/app/(app)/authorization/roles/create-new-role";
 import { StackedColumnChart } from "@/components/dashboard/charts";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
@@ -20,8 +19,9 @@ import { clickhouse } from "@/lib/clickhouse";
 import { and, db, eq, isNull, schema } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
 import { Nodes } from "@unkey/icons";
+import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
-import { BarChart, Minus } from "lucide-react";
+import { Minus } from "lucide-react";
 import ms from "ms";
 import { notFound } from "next/navigation";
 import PermissionTree from "./permission-list";
@@ -373,15 +373,11 @@ export default async function APIKeyDetailPage(props: {
                 </CardContent>
               </Card>
             ) : (
-              <EmptyPlaceholder>
-                <EmptyPlaceholder.Icon>
-                  <BarChart />
-                </EmptyPlaceholder.Icon>
-                <EmptyPlaceholder.Title>Not used</EmptyPlaceholder.Title>
-                <EmptyPlaceholder.Description>
-                  This key was not used in the last {interval}
-                </EmptyPlaceholder.Description>
-              </EmptyPlaceholder>
+              <Empty>
+                <Empty.Icon />
+                <Empty.Title>Not used</Empty.Title>
+                <Empty.Description>This key was not used in the last {interval}</Empty.Description>
+              </Empty>
             )}
 
             {latestVerifications.val && latestVerifications.val.length > 0 ? (

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx

@@ -1,10 +1,10 @@
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import BackButton from "@/components/ui/back-button";
 import { Badge } from "@/components/ui/badge";
 import { db } from "@/lib/db";
+import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
-import { ChevronRight, Scan, User, VenetianMask } from "lucide-react";
+import { ChevronRight, User, VenetianMask } from "lucide-react";
 import Link from "next/link";
 
 type Props = {
@@ -59,19 +59,17 @@ export const Keys: React.FC<Props> = async ({ keyAuthId, apiId }) => {
   return (
     <div className="flex flex-col gap-8 mb-20 ">
       {keys.length === 0 ? (
-        <EmptyPlaceholder>
-          <EmptyPlaceholder.Icon>
-            <Scan />
-          </EmptyPlaceholder.Icon>
-          <EmptyPlaceholder.Title>No keys found</EmptyPlaceholder.Title>
-          <EmptyPlaceholder.Description>Create your first key</EmptyPlaceholder.Description>
-          <div className="flex flex-row">
+        <Empty>
+          <Empty.Icon />
+          <Empty.Title>No keys found</Empty.Title>
+          <Empty.Description>Create your first key</Empty.Description>
+          <Empty.Actions>
             <CreateKeyButton apiId={apiId} keyAuthId={keyAuthId!} />
             <BackButton className="ml-4">Go Back</BackButton>
-          </div>
+          </Empty.Actions>
 
           {/* <CreateNewRole trigger={<Button variant="primary">Create New Role</Button>} /> */}
-        </EmptyPlaceholder>
+        </Empty>
       ) : (
         Object.entries(keysByOwnerId).map(([ownerId, ks]) => (
           <div className="flex flex-col gap-2">

apps/dashboard/app/(app)/apis/[apiId]/page.tsx

@@ -1,7 +1,6 @@
 import { AreaChart, StackedColumnChart } from "@/components/dashboard/charts";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { CreateKeyButton } from "@/components/dashboard/create-key-button";
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
 import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
@@ -14,7 +13,7 @@ import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
 import { Nodes } from "@unkey/icons";
-import { BarChart } from "lucide-react";
+import { Empty } from "@unkey/ui";
 import { redirect } from "next/navigation";
 import { navigation } from "./constants";
 import { type Interval, IntervalSelect } from "./select";
@@ -246,15 +245,11 @@ export default async function ApiPage(props: {
               </CardContent>
             </Card>
           ) : (
-            <EmptyPlaceholder>
-              <EmptyPlaceholder.Icon>
-                <BarChart />
-              </EmptyPlaceholder.Icon>
-              <EmptyPlaceholder.Title>No usage</EmptyPlaceholder.Title>
-              <EmptyPlaceholder.Description>
-                Verify a key or change the range
-              </EmptyPlaceholder.Description>
-            </EmptyPlaceholder>
+            <Empty>
+              <Empty.Icon />
+              <Empty.Title>No usage</Empty.Title>
+              <Empty.Description>Verify a key or change the range</Empty.Description>
+            </Empty>
           )}
 
           <Separator className="my-8" />
@@ -290,15 +285,11 @@ export default async function ApiPage(props: {
               </CardContent>
             </Card>
           ) : (
-            <EmptyPlaceholder>
-              <EmptyPlaceholder.Icon>
-                <BarChart />
-              </EmptyPlaceholder.Icon>
-              <EmptyPlaceholder.Title>No usage</EmptyPlaceholder.Title>
-              <EmptyPlaceholder.Description>
-                Verify a key or change the range
-              </EmptyPlaceholder.Description>
-            </EmptyPlaceholder>
+            <Empty>
+              <Empty.Icon />
+              <Empty.Title>No usage</Empty.Title>
+              <Empty.Description>Verify a key or change the range</Empty.Description>
+            </Empty>
           )}
         </div>
       </PageContent>

apps/dashboard/app/(app)/apis/client.tsx

@@ -1,10 +1,10 @@
 "use client";
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { PostHogIdentify } from "@/providers/PostHogProvider";
 import { useUser } from "@clerk/nextjs";
+import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
-import { BookOpen, Code, Search } from "lucide-react";
+import { BookOpen, Search } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { CreateApiButton } from "./create-api-button";
@@ -76,24 +76,22 @@ export function ApiList({ apis }: { apis: ApiWithKeys }) {
           ))}
         </ul>
       ) : (
-        <EmptyPlaceholder className="my-4 ">
-          <EmptyPlaceholder.Icon>
-            <Code />
-          </EmptyPlaceholder.Icon>
-          <EmptyPlaceholder.Title>No APIs found</EmptyPlaceholder.Title>
-          <EmptyPlaceholder.Description>
+        <Empty>
+          <Empty.Icon />
+          <Empty.Title>No APIs found</Empty.Title>
+          <Empty.Description>
             You haven&apos;t created any APIs yet. Create one to get started.
-          </EmptyPlaceholder.Description>
-          <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
+          </Empty.Description>
+          <Empty.Actions>
             <CreateApiButton key="createApi" />
             <Link href="/docs" target="_blank">
               <Button>
                 <BookOpen />
                 Read the docs
               </Button>
             </Link>
-          </div>
-        </EmptyPlaceholder>
+          </Empty.Actions>
+        </Empty>
       )}
     </div>
   );

apps/dashboard/app/(app)/audit/components/table/audit-log-table-client.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { VirtualTable } from "@/components/virtual-table";
 import { trpc } from "@/lib/trpc/client";
+import { Empty } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { useState } from "react";
 import { useAuditLogParams } from "../../query-state";
@@ -78,17 +78,13 @@ export const AuditLogTableClient = () => {
 
   if (isError) {
     return (
-      <EmptyPlaceholder>
-        <div className="w-[400px] mx-auto flex gap-2 items-center flex-col">
-          <div className="text-center">
-            <div className="font-medium mb-1">Failed to load audit logs</div>
-            <div className="text-sm text-muted-foreground">
-              There was a problem fetching the audit logs. Please try refreshing the page or contact
-              support if the issue persists.
-            </div>
-          </div>
-        </div>
-      </EmptyPlaceholder>
+      <Empty>
+        <Empty.Title>Failed to load audit logs</Empty.Title>
+        <Empty.Description>
+          There was a problem fetching the audit logs. Please try refreshing the page or contact
+          support if the issue persists.
+        </Empty.Description>
+      </Empty>
     );
   }
 

apps/dashboard/app/(app)/audit/page.tsx

@@ -1,8 +1,8 @@
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { getTenantId } from "@/lib/auth";
-import { InputSearch, Ufo } from "@unkey/icons";
+import { InputSearch } from "@unkey/icons";
+import { Empty } from "@unkey/ui";
 import { type SearchParams, getWorkspace, parseFilterParams } from "./actions";
 import { Filters } from "./components/filters";
 import { AuditLogTableClient } from "./components/table/audit-log-table-client";
@@ -38,16 +38,14 @@ export default async function AuditPage(props: Props) {
             <AuditLogTableClient />
           </main>
         ) : (
-          <EmptyPlaceholder>
-            <EmptyPlaceholder.Icon>
-              <Ufo />
-            </EmptyPlaceholder.Icon>
-            <EmptyPlaceholder.Title>No logs</EmptyPlaceholder.Title>
-            <EmptyPlaceholder.Description>
+          <Empty>
+            <Empty.Icon />
+            <Empty.Title>No logs</Empty.Title>
+            <Empty.Description>
               There are no audit logs available yet. Create a key or another resource and come back
               here.
-            </EmptyPlaceholder.Description>
-          </EmptyPlaceholder>
+            </Empty.Description>
+          </Empty>
         )}
       </PageContent>
     </div>

apps/dashboard/app/(app)/authorization/permissions/page.tsx

@@ -1,4 +1,3 @@
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
 import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
@@ -7,8 +6,9 @@ import { getTenantId } from "@/lib/auth";
 import { asc, db } from "@/lib/db";
 import { permissions } from "@unkey/db/src/schema";
 import { ShieldKey } from "@unkey/icons";
+import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
-import { ChevronRight, Scan } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
@@ -80,18 +80,16 @@ export default async function RolesPage() {
         <div className="mt-8 mb-20 overflow-x-auto">
           <div className="flex items-center justify-between flex-1 space-x-2 w-full">
             {workspace.permissions.length === 0 ? (
-              <EmptyPlaceholder className="w-full">
-                <EmptyPlaceholder.Icon>
-                  <Scan />
-                </EmptyPlaceholder.Icon>
-                <EmptyPlaceholder.Title>No permissions found</EmptyPlaceholder.Title>
-                <EmptyPlaceholder.Description>
-                  Create your first permission
-                </EmptyPlaceholder.Description>
-                <CreateNewPermission
-                  trigger={<Button variant="primary">Create New Permission</Button>}
-                />
-              </EmptyPlaceholder>
+              <Empty>
+                <Empty.Icon />
+                <Empty.Title>No permissions found</Empty.Title>
+                <Empty.Description>Create your first permission</Empty.Description>
+                <Empty.Actions>
+                  <CreateNewPermission
+                    trigger={<Button variant="primary">Create New Permission</Button>}
+                  />
+                </Empty.Actions>
+              </Empty>
             ) : (
               <ul className="flex flex-col overflow-hidden border divide-y rounded-lg divide-border bg-background border-border w-full">
                 {workspace.permissions.map((p) => (

apps/dashboard/app/(app)/authorization/roles/page.tsx

@@ -1,13 +1,13 @@
-import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Navbar as SubMenu } from "@/components/dashboard/navbar";
 import { Navbar } from "@/components/navbar";
 import { PageContent } from "@/components/page-content";
 import { Badge } from "@/components/ui/badge";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { ShieldKey } from "@unkey/icons";
+import { Empty } from "@unkey/ui";
 import { Button } from "@unkey/ui";
-import { ChevronRight, Scan } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { navigation } from "../constants";
@@ -83,17 +83,17 @@ export default async function RolesPage() {
         <div className="mt-8 mb-20 overflow-x-auto">
           <div className="flex flex-col gap-8 mb-20 ">
             {workspace.roles.length === 0 ? (
-              <EmptyPlaceholder>
-                <EmptyPlaceholder.Icon>
-                  <Scan />
-                </EmptyPlaceholder.Icon>
-                <EmptyPlaceholder.Title>No roles found</EmptyPlaceholder.Title>
-                <EmptyPlaceholder.Description>Create your first role</EmptyPlaceholder.Description>
-                <CreateNewRole
-                  trigger={<Button variant="primary">Create New Role</Button>}
-                  permissions={workspace.permissions}
-                />
-              </EmptyPlaceholder>
+              <Empty>
+                <Empty.Icon />
+                <Empty.Title>No roles found</Empty.Title>
+                <Empty.Description>Create your first role</Empty.Description>
+                <Empty.Actions>
+                  <CreateNewRole
+                    trigger={<Button variant="primary">Create New Role</Button>}
+                    permissions={workspace.permissions}
+                  />
+                </Empty.Actions>
+              </Empty>
             ) : (
               <ul className="flex flex-col overflow-hidden border divide-y rounded-lg divide-border bg-background border-border">
                 {workspace.roles.map((r) => (