66 lines
3.5 KiB
TypeScript
66 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
|
|
interface BengaluruHeaderProps {
|
|
filteredCount: number;
|
|
totalCount: number;
|
|
}
|
|
|
|
export default function BengaluruHeader({ filteredCount, totalCount }: BengaluruHeaderProps) {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const currentSearch = searchParams.get("search");
|
|
|
|
const fullText = "Browse real estate for sale in Bengaluru. Properties including flats, villas, and plots from trusted builders. Whether you're looking for luxurious or budget-friendly property in Bengaluru, sky&soil offers a wide range of options to suit every need. Find properties for sale in Bengaluru. Residential options with verified details, photos, and competitive pricing. Prices ₹1.5Cr - ₹5.0Cr. RERA-registered homes in gated communities, with amenities such as Swimming Pool, Gym, Clubhouse, Kids' Play Area, 24x7 Security, and Power Backup. Legal due diligence support available. 356+ options across top communities. Prime locations with IT connectivity and social infrastructure. View accurate prices, configurations, photos, and neighbourhood insights to compare options and book confidently with sky&soil.";
|
|
|
|
const toggleReadMore = () => setIsExpanded(!isExpanded);
|
|
|
|
const handleModernSpaacesClick = () => {
|
|
// Toggle: if already selected, clear it (optional, but good UX). Or just set it.
|
|
// User asked for "click that button morden this ... show morden space preprtis only filter"
|
|
router.push("?search=Modern+Spaaces", { scroll: false });
|
|
};
|
|
|
|
const isModernSpaacesActive = currentSearch === "Modern Spaaces";
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
Property for Sale in Bengaluru
|
|
</h1>
|
|
<div className="text-sm text-gray-500 dark:text-gray-400 mt-2 md:mt-0">
|
|
Showing 1-{filteredCount} of {totalCount} Properties | Last Updated: {new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed inline">
|
|
{isExpanded ? fullText : `${fullText.substring(0, 230)}...`}
|
|
</p>
|
|
<button
|
|
onClick={toggleReadMore}
|
|
className="ml-2 text-orange-500 hover:text-orange-600 font-medium text-sm inline-block focus:outline-none"
|
|
>
|
|
{isExpanded ? "Show Less" : "Read more"}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex gap-4 justify-center">
|
|
<button
|
|
onClick={handleModernSpaacesClick}
|
|
className={`px-6 py-2 rounded-full border transition-all text-sm font-medium ${isModernSpaacesActive
|
|
? "bg-gray-900 text-white border-gray-900 dark:bg-white dark:text-black"
|
|
: "bg-white text-gray-700 border-gray-300 hover:border-gray-900 dark:bg-black dark:text-gray-300 dark:border-gray-700"
|
|
}`}
|
|
>
|
|
Modern Spaaces
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|