[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import Sidebar from "./components/Sidebar" import Header from "./components/Header" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FitTrack Pro", description: "Your personal fitness companion", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/components/Sidebar.tsx" import Link from "next/link" import { Home, Dumbbell, Calendar, Users, Award, Settings } from "lucide-react" const menuItems = [ { icon: Home, text: "Dashboard", href: "/" }, { icon: Dumbbell, text: "Exercises", href: "/exercises" }, { icon: Calendar, text: "Workouts", href: "/workouts" }, { icon: Users, text: "Community", href: "/community" }, { icon: Award, text: "Achievements", href: "/achievements" }, { icon: Settings, text: "Settings", href: "/settings" }, ] export default function Sidebar() { return (

FitTrack Pro

) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" "use client" import { useState } from "react" import { Bell, Menu } from "lucide-react" export default function Header() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

FitTrack Pro

John Doe

) } [V0_FILE]typescriptreact:file="app/page.tsx" import DashboardStats from "./components/DashboardStats" import WorkoutProgress from "./components/WorkoutProgress" import RecentWorkouts from "./components/RecentWorkouts" import AIRecommendations from "./components/AIRecommendations" export default function Dashboard() { return (

Dashboard

) } [V0_FILE]typescriptreact:file="app/components/DashboardStats.tsx" import { Activity, Flame, Clock, TrendingUp } from "lucide-react" const stats = [ { name: "Workouts Completed", value: 12, icon: Activity, color: "bg-blue-500" }, { name: "Calories Burned", value: "3,500", icon: Flame, color: "bg-red-500" }, { name: "Total Time", value: "8h 30m", icon: Clock, color: "bg-green-500" }, { name: "Progress", value: "15%", icon: TrendingUp, color: "bg-purple-500" }, ] export default function DashboardStats() { return ( <> {stats.map((stat) => (

{stat.name}: {stat.value}

))} ) } [V0_FILE]typescriptreact:file="app/components/WorkoutProgress.tsx" "use client" import { useState } from "react" import { Bar } from "react-chartjs-2" import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js" ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend) const options = { responsive: true, plugins: { legend: { position: "top" as const, }, title: { display: true, text: "Weekly Workout Progress", }, }, } const labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] export default function WorkoutProgress() { const [data] = useState({ labels, datasets: [ { label: "Workout Duration (minutes)", data: labels.map(() => Math.floor(Math.random() * 60) + 30), backgroundColor: "rgba(53, 162, 235, 0.5)", }, ], }) return (

Workout Progress

) } [V0_FILE]typescriptreact:file="app/components/RecentWorkouts.tsx" import { Calendar } from "lucide-react" const workouts = [ { id: 1, name: "Full Body Workout", date: "2023-06-01", duration: "45 min" }, { id: 2, name: "Upper Body Strength", date: "2023-05-30", duration: "60 min" }, { id: 3, name: "HIIT Cardio", date: "2023-05-28", duration: "30 min" }, { id: 4, name: "Leg Day", date: "2023-05-26", duration: "50 min" }, ] export default function RecentWorkouts() { return (

Recent Workouts

{workout.name}

{workout.date}

{workout.duration}

View all workouts

) } [V0_FILE]typescriptreact:file="app/components/AIRecommendations.tsx" "use client" import { useState } from "react" import { Dumbbell, ChevronRight } from "lucide-react" const recommendations = [ { id: 1, name: "High-Intensity Interval Training", description: "Boost your metabolism and burn fat with this HIIT workout.", }, { id: 2, name: "Strength Training for Beginners", description: "Build muscle and improve overall strength with this beginner-friendly routine.", }, { id: 3, name: "Yoga for Flexibility", description: "Increase your flexibility and reduce stress with this calming yoga session.", }, ] export default function AIRecommendations() { const [expandedId, setExpandedId] = useState(null) const toggleExpand = (id: number) => { setExpandedId(expandedId === id ? null : id) } return (

AI-Powered Workout Recommendations

{recommendations.map((rec) => (

{expandedId === rec.id && (

{rec.description}

)}

))}

) } [V0_FILE]typescriptreact:file="app/exercises/page.tsx" "use client" import { useState } from "react" import { Search } from "lucide-react" const exercises = [ { id: 1, name: "Push-ups", category: "Strength", equipment: "Bodyweight", difficulty: "Beginner" }, { id: 2, name: "Squats", category: "Strength", equipment: "Bodyweight", difficulty: "Beginner" }, { id: 3, name: "Plank", category: "Core", equipment: "Bodyweight", difficulty: "Intermediate" }, { id: 4, name: "Lunges", category: "Strength", equipment: "Bodyweight", difficulty: "Beginner" }, { id: 5, name: "Burpees", category: "Cardio", equipment: "Bodyweight", difficulty: "Advanced" }, ] export default function Exercises() { const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState("All") const filteredExercises = exercises.filter( (exercise) => exercise.name.toLowerCase().includes(searchTerm.toLowerCase()) && (selectedCategory === "All" || exercise.category === selectedCategory), ) return (

Exercise Library

setSearchTerm(e.target.value)} />

{exercise.name}

{exercise.difficulty}

Category: {exercise.category}

Equipment: {exercise.equipment}

) }

Dashboard

Workout Progress

Recent Workouts

AI-Powered Workout Recommendations

Exercise Library

{exercise.name}

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This