feat: ✨ created dashboard page

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

@@ -1,11 +1,84 @@
-import { Locale } from "@/i18n";
-import { UserButton } from "@clerk/nextjs";
+"use client";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import {
+  ArrowRight,
+  Code,
+  ImageIcon,
+  MessageSquare,
+  Music,
+  VideoIcon,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+
+const tools = [
+  {
+    label: "Conversation",
+    icon: MessageSquare,
+    color: "text-violet-500",
+    bgColor: "bg-violet-500/10",
+    href: "/conversation",
+  },
+  {
+    label: "Image Generation",
+    icon: ImageIcon,
+    color: "text-pink-700",
+    bgColor: "bg-pink-700/10",
+    href: "/image",
+  },
+  {
+    label: "Video Generation",
+    icon: VideoIcon,
+    color: "text-orange-700",
+    bgColor: "bg-orange-700/10",
+    href: "/video",
+  },
+  {
+    label: "Music Generation",
+    icon: Music,
+    color: "text-emerald-500",
+    bgColor: "bg-emerald-500/10",
+    href: "/music",
+  },
+  {
+    label: "Code Generation",
+    icon: Code,
+    color: "text-grenn-700",
+    bgColor: "bg-grenn-700/10",
+    href: "/music",
+  },
+];
+
+export default function Dashboard() {
+  const router = useRouter();
 
-export default function Dashboard({ params }: { params: { locale: Locale } }) {
   return (
     <div>
-      <p>Dashboard Page</p>
-      <UserButton afterSignOutUrl="/" />
+      <div className="mb-8 space-y-4">
+        <h2 className="text-2xl md:text-4xl font-bold text-center">
+          Explore the power of AI
+        </h2>
+        <p className="text-muted-foreground font-light text-sm md:text-lg text-center">
+          Chat with the smartest AI - Experience the power of AI
+        </p>
+      </div>
+      <div className="px-4 md:px-20 lg:px-32 space-y-4">
+        {tools.map((tool) => (
+          <Card
+            onClick={() => router.push(tool.href)}
+            className="p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer"
+            key={tool.href}
+          >
+            <div className="flex items-center space-x-4">
+              <div className={cn("p-2 w-fit rounded-md", tool.color)}>
+                <tool.icon className={cn("w-8 h-8", tool.color)} />
+              </div>
+              <div className="font-semibold">{tool.label}</div>
+            </div>
+            <ArrowRight className="w-4 h-4" />
+          </Card>
+        ))}
+      </div>
     </div>
   );
 }

components/mobile-sidebar.tsx

@@ -7,13 +7,13 @@ import { Sidebar } from "@/components/sidebar";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 
-export const MobileSidebar = ({
+export function MobileSidebar({
   apiLimitCount = 0,
   isPro = false,
 }: {
   apiLimitCount: number;
   isPro: boolean;
-}) => {
+}) {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
@@ -36,4 +36,4 @@ export const MobileSidebar = ({
       </SheetContent>
     </Sheet>
   );
-};
+}

components/sidebar.tsx

@@ -35,41 +35,42 @@ const routes = [
   {
     label: "Image Generation",
     icon: ImageIcon,
-    color: "text-pink-700",
     href: "/image",
+    color: "text-pink-700",
   },
   {
     label: "Video Generation",
     icon: VideoIcon,
-    color: "text-orange-700",
     href: "/video",
+    color: "text-orange-700",
   },
   {
     label: "Music Generation",
     icon: Music,
-    color: "text-emerald-500",
     href: "/music",
+    color: "text-emerald-500",
   },
   {
     label: "Code Generation",
     icon: Code,
-    color: "text-green-700",
     href: "/code",
+    color: "text-green-700",
   },
   {
     label: "Settings",
     icon: Settings,
     href: "/settings",
+    // color: "text-zinc-400",
   },
 ];
 
-export const Sidebar = ({
+export function Sidebar({
   apiLimitCount = 0,
   isPro = false,
 }: {
   apiLimitCount: number;
   isPro: boolean;
-}) => {
+}) {
   const pathname = usePathname();
 
   return (
@@ -106,4 +107,4 @@ export const Sidebar = ({
       <FreeCounter apiLimitCount={apiLimitCount} isPro={isPro} />
     </div>
   );
-};
+}