Loading...
Loading...
The IconList component displays a vertical list of items with icons and text. Perfect for restaurant cards and other content cards that need icon-labeled information like address, hours, etc.
Display key restaurant details with icons for address, hours, cuisine type, and contact.
Contact details with icons for email, phone, website, and address.
Business hours displayed with clock icons.
Multiple location-related items with map pin icons.
IconList is commonly used within ContentCard components to display metadata.
A family-run trattoria serving authentic Tuscan cuisine.
Text can be a ReactNode for custom formatting or links.
import { IconList } from '@/components/composite/IconList';
import { MapPin, Clock, UtensilsCrossed } from 'lucide-react';
<IconList
items={[
{ icon: MapPin, text: 'Via del Corso 123, Florence' },
{ icon: Clock, text: 'Open Mon-Sat 7PM-11PM' },
{ icon: UtensilsCrossed, text: 'Italian, Tuscan Cuisine' },
]}
/>
// In ContentCard
<ContentCard
{...props}
iconListItems={[
{ icon: MapPin, text: "Via Roma 123" },
{ icon: Clock, text: "Open 9AM-6PM" },
]}
/>
// With custom content (ReactNode)
<IconList
items={[
{ icon: MapPin, text: <span>Located in <strong>Centro</strong></span> },
]}
/>