From 37b78b161153d39530436a220ba1760fdabf6f41 Mon Sep 17 00:00:00 2001
From: Dosseh91 <98787470+Dosseh91@users.noreply.github.com>
Date: Wed, 17 Dec 2025 21:53:02 +0100
Subject: [PATCH] Add Categories component with category links

---
 src/pages/Categories.tsx | 59 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/src/pages/Categories.tsx b/src/pages/Categories.tsx
index 8b13789..3c80881 100644
--- a/src/pages/Categories.tsx
+++ b/src/pages/Categories.tsx
@@ -1 +1,60 @@
+import React, { useState } from 'react';
+import { Layers, Users, Settings, PlusCircle, Grid, List, CheckCircle, XCircle, Clock } from 'lucide-react';
+import Button from '../components/common/Button';
+import Card, { CardContent, CardHeader } from '../components/common/Card';
+import ListingReviewCard from '../components/admin/ListingReviewCard';
+import CategoryManagement from '../components/admin/CategoryManagement';
+import AgencyManagement from '../components/admin/AgencyManagement';
+import { useListings } from '../contexts/ListingContext';
+import { Link } from 'react-router-dom';
+
+interface Category {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+const categories: Category[] = [
+  { id: 'apartments', name: 'Apartments' },
+  { id: 'houses', name: 'Houses' },
+  { id: 'commercial', name: 'Commercial' },
+  { id: 'land', name: 'Land' },
+  { id: 'luxury', name: 'Luxury' }
+];
+
+const Categories = () => {
+  return (
+    <div style={{ padding: '2rem' }}>
+      <h1>Categories</h1>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: '1rem',
+          marginTop: '1.5rem'
+        }}
+      >
+        {categories.map(category => (
+          <Link
+            key={category.id}
+            to={`/categories/${category.id}`}
+            style={{
+              textDecoration: 'none',
+              border: '1px solid #e5e7eb',
+              padding: '1rem',
+              borderRadius: '8px',
+              color: 'inherit'
+            }}
+          >
+            <h3>{category.name}</h3>
+            {category.description && <p>{category.description}</p>}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Categories;