Additional Baggage Selection UI designed for flight or travel booking apps. It allows users to choose extra baggage weight options (5 kg, 10 kg, 15 kg) with clear pricing. The selected option is highlighted with a radio button and summarized below for quick confirmation. Simple icons, dark theme, and concise layout make it easy to review and decide. Ideal for airline apps, ticket booking platforms, or travel management systems.
import React from 'react';
import { MinimalistOptionSelector, Option } from '@/components/ui/baggage-add-on';
import { Briefcase, Luggage, ShoppingBag } from 'lucide-react';
// Data for the component options
const baggageOptions: Option[] = [
{
id: '5kg',
icon: <ShoppingBag className="h-5 w-5" strokeWidth={1.5} />,
label: '5 kg',
price: 20,
},
{
id: '10kg',
icon: <Briefcase className="h-5 w-5" strokeWidth={1.5} />,
label: '10 kg',
price: 25,
},
{
id: '15kg',
icon: <Luggage className="h-5 w-5" strokeWidth={1.5} />,
label: '15 kg',
price: 30,
},
];
export default function MinimalistOptionSelectorDemo() {
const [selectedValue, setSelectedValue] = React.useState<string>('10kg');
const selectedOption = baggageOptions.find(opt => opt.id === selectedValue);
return (
// The container div no longer has background color classes
<div className="flex flex-col items-center justify-center min-h-[500px] w-full gap-6 p-4">
<MinimalistOptionSelector
options={baggageOptions}
defaultValue="10kg"
onValue-change={(id) => setSelectedValue(id)}
/>
{/* Selection summary */}
<div className="text-center">
<p className="text-sm text-muted-foreground">
Your selection:
</p>
<p className="text-base font-semibold text-foreground">
{selectedOption?.label} - ${selectedOption?.price}
</p>
</div>
</div>
);
}