balls

components/kokonutui/content.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
+import OrderStats from "./order-stats"
+
+interface OrderStatsProps {
+  totalOrders: number;
+  pendingOrders: number;
+  completedOrders: number;
+  cancelledOrders: number;
+}
+
+interface ContentProps {
+  username: string;
+  orderStats: OrderStatsProps;
+}
+
+export default function Content({ username, orderStats }: ContentProps) {
+  const [greeting, setGreeting] = useState("");
+
+  useEffect(() => {
+    const hour = new Date().getHours();
+    if (hour < 12) {
+      setGreeting("Good morning");
+    } else if (hour < 18) {
+      setGreeting("Good afternoon");
+    } else {
+      setGreeting("Good evening");
+    }
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      {/* Dynamic Greeting */}
+      <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+        {greeting}, {username}!
+      </h1>
+
+      {/* Order Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <OrderStats
+          title="Total Orders"
+          value={orderStats.totalOrders.toLocaleString()}
+          icon={Package}
+        />
+                <OrderStats
+          title="Completed Orders"
+          value={orderStats.completedOrders.toLocaleString()}
+          icon={CheckCircle}
+        />
+        <OrderStats
+          title="Pending Orders"
+          value={orderStats.pendingOrders.toLocaleString()}
+          icon={Clock}
+        />
+        <OrderStats
+          title="Cancelled Orders"
+          value={orderStats.cancelledOrders.toLocaleString()}
+          icon={AlertTriangle}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2"></div>
+      </div>
+    </div>
+  );
+}