Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/uniquesonu/hotel-card-ui-componentimport ExampleDemo from "@/components/ui/hotel-card-ui-component";
export default function DemoOne() {
return <ExampleDemo />;
}