Components
Travel Card This component displays travel details in a clean, organized card layout. It's designed to be highly reusable, taking in all necessary information—such as travel name, times, rating, and price—through props. It uses framer-motion for smooth animations on load and hover.
Loading preview...
// demo.tsx (Corrected)
import { TravelCard } from '@/components/ui/travel-card'; // Corrected import path
const TravelCardDemo = () => {
const handleViewSeats = () => {
alert('Redirecting to seat selection...');
};
return (
<div className="flex w-full items-center justify-center bg-background p-8">
<TravelCard
travelsName="New Himalaya Travels"
busType="Volvo A/C Semi Sleeper (2+2)"
rating={4.3}
reviewsCount={8}
departureTime="20:00"
arrivalTime="01:25"
duration="5h 25m"
availableSeats={38}
price={1889}
logoSrc="https://www.redbus.in/rpwassets/public/images/primo.svg" // Replace with a real logo URL for "Primo"
offerTag="Minimum 10% off on return ticket"
onViewSeats={handleViewSeats}
/>
</div>
);
};
export default TravelCardDemo;