[V0_FILE]typescript:file="hooks/use-mobile.ts" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export const useMobile = () => { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768) // Adjust breakpoint as needed } // Set initial value handleResize() // Listen for window resize events window.addEventListener("resize", handleResize) // Clean up event listener on unmount return () => { window.removeEventListener("resize", handleResize) } }, []) return isMobile } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "framer-motion": "^11.0.0" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight, Bell, Home, Calendar, Dumbbell, User, Flame, Clock, Users, Plus, Edit, Trash2, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { motion } from "framer-motion" import { EventForm } from "@/components/event-form" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" // Types interface TimeSlot { id: number time: string duration: string spots: string type: string intensity: string instructor: string full?: boolean } interface Attendee { id: number name: string confirmed: boolean avatar: string streak: number } // Mock data for available time slots const initialTimeSlots: { [key: string]: TimeSlot[] } = { "2025-03-23": [ { id: 1, time: "07:00 AM", duration: "60 min", spots: "8/12 spots", type: "HIIT", intensity: "High", instructor: "Sarah Johnson", }, { id: 2, time: "09:00 AM", duration: "45 min", spots: "10/15 spots", type: "Yoga", intensity: "Medium", instructor: "Mike Chen", }, { id: 3, time: "11:30 AM", duration: "30 min", spots: "5/10 spots", type: "Strength", intensity: "High", instructor: "Lisa Wong", }, ], "2025-03-24": [ { id: 4, time: "07:00 AM", duration: "60 min", spots: "8/12 spots", type: "CrossFit", intensity: "High", instructor: "David Kim", }, { id: 5, time: "09:00 AM", duration: "45 min", spots: "10/15 spots", type: "Pilates", intensity: "Medium", instructor: "Emma Davis", }, { id: 6, time: "11:30 AM", duration: "30 min", spots: "0/10 spots", type: "Spin", intensity: "High", instructor: "James Wilson", full: true, }, ], "2025-03-25": [ { id: 7, time: "08:00 AM", duration: "45 min", spots: "6/12 spots", type: "Boxing", intensity: "High", instructor: "Olivia Martinez", }, { id: 8, time: "10:30 AM", duration: "60 min", spots: "4/10 spots", type: "Yoga", intensity: "Low", instructor: "Sarah Johnson", }, { id: 9, time: "04:00 PM", duration: "30 min", spots: "7/8 spots", type: "HIIT", intensity: "Medium", instructor: "Mike Chen", }, ], } // Mock attendees data const mockAttendees: Attendee[] = [ { id: 1, name: "Emma Thompson", confirmed: true, avatar: "/placeholder.svg?height=40&width=40", streak: 15 }, { id: 2, name: "Michael Chen", confirmed: true, avatar: "/placeholder.svg?height=40&width=40", streak: 8 }, { id: 3, name: "Sarah Johnson", confirmed: false, avatar: "/placeholder.svg?height=40&width=40", streak: 3 }, { id: 4, name: "David Kim", confirmed: true, avatar: "/placeholder.svg?height=40&width=40", streak: 22 }, ] // Color mapping for workout types const workoutColors: { [key: string]: string } = { HIIT: "from-orange-500 to-red-500", Yoga: "from-blue-400 to-indigo-500", Strength: "from-emerald-500 to-green-600", CrossFit: "from-purple-500 to-pink-500", Pilates: "from-cyan-400 to-blue-500", Spin: "from-yellow-400 to-orange-500", Boxing: "from-red-500 to-rose-600", } export default function FitnessBookingApp() { const [timeSlots, setTimeSlots] = useState<{ [key: string]: TimeSlot[] }>(initialTimeSlots) const [selectedDate, setSelectedDate] = useState("2025-03-24") const [userRSVPd, setUserRSVPd] = useState<{ [key: number]: boolean }>({}) const [activeTab, setActiveTab] = useState("home") const [animateCalendar, setAnimateCalendar] = useState(false) const [isAdmin, setIsAdmin] = useState(false) const [editingEvent, setEditingEvent] = useState(null) const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false) const [eventToDelete, setEventToDelete] = useState(null) // Calendar data const month = "March 2025" const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] const dates = [ { day: 23, date: "2025-03-23" }, { day: 24, date: "2025-03-24" }, { day: 25, date: "2025-03-25" }, { day: 26, date: "2025-03-26" }, { day: 27, date: "2025-03-27" }, { day: 28, date: "2025-03-28" }, { day: 29, date: "2025-03-29" }, ] const availableTimeSlots = timeSlots[selectedDate as keyof typeof timeSlots] || [] const handleRSVP = (timeSlotId: number) => { setUserRSVPd((prev) => ({ ...prev, [timeSlotId]: !prev[timeSlotId], })) } useEffect(() => { setAnimateCalendar(true) const timer = setTimeout(() => setAnimateCalendar(false), 500) return () => clearTimeout(timer) }, [selectedDate]) // Get intensity color const getIntensityColor = (intensity: string) => { switch (intensity) { case "High": return "text-red-500" case "Medium": return "text-amber-500" case "Low": return "text-green-500" default: return "text-gray-500" } } // Handle creating a new event const handleCreateEvent = (event: TimeSlot) => { // Generate a new ID (in a real app, this would come from the backend) const newId = Math.max( ...Object.values(timeSlots) .flat() .map((slot) => slot.id), 0, ) + 1 const newEvent = { ...event, id: newId } setTimeSlots((prev) => { const updatedSlots = { ...prev } if (!updatedSlots[selectedDate]) { updatedSlots[selectedDate] = [] } updatedSlots[selectedDate] = [...updatedSlots[selectedDate], newEvent] return updatedSlots }) } // Handle updating an event const handleUpdateEvent = (event: TimeSlot) => { setTimeSlots((prev) => { const updatedSlots = { ...prev } if (updatedSlots[selectedDate]) { updatedSlots[selectedDate] = updatedSlots[selectedDate].map((slot) => (slot.id === event.id ? event : slot)) } return updatedSlots }) setEditingEvent(null) } // Handle deleting an event const handleDeleteEvent = (id: number) => { setTimeSlots((prev) => { const updatedSlots = { ...prev } if (updatedSlots[selectedDate]) { updatedSlots[selectedDate] = updatedSlots[selectedDate].filter((slot) => slot.id !== id) } return updatedSlots }) setEventToDelete(null) setIsDeleteConfirmOpen(false) } // Open delete confirmation const confirmDelete = (id: number) => { setEventToDelete(id) setIsDeleteConfirmOpen(true) } return (

