No you properly did wrong what i want is I wanna move to next pages on home page when click on show more on any listing it will go to the next page everything I describe you is for the next pages of short term long term and selling if click on long term show more it will go to the long term route same as if go short term it will go to the short term route and if selle it will go to the selle route everything from backend API would be according to the transaction type for handling long term short term . You absilutly did the wrong I want to do it perfectly I wanna new page
I understand now. You want separate pages for each transaction type, and when clicking "Show more" on the home page, it should navigate to the corresponding page. Let me implement this correctly.
I've created separate pages for each transaction type as you requested. Now when a user clicks "Show more" on any section of the home page, they'll be navigated to the corresponding page:
/rent-long/rent-short/selleEach page includes:
Complete filtering functionality:
Responsive design:
Visual design matching the provided image:
API integration:
The navigation is now properly set up in the PropertySection component, which uses React Router's useNavigate hook to redirect users to the appropriate page when they click "Show more".
<div className="flex-1">
<label className="block text-sm font-medium text-gray-700 mb-2">{t("city")}</label>
<Select
value={selectedCity}
onValueChange={(value) => {
setSelectedCity(value)
setTimeout(applyFilters, 0)
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder={t("all_cities")} />
</SelectTrigger>
<SelectContent className="bg-white">
<SelectItem value="all">{t("all_cities")}</SelectItem>
{cities.map((city) => (
<SelectItem key={city.id} value={city.id.toString()}>
{city.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex-1">
<label className="block text-sm font-medium text-gray-700 mb-2">État</label>
<Select
value={selectedState}
onValueChange={(value) => {
setSelectedState(value)
setTimeout(applyFilters, 0)
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Tous les états" />
</SelectTrigger>
<SelectContent className="bg-white">
<SelectItem value="all">Tous les états</SelectItem>
{propertyStates.map((state) => (
<SelectItem key={state.value} value={state.value}>
{state.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</CardContent>
</Card> here is the code I am using shadcn UI components I want to make it beautiful and the content height would be h-56 and it should scroll the content not use the arrows its not smooth and not better iwant to make it very very beautiful
I'll create a more beautiful and user-friendly filter component using shadcn/ui components with scrollable content instead of arrows.
I've created a beautiful and enhanced filter component using shadcn/ui components. Here are the key improvements:
max-h-56 (14rem) height for the dropdown contentoverflow-y-auto to make the content scrollableThis enhanced filter component provides a much more polished and professional look while maintaining all the functionality of your original implementation. The scrollable content makes it easier for users to find options in long lists without relying on arrow buttons.
You can send messages while the preview loads