[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Navigation } from "@/components/navigation" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "User Registration App", description: "Modern user registration and dashboard", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/navigation.tsx" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" export function Navigation() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function HomePage() { const [formData, setFormData] = useState({ fullName: "", email: "", password: "", }) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate registration process await new Promise((resolve) => setTimeout(resolve, 1000)) // Reset form setFormData({ fullName: "", email: "", password: "" }) setIsLoading(false) // Redirect to dashboard router.push("/dashboard") } return (

Create your account

Join us today and get started with your journey

Already have an account?{" "} Sign in here

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" // Mock data for registered users const mockUsers = [ { id: 1, name: "John Doe", email: "john.doe@example.com", registeredAt: "2024-01-15", }, { id: 2, name: "Jane Smith", email: "jane.smith@example.com", registeredAt: "2024-01-14", }, { id: 3, name: "Mike Johnson", email: "mike.johnson@example.com", registeredAt: "2024-01-13", }, { id: 4, name: "Sarah Wilson", email: "sarah.wilson@example.com", registeredAt: "2024-01-12", }, { id: 5, name: "David Brown", email: "david.brown@example.com", registeredAt: "2024-01-11", }, ] export default function DashboardPage() { return (

Users Dashboard

Manage and view all registered users in your application

Total Users

{mockUsers.length}

+2 from last week

New This Week

+50% from last week

Active Users

{mockUsers.length}

All users active

Registered Users A list of all users who have registered for your application Name Email Registration Date Status {mockUsers.map((user) => ( {user.name} {user.email} {user.registeredAt} Active ))}

) }