{/* Header */}

FitSync

Admin Mode

Book your next fitness adventure

Book Classes {isAdmin && ( Manage Events )} {/* Calendar Module */}

{month}

{/* Days of week */}

{daysOfWeek.map((day) => (

{day}

))}

{/* Calendar dates */}

{dates.map((date) => ( setSelectedDate(date.date)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} animate={animateCalendar && selectedDate === date.date ? { scale: [1, 1.1, 1] } : {}} > {date.day} ))}

{/* Available Sessions */}

Available Sessions

{isAdmin && ( )}

{availableTimeSlots.length > 0 ? ( availableTimeSlots.map((slot, index) => (

{slot.time} {slot.type}

{slot.duration}

{slot.spots}

{slot.intensity} Intensity Instructor: {slot.instructor}

{isAdmin ? ( <> ) : ( )}

)) ) : (

No events scheduled for this date

{isAdmin && ( )}

)}

{/* Attendees */}

Attendees ({mockAttendees.length})

See All

{mockAttendees.map((attendee, index) => (

{attendee.name .split(" ") .map((n) => n[0]) .join("")}

{attendee.name}

{attendee.confirmed && ( confirmed )}

{attendee.streak} streak

))}

{isAdmin && (

Event Management

Create, edit, and manage fitness events for your members. You can add new events, update existing ones, or remove events that are no longer needed.

Events for {selectedDate}

{availableTimeSlots.length > 0 ? (

{availableTimeSlots.map((slot) => (

{slot.time} - {slot.type}

{slot.duration} • {slot.instructor} • {slot.spots}

))}

) : (

No events scheduled for this date

)}

)} {/* Delete Confirmation Dialog */} {/* Bottom Navigation */}

{[ { icon: Home, label: "Home", id: "home" }, { icon: Calendar, label: "Schedule", id: "schedule" }, { icon: Dumbbell, label: "Workouts", id: "workouts" }, { icon: User, label: "Profile", id: "profile" }, ].map((item) => ( ))}

) } [V0_FILE]typescriptreact:file="components/event-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface TimeSlot { id: number time: string duration: string spots: string type: string intensity: string instructor: string full?: boolean } interface EventFormProps { onSubmit: (event: TimeSlot) => void initialData?: TimeSlot } export function EventForm({ onSubmit, initialData }: EventFormProps) { const [formData, setFormData] = useState>( initialData || { id: 0, time: "", duration: "45 min", spots: "0/15 spots", type: "HIIT", intensity: "Medium", instructor: "", }, ) const handleChange = (field: keyof TimeSlot, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit(formData as TimeSlot) } return (

{initialData ? "Edit Event" : "Create New Event"}

Time handleChange("time", e.target.value)} required />

Instructor handleChange("instructor", e.target.value)} required />

Duration

Capacity

Class Type

Intensity

) } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This