Travel UI Components

A collection of reusable React components for building travel and destination search interfaces.

Installation

```bash npm install @your-org/travel-components ```

Components

SearchBar

A search input with location icon and search button.

Props:

• placeholder - Input placeholder text
• onSearch - Callback when search is triggered
• defaultValue - Initial search value

CategoryFilters

Horizontal scrollable category buttons with selection state.

Props:

• categories - Array of category objects with id, label, and optional icon
• selected - Currently selected category id
• onSelect - Callback when category is selected

DestinationCard

Card component for displaying destination images with optional title and subtitle.

Props:

• image - Image URL
• title - Card title
• subtitle - Card subtitle
• onClick - Click handler

DestinationGrid

Grid layout for displaying multiple destination cards.

Props:

• destinations - Array of destination objects
• columns - Number of columns (2, 3, or 4)
• onDestinationClick - Callback when destination is clicked

PromoBanner

Promotional banner with customizable colors and call-to-action.

Props:

• title - Banner title
• subtitle - Banner subtitle
• image - Optional banner image
• ctaText - Call-to-action button text
• backgroundColor - Custom background color
• textColor - Custom text color
• onCtaClick - CTA button click handler

SearchHeader

Header component with title, subtitle, and optional profile image.

Props:

• title - Header title
• subtitle - Optional subtitle
• profileImage - User profile image URL
• userName - User name for alt text

Usage

```tsx import { SearchBar, DestinationGrid, CategoryFilters } from '@your-org/travel-components' import { Plane, Hotel, Car } from 'lucide-react'

export default function Page() { const categories = [ { id: 'flights', label: 'Flights', icon: }, { id: 'hotels', label: 'Hotels', icon: }, { id: 'cars', label: 'Cars', icon: }, ]

const destinations = [ { id: '1', image: '/venice.jpg', title: 'Venice', subtitle: 'Italy' }, { id: '2', image: '/paris.jpg', title: 'Paris', subtitle: 'France' }, ]

return ( <SearchBar placeholder="Where do you want to go?" onSearch={(value) => console.log(value)} /> <CategoryFilters categories={categories} onSelect={(id) => console.log(id)} /> <DestinationGrid destinations={destinations} columns={4} onDestinationClick={(id) => console.log(id)} /> ) } ```

Styling

This library uses Tailwind CSS. Make sure your project has Tailwind CSS installed and configured.

Publishing

See PUBLISH.md for detailed publishing instructions.

License

MIT