99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { MapPin, Phone, Mail, Clock } from 'lucide-react';
|
|
|
|
interface Branch {
|
|
id: string;
|
|
name: string;
|
|
address: string;
|
|
phone: string;
|
|
email: string;
|
|
hours: string;
|
|
}
|
|
|
|
const branches: Branch[] = [
|
|
{
|
|
id: 'baghdad-main',
|
|
name: 'Baghdad Main Branch',
|
|
address: '123 Main St, Baghdad',
|
|
phone: '+964 770 123 4567',
|
|
email: 'baghdad.main@friedchicken.iq',
|
|
hours: 'Mon-Sun: 10:00 AM - 11:00 PM',
|
|
},
|
|
{
|
|
id: 'erbil-city',
|
|
name: 'Erbil City Center',
|
|
address: '456 Erbil Rd, Erbil',
|
|
phone: '+964 750 987 6543',
|
|
email: 'erbil.city@friedchicken.iq',
|
|
hours: 'Mon-Sat: 11:00 AM - 10:00 PM',
|
|
},
|
|
{
|
|
id: 'basra-port',
|
|
name: 'Basra Port Area',
|
|
address: '789 Port Ave, Basra',
|
|
phone: '+964 780 112 2334',
|
|
email: 'basra.port@friedchicken.iq',
|
|
hours: 'Mon-Sun: 09:00 AM - 10:00 PM',
|
|
},
|
|
];
|
|
|
|
export default function BranchSelector() {
|
|
const [selectedBranchId, setSelectedBranchId] = useState<string>(branches[0].id);
|
|
const selectedBranch = branches.find(branch => branch.id === selectedBranchId);
|
|
|
|
return (
|
|
<div className="relative z-10 p-4 bg-background/80 backdrop-blur-sm rounded-lg shadow-lg max-w-md mx-auto mt-8 mb-4">
|
|
<h3 className="text-xl font-semibold mb-4 text-foreground text-center">Select Your Branch</h3>
|
|
<div className="relative">
|
|
<select
|
|
value={selectedBranchId}
|
|
onChange={(e) => setSelectedBranchId(e.target.value)}
|
|
className="block w-full px-4 py-2 pr-8 text-foreground bg-card border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-primary-cta appearance-none"
|
|
aria-label="Select a branch"
|
|
>
|
|
{branches.map((branch) => (
|
|
<option key={branch.id} value={branch.id}>
|
|
{branch.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-foreground">
|
|
<svg
|
|
className="h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{selectedBranch && (
|
|
<div className="mt-6 p-4 border border-card-border rounded-md bg-card text-foreground">
|
|
<h4 className="text-lg font-medium mb-2">{selectedBranch.name}</h4>
|
|
<p className="flex items-center text-sm mb-1">
|
|
<MapPin className="mr-2 h-4 w-4 text-accent" /> {selectedBranch.address}
|
|
</p>
|
|
<p className="flex items-center text-sm mb-1">
|
|
<Phone className="mr-2 h-4 w-4 text-accent" /> {selectedBranch.phone}
|
|
</p>
|
|
<p className="flex items-center text-sm mb-1">
|
|
<Mail className="mr-2 h-4 w-4 text-accent" /> {selectedBranch.email}
|
|
</p>
|
|
<p className="flex items-center text-sm">
|
|
<Clock className="mr-2 h-4 w-4 text-accent" /> {selectedBranch.hours}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |