Untitled
unknown
plain_text
16 days ago
2.6 kB
3
Indexable
import React, { useState } from 'react'; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { motion } from "framer-motion"; const buses = [ { id: 1, name: "City Express", time: "10:00 AM", seats: 5 }, { id: 2, name: "Night Rider", time: "8:00 PM", seats: 4 }, { id: 3, name: "Morning Star", time: "6:00 AM", seats: 6 }, ]; export default function BusReservationApp() { const [selectedBus, setSelectedBus] = useState(null); const [selectedSeat, setSelectedSeat] = useState(null); const [bookingConfirmed, setBookingConfirmed] = useState(false); const handleSelectBus = (bus) => { setSelectedBus(bus); setSelectedSeat(null); setBookingConfirmed(false); }; const handleSelectSeat = (seat) => { setSelectedSeat(seat); }; const handleConfirmBooking = () => { if (selectedBus && selectedSeat !== null) { setBookingConfirmed(true); } }; return ( <div className="p-6 grid gap-4 max-w-xl mx-auto"> <h1 className="text-3xl font-bold mb-4 text-center">Bus Reservation App</h1> {!selectedBus ? ( buses.map(bus => ( <motion.div key={bus.id} whileHover={{ scale: 1.02 }}> <Card onClick={() => handleSelectBus(bus)} className="cursor-pointer"> <CardContent className="p-4"> <h2 className="text-xl font-semibold">{bus.name}</h2> <p>Departure Time: {bus.time}</p> <p>Available Seats: {bus.seats}</p> </CardContent> </Card> </motion.div> )) ) : ( <div className="space-y-4"> <Button variant="outline" onClick={() => setSelectedBus(null)}> Back to Buses </Button> <h2 className="text-2xl font-semibold">Select a Seat on {selectedBus.name}</h2> <div className="grid grid-cols-4 gap-2"> {[...Array(selectedBus.seats)].map((_, i) => ( <Button key={i} variant={selectedSeat === i ? "default" : "outline"} onClick={() => handleSelectSeat(i)} > Seat {i + 1} </Button> ))} </div> <Button onClick={handleConfirmBooking} disabled={selectedSeat === null}> Confirm Booking </Button> {bookingConfirmed && ( <p className="text-green-600 font-semibold"> Booking Confirmed! Seat {selectedSeat + 1} on {selectedBus.name} </p> )} </div> )} </div> ); }
Editor is loading...
Leave a Comment