192 lines
7.8 KiB
JavaScript
192 lines
7.8 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { Search, MapPin, Home, DollarSign } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function HeroSearch({ onSearch }) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const [activeTab, setActiveTab] = useState('rent');
|
||
|
|
const [filters, setFilters] = useState({
|
||
|
|
city: '',
|
||
|
|
propertyType: '',
|
||
|
|
priceRange: '',
|
||
|
|
identityType: 'syrian'
|
||
|
|
});
|
||
|
|
|
||
|
|
const cities = [
|
||
|
|
{ id: 'all', label: 'جميع المدن' },
|
||
|
|
{ id: 'دمشق', label: 'دمشق' },
|
||
|
|
{ id: 'حلب', label: 'حلب' },
|
||
|
|
{ id: 'حمص', label: 'حمص' },
|
||
|
|
{ id: 'اللاذقية', label: 'اللاذقية' },
|
||
|
|
{ id: 'درعا', label: 'درعا' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const propertyTypes = [
|
||
|
|
{ id: 'all', label: 'الكل' },
|
||
|
|
{ id: 'apartment', label: 'شقة' },
|
||
|
|
{ id: 'villa', label: 'فيلا' },
|
||
|
|
{ id: 'house', label: 'بيت' },
|
||
|
|
{ id: 'studio', label: 'استوديو' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const priceRanges = [
|
||
|
|
{ id: 'all', label: 'جميع الأسعار' },
|
||
|
|
{ id: '0-500', label: 'أقل من 50$' },
|
||
|
|
{ id: '500-1000', label: '50$ - 100$' },
|
||
|
|
{ id: '1000-2000', label: '100$ - 200$' },
|
||
|
|
{ id: '2000-3000', label: '200$ - 300$' },
|
||
|
|
{ id: '3000+', label: 'أكثر من 300$' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const identityTypes = [
|
||
|
|
{ id: 'syrian', label: 'هوية سورية' },
|
||
|
|
{ id: 'passport', label: 'جواز سفر' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const handleSearch = () => {
|
||
|
|
onSearch({
|
||
|
|
...filters,
|
||
|
|
propertyType: filters.propertyType || 'all',
|
||
|
|
city: filters.city || 'all',
|
||
|
|
priceRange: filters.priceRange || 'all'
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 sm:p-8 border border-white/20 shadow-2xl"
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
||
|
|
>
|
||
|
|
<div className="flex flex-wrap gap-2 mb-8">
|
||
|
|
{['rent', 'buy', 'sell'].map((tab) => (
|
||
|
|
<motion.button
|
||
|
|
key={tab}
|
||
|
|
onClick={() => setActiveTab(tab)}
|
||
|
|
className={`px-4 py-2 rounded-lg font-medium text-sm transition-all ${
|
||
|
|
activeTab === tab
|
||
|
|
? 'bg-amber-500 text-white'
|
||
|
|
: 'bg-white/20 text-white hover:bg-white/30'
|
||
|
|
}`}
|
||
|
|
whileHover={{ scale: 1.05 }}
|
||
|
|
whileTap={{ scale: 0.95 }}
|
||
|
|
>
|
||
|
|
{t(`${tab}Tab`)}
|
||
|
|
</motion.button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-white mb-2">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<MapPin className="w-4 h-4" />
|
||
|
|
{t("cityStreetLabel")}
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={filters.city}
|
||
|
|
onChange={(e) => setFilters({...filters, city: e.target.value})}
|
||
|
|
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||
|
|
style={{
|
||
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||
|
|
backgroundRepeat: 'no-repeat',
|
||
|
|
backgroundPosition: 'left 1rem center',
|
||
|
|
backgroundSize: '1rem',
|
||
|
|
paddingLeft: '2.5rem'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{cities.map(city => (
|
||
|
|
<option key={city.id} value={city.id}>{city.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-white mb-2">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Home className="w-4 h-4" />
|
||
|
|
{t("rentTypeLabel")}
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={filters.propertyType}
|
||
|
|
onChange={(e) => setFilters({...filters, propertyType: e.target.value})}
|
||
|
|
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||
|
|
style={{
|
||
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||
|
|
backgroundRepeat: 'no-repeat',
|
||
|
|
backgroundPosition: 'left 1rem center',
|
||
|
|
backgroundSize: '1rem',
|
||
|
|
paddingLeft: '2.5rem'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{propertyTypes.map(type => (
|
||
|
|
<option key={type.id} value={type.id}>{type.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-white mb-2">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<DollarSign className="w-4 h-4" />
|
||
|
|
{t("priceLabel")}
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={filters.priceRange}
|
||
|
|
onChange={(e) => setFilters({...filters, priceRange: e.target.value})}
|
||
|
|
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||
|
|
style={{
|
||
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||
|
|
backgroundRepeat: 'no-repeat',
|
||
|
|
backgroundPosition: 'left 1rem center',
|
||
|
|
backgroundSize: '1rem',
|
||
|
|
paddingLeft: '2.5rem'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{priceRanges.map(range => (
|
||
|
|
<option key={range.id} value={range.id}>{range.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-white mb-2">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
نوع الوثيقة
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={filters.identityType}
|
||
|
|
onChange={(e) => setFilters({...filters, identityType: e.target.value})}
|
||
|
|
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||
|
|
style={{
|
||
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||
|
|
backgroundRepeat: 'no-repeat',
|
||
|
|
backgroundPosition: 'left 1rem center',
|
||
|
|
backgroundSize: '1rem',
|
||
|
|
paddingLeft: '2.5rem'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{identityTypes.map(type => (
|
||
|
|
<option key={type.id} value={type.id}>{type.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-6">
|
||
|
|
<motion.button
|
||
|
|
onClick={handleSearch}
|
||
|
|
className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center text-base gap-3 shadow-lg hover:shadow-xl"
|
||
|
|
whileHover={{ scale: 1.02 }}
|
||
|
|
whileTap={{ scale: 0.98 }}
|
||
|
|
>
|
||
|
|
<Search className="w-5 h-5" />
|
||
|
|
{t("searchButton")}
|
||
|
|
</motion.button>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|