Added API limit UI counter

app/(dashboard)/layout.tsx

@@ -1,11 +1,14 @@
 import Navbar from "@/components/navbar";
 import { Sidebar } from "@/components/sidebar";
+import { getApiLimitCount } from "@/lib/api-limit";
 
 const DashboardLayout = async ({ children }: { children: React.ReactNode }) => {
+    const apiLimitCount = await getApiLimitCount();
+
     return (
         <div className="h-full relative">
             <div className="hidden h-full md:flex md:w-72 md:flex-col md:fixed md:inset-y-0 z-[80] bg-gray-900">
-                <Sidebar />
+                <Sidebar apiLimitCount={apiLimitCount} />
             </div>
             <main className="md:pl-72 pb-10">
                 <Navbar />

app/globals.css

@@ -25,7 +25,7 @@ body,
     --border: 220 13% 91%;
     --input: 220 13% 91%;
 
-    --primary: 220.9 39.3% 11%;
+    --primary: 248 90% 66%;
     --primary-foreground: 210 20% 98%;
 
     --secondary: 220 14.3% 95.9%;

components/free-counter.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { Zap } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { MAX_FREE_COUNTS } from "@/constants";
+// import { useProModal } from "@/hooks/use-pro-modal";
+
+interface FreeCounterProps {
+    isPro?: boolean;
+    apiLimitCount: number;
+}
+
+export const FreeCounter: React.FC<FreeCounterProps> = ({ isPro = false, apiLimitCount = 0 }) => {
+    const [mounted, setMounted] = useState(false);
+    // const proModal = useProModal();
+
+    useEffect(() => setMounted(true), []);
+
+    if (!mounted) return null
+
+    if (isPro) return null
+
+    return (
+        <div className="px-3">
+            <Card className="bg-white/10 border-0">
+                <CardContent className="py-6">
+                    <div className="text-center text-sm text-white mb-4 space-y-2">
+                        <p>
+                            {apiLimitCount} / {MAX_FREE_COUNTS} Free Generations
+                        </p>
+                        <Progress className="h-3" value={(apiLimitCount / MAX_FREE_COUNTS) * 100} />
+                    </div>
+                    <Button variant="premium" className="w-full">
+                        Upgrade
+                        <Zap className="w-4 h-4 ml-2 fill-white" />
+                    </Button>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

components/mobile-sidebar.tsx

@@ -7,7 +7,11 @@ import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Sidebar } from "@/components/sidebar";
 
-export const MobileSidebar = () => {
+interface MobileSidebarProps {
+    apiLimitCount: number
+}
+
+export const MobileSidebar: React.FC<MobileSidebarProps> = ({ apiLimitCount }) => {
     const [isMounted, setIsMounted] = useState(false);
 
     useEffect(() => setIsMounted(true), []);
@@ -22,7 +26,7 @@ export const MobileSidebar = () => {
                 </Button>
             </SheetTrigger>
             <SheetContent side="left" className="p-0">
-                <Sidebar />
+                <Sidebar apiLimitCount={apiLimitCount} />
             </SheetContent>
         </Sheet>
     );

components/navbar.tsx

@@ -1,12 +1,14 @@
 import { UserButton } from "@clerk/nextjs";
 
 import { MobileSidebar } from "@/components/mobile-sidebar";
+import { getApiLimitCount } from "@/lib/api-limit";
 
 const Navbar: React.FC = async () => {
+    const apiLimitCount = await getApiLimitCount();
 
     return (
         <div className="flex items-center p-4">
-            <MobileSidebar />
+            <MobileSidebar apiLimitCount={apiLimitCount} />
             <div className="flex w-full justify-end">
                 <UserButton afterSignOutUrl="/" />
             </div>

components/sidebar.tsx

@@ -8,6 +8,8 @@ import { usePathname } from "next/navigation";
 
 import { cn } from "@/lib/utils";
 
+import { FreeCounter } from "./free-counter";
+
 const montserrat = Montserrat({ weight: '600', subsets: ['latin'] });
 
 const routes = [
@@ -54,7 +56,11 @@ const routes = [
     },
 ];
 
-export const Sidebar = () => {
+interface SidebarProps {
+    apiLimitCount: number;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({ apiLimitCount = 0 }) => {
     const pathname = usePathname();
 
     return (
@@ -86,6 +92,11 @@ export const Sidebar = () => {
                     ))}
                 </div>
             </div>
+
+            <FreeCounter
+                apiLimitCount={apiLimitCount}
+            // isPro={isPro}
+            />
         </div>
     );
 };

components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+    React.ElementRef<typeof ProgressPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+    <ProgressPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+            className
+        )}
+        {...props}
+    >
+        <ProgressPrimitive.Indicator
+            className="h-full w-full flex-1 bg-primary transition-all"
+            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+    </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }