import { Plus } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; export default function DashboardPage() { const totalSpaces = 1; // This will be dynamic based on actual spaces const totalVideos = 0; const currentPlan = "Starter"; return ( <div className="p-6"> <div className="mb-7"> <h1 className="text-4xl font-bold mb-4 text-center">Dashboard</h1> </div> <div className="mb-8"> <h2 className="text-2xl font-bold mb-4">Overview</h2> <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"> <Card className="p-4"> <h3 className="text-sm font-medium">Total Videos</h3> <p className="text-2xl font-bold">{totalVideos}/2</p> </Card> <Card className="p-4"> <h3 className="text-sm font-medium">Total Spaces</h3> <p className="text-2xl font-bold">{totalSpaces}</p> </Card> <Card className="p-4"> <h3 className="text-sm font-medium">Current Plan</h3> <div className="flex items-center justify-between"> <p className="text-2xl font-bold">{currentPlan}</p> <Button variant="outline" size="sm"> ✨ Upgrade </Button> </div> </Card> </div> </div> <div> <div className="flex items-center justify-between mb-4"> <h2 className="text-2xl font-bold">Spaces</h2> <Button> <Plus className="mr-2 h-4 w-4" /> Create a new space </Button> </div> <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"> <Card className="p-4"> <div className="flex items-center justify-between mb-4"> <div className="flex items-center space-x-4"> <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center"> G </div> <div> <h3 className="font-semibold">GeniusGPT</h3> <p className="text-sm text-gray-500">Videos: 0 • Text: 3</p> </div> </div> <Button variant="outline" size="sm"> Edit </Button> </div> </Card> </div> </div> </div> ); }