calls page minor mod

app/(dashboard)/dashboard/calling/page.tsx

@@ -5,9 +5,9 @@ import { db } from "@/lib/db"
 import { getCurrentUser } from "@/lib/session"
 import { EmptyPlaceholder } from "@/components/empty-placeholder"
 import { DashboardHeader } from "@/components/header"
-import { PostCreateButton } from "@/components/post-create-button"
 import { PostItem } from "@/components/post-item"
 import { DashboardShell } from "@/components/shell"
+import { CallCreateButton } from "@/components/call-create-button"
 
 export const metadata = {
   title: "Dashboard",
@@ -38,20 +38,11 @@ export default async function DashboardPage() {
   return (
     <DashboardShell>
       <DashboardHeader heading="Calls" text="Create and manage calls.">
-        <PostCreateButton />
+        <CallCreateButton />
       </DashboardHeader>
       <div>
-    
-          <EmptyPlaceholder>
-            <EmptyPlaceholder.Icon name="post" />
-            <EmptyPlaceholder.Title>No calls created</EmptyPlaceholder.Title>
-            <EmptyPlaceholder.Description>
-              You don&apos;t have any calls yet.
-            </EmptyPlaceholder.Description>
-            <PostCreateButton variant="outline" />
-          </EmptyPlaceholder>
-        
+
       </div>
     </DashboardShell>
   )
-}
+}

components/call-create-button.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { toast } from "@/components/ui/use-toast"
+import { Icons } from "@/components/icons"
+
+interface CallCreateButtonProps extends ButtonProps {}
+
+export function CallCreateButton({
+  className,
+  variant,
+  ...props
+}: CallCreateButtonProps) {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = React.useState<boolean>(false)
+    // Function that returns a promise which resolves after the specified delay
+  const timeout = (ms: number): Promise<void> => {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+  async function onClick() {
+    setIsLoading(true)
+
+    await timeout(1000);
+
+    setIsLoading(false)
+
+
+
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        buttonVariants({ variant }),
+        {
+          "cursor-not-allowed opacity-60": isLoading,
+        },
+        className
+      )}
+      disabled={isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+      ) : (
+        <Icons.add className="mr-2 h-4 w-4" />
+      )}
+      New call
+    </button>
+  )
+}