Components
This code implements a reusable UI component for displaying hotel information, along with a theme toggle. The HotelCard component takes hotel data as props (image URL, hotel name, location, rating, etc.) and renders a visually appealing card. It leverages styling and layout features to create a clean and responsive design. The component uses image placeholders, handles different screen sizes responsively, and includes interactive elements like hover effects. A theme toggle button dynamically switches between light and dark themes using the next-themes library. The HotelCard component is designed to be easily integrated into any application that displays hotel listings or travel information. The application renders a list of sample hotel cards using data stored in an array. It uses a functional component approach and JSX for UI rendering. The useTheme hook from next-themes manages the theme state. Lucide React provides the icons. This is useful for showcasing hotels in travel websites, travel apps, or hotel booking platforms. It could also be integrated with a backend system to fetch hotel data dynamically.
Loading preview...
import ExampleDemo from "@/components/ui/hotel-card-ui-component";
export default function DemoOne() {
return <ExampleDemo />;
}