Blittech/Projet1-RealEstate
4
0
Fork 0
mirror of http://88.130.71.182:3000/BlitTech/Projet1-RealEstate.git synced 2026-06-12 23:33:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor category properties from key/title to id/name

Browse Source
This commit is contained in:
Dosseh91
2025-12-17 23:05:10 +01:00
committed by GitHub
parent c65fd13e56
commit 505b5b6366
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/Categories.tsx
View File

@@ -3,43 +3,44 @@ import { Tag } from "lucide-react";
const categories = [ const categories = [
{ {
key: "real-estate", id: "real-estate",
title: "Real Estate", name: "Real Estate",
description: "Homes, apartments, land, and commercial properties", description: "Homes, apartments, land, and commercial properties",
}, },
{ {
key: "vehicles", id: "vehicles",
title: "Vehicles", name: "Vehicles",
description: "Cars, motorcycles, boats, and other vehicles", description: "Cars, motorcycles, boats, and other vehicles",
}, },
{ {
key: "electronics", id: "electronics",
title: "Electronics", name: "Electronics",
description: "Computers, phones, TVs, and other electronic devices", description: "Computers, phones, TVs, and other electronic devices",
}, },
{ {
key: "furniture", id: "furniture",
title: "Furniture", name: "Furniture",
description: "Home and office furniture, decor, and appliances", description: "Home and office furniture, decor, and appliances",
}, },
{ {
key: "jobs", id: "jobs",
title: "Jobs", name: "Jobs",
description: "Job listings and career opportunities", description: "Job listings and career opportunities",
}, },
{ {
key: "services", id: "services",
title: "Services", name: "Services",
description: "Professional services and skilled trades", description: "Professional services and skilled trades",
}, },
]; ];
export default function Categories() { const Categories: React.FC = () => {
return ( return (
<div className="container mx-auto px-4 py-16"> <div className="max-w-7xl mx-auto px-4 py-16">
<h1 className="text-3xl font-bold text-center mb-4"> <h1 className="text-3xl font-bold text-center mb-4">
Browse by Category Browse by Category
</h1> </h1>
<p className="text-center text-gray-600 mb-12"> <p className="text-center text-gray-600 mb-12">
Explore our wide range of categories to find exactly what you're looking for Explore our wide range of categories to find exactly what you're looking for
</p> </p>
@@ -47,18 +48,18 @@ export default function Categories() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{categories.map((category) => ( {categories.map((category) => (
<Link <Link
key={category.key} key={category.id}
to={`/listings?category=${category.key}`} to={`/listings?category=${category.id}`}
className="group bg-white border rounded-xl p-6 flex justify-between items-center hover:shadow-lg transition" className="group bg-white border rounded-xl p-6 flex justify-between items-center hover:shadow-lg transition"
> >
<div className="flex gap-4"> <div className="flex gap-4">
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center"> <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
<Tag className="text-gray-600" /> <Tag className="text-gray-600 group-hover:text-teal-600" />
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold group-hover:text-teal-600"> <h3 className="text-lg font-semibold group-hover:text-teal-600">
{category.title} {category.name}
</h3> </h3>
<p className="text-gray-600 text-sm"> <p className="text-gray-600 text-sm">
{category.description} {category.description}
@@ -74,6 +75,7 @@ export default function Categories() {
</div> </div>
</div> </div>
); );
} };
export default Categories; export default Categories;