Placeholder empty state component.

app/(auth)/layout.tsx

@@ -15,13 +15,10 @@ export default function Layout({children}: { children: React.ReactNode }) {
     const router = useRouter();
     const { data: session } = useSession();
 
-
-
     if (session && session.user && !session.user.banned && session.user.role !== "pending") {
         router.replace("/dashboard/home");
     }
 
-
     useEffect(() => {
         setMounted(true);
     }, []);

app/(customer)/dashboard/(admin)/agents/page.tsx

@@ -9,6 +9,9 @@ import { db } from "@/db";
 import * as drizzleDb from "@/db";
 
 import {and, eq, not} from "drizzle-orm";
+import {Plus} from "lucide-react";
+import {cn} from "@/lib/utils";
+import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 export const dynamic = "force-dynamic";
 
 export default async function RoutePage(props: PageParams<{}>) {
@@ -38,12 +41,10 @@ export default async function RoutePage(props: PageParams<{}>) {
                 {agents.length > 0 ? (
                     <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1} />
                 ) : (
-                    <Link
+                    <EmptyStatePlaceholder
-                        href={"/dashboard/agents/new"}
+                        url={"/dashboard/agents/new"}
-                        className="  flex item-center justify-center border-2 border-dashed transition-colors border-primary p-8 lg:p-12 w-full rounded-md"
+                        text={"Create new Agent"}
-                    >
+                    />
-                        Create new Agent
-                    </Link>
                 )}
             </PageContent>
         </Page>

app/(customer)/dashboard/(organization)/projects/page.tsx

@@ -8,6 +8,7 @@ import {ProjectCard} from "@/components/wrappers/dashboard/projects/project-card
 import {db} from "@/db";
 import {notFound} from "next/navigation";
 import {getOrganization} from "@/lib/auth/auth";
+import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 
 export default async function RoutePage(props: PageParams<{ }>) {
 
@@ -46,12 +47,10 @@ export default async function RoutePage(props: PageParams<{ }>) {
                     <CardsWithPagination organizationSlug={organization.slug} data={projects} cardItem={ProjectCard}
                                          cardsPerPage={4} numberOfColumns={1}/>
                 ) : (
-                    <Link
+                    <EmptyStatePlaceholder
-                        href={`/dashboard/projects/new`}
+                        url={"/dashboard/projects/new"}
-                        className="  flex item-center justify-center border-2 border-dashed transition-colors border-primary p-8 lg:p-12 w-full rounded-md"
+                        text={"Create new Project"}
-                    >
+                    />
-                        Create new Project
-                    </Link>
                 )}
             </PageContent>
         </Page>

src/components/wrappers/common/empty-state-placeholder.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import {cn} from "@/lib/utils";
+import {Plus} from "lucide-react";
+
+type EmptyStatePlaceholderProps = {
+    url: string;
+    text: string;
+}
+
+
+export const EmptyStatePlaceholder = ({url, text}: EmptyStatePlaceholderProps) => {
+    return (
+        <Link
+            href={url}
+            className={cn(
+                "flex flex-col items-center justify-center w-full rounded-2xl border border-dashed border-muted p-6 lg:p-10",
+                "hover:bg-muted/50 transition-colors text-muted-foreground hover:text-primary text-center space-y-2"
+            )}
+        >
+            <Plus className="w-5 h-5 lg:w-6 lg:h-6"/>
+            <span className="text-sm lg:text-base font-medium">{text}</span>
+        </Link>
+    )
+}