site list in districts; page implementation in districts

17 files changed, 221 insertions, 14 deletions

diff --git a/src/components/DistrictSiteComponent.astro b/src/components/DistrictSiteComponent.astro
new file mode 100644
index 0000000..0da7bdb
--- /dev/null
+++ b/src/components/DistrictSiteComponent.astro
@@ -0,0 +1,30 @@
+---
+const { site } = Astro.props;
+---
+<div class="flex flex-row justify-between px-2 gap-2 my-4">
+    <div class="w-2/3">
+        <div class="flex flex-row gap-2 items-center justify-between">
+            <h2 class="text-xl saira">
+                <a href={site.url} target="_blank" rel="noopener">{site.name}</a>
+            </h2>
+            <span class="text-gray-500 text-xs">Added: {new Date(site.added).toLocaleDateString()}</span>
+        </div>
+        <p class="text-xs">{site.description}</p>
+        <div class="text-xs">
+            Owner: 
+            <a class="link" href={`https://neocities.org/site/${site.owner}`} target="_blank" rel="noopener">
+                @{site.owner}
+            </a>
+        </div>
+        {site.tags && (
+            <div class="text-xs mt-4">
+                {site.tags.map(tag => (
+                    <span class="bg-pagodapurple text-white rounded px-2 py-1 mr-1">{tag}</span>
+                ))}
+            </div>
+        )}
+    </div>
+    <div class="w-1/3 flex justify-end">
+        <img src={site.screenshotUrl} alt={site.name} class="w-5/6 h-auto" />
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/data/districts/arcadia.ts b/src/data/districts/arcadia.ts
new file mode 100644
index 0000000..f28d23a
--- /dev/null
+++ b/src/data/districts/arcadia.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const arcadia: Site[] = [];
diff --git a/src/data/districts/arles.ts b/src/data/districts/arles.ts
new file mode 100644
index 0000000..246553a
--- /dev/null
+++ b/src/data/districts/arles.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const arles: Site[] = [];
diff --git a/src/data/districts.ts b/src/data/districts/districts.ts
index 0428b59..a134d56 100644
--- a/src/data/districts.ts
+++ b/src/data/districts/districts.ts
@@ -1,9 +1,4 @@
-export interface District {
-  id: string;
-  name: string;
-  description: string;
-  image: string;
-}
+import type { District } from "./types";
 
 export const districts: District[] = [
   {
@@ -67,7 +62,3 @@ export const districts: District[] = [
     image: "/images/districts/internal/tokyo.png",
   },
 ];
-
-export const getDistrictById = (id: string): District | undefined => {
-  return districts.find((district) => district.id === id);
-};
diff --git a/src/data/districts/functions.ts b/src/data/districts/functions.ts
new file mode 100644
index 0000000..6e34f11
--- /dev/null
+++ b/src/data/districts/functions.ts
@@ -0,0 +1,58 @@
+import type { District, Site } from "./types";
+import { districts } from "./districts";
+import { arcadia } from "./arcadia";
+import { arles } from "./arles";
+import { hollywood } from "./hollywood";
+import { oxford } from "./oxford";
+import { petsburg } from "./petsburg";
+import { purgatory } from "./purgatory";
+import { siliconValley } from "./siliconValley";
+import { silverLake } from "./silverLake";
+import { stratfordUponAvon } from "./stratfordUponAvon";
+import { tokyo } from "./tokyo";
+
+export const getDistrictById = (id: string): District | undefined => {
+  return districts.find((district) => district.id === id);
+};
+
+export const getSitesByDistrictId = (id: string): Site[] => {
+  switch (id) {
+    case "arcadia":
+      return arcadia;
+    case "arles":
+      return arles;
+    case "hollywood":
+      return hollywood;
+    case "oxford":
+      return oxford;
+    case "petsburg":
+      return petsburg;
+    case "purgatory":
+      return purgatory;
+    case "silicon-valley":
+      return siliconValley;
+    case "silver-lake":
+      return silverLake;
+    case "stratford-upon-avon":
+      return stratfordUponAvon;
+    case "tokyo":
+      return tokyo;
+    default:
+      return [];
+  }
+};
+
+export const getPaginatedSitesByDistrictId = (
+  id: string,
+  page: number,
+  limit: number
+): { sites: Site[]; totalPages: number; currentPage: number } => {
+  const sites = getSitesByDistrictId(id);
+  const startIndex = (page - 1) * limit;
+  const endIndex = startIndex + limit;
+  return {
+    sites: sites.slice(startIndex, endIndex),
+    totalPages: Math.ceil(sites.length / limit),
+    currentPage: page,
+  };
+};
diff --git a/src/data/districts/hollywood.ts b/src/data/districts/hollywood.ts
new file mode 100644
index 0000000..9689426
--- /dev/null
+++ b/src/data/districts/hollywood.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const hollywood: Site[] = [];
diff --git a/src/data/districts/oxford.ts b/src/data/districts/oxford.ts
new file mode 100644
index 0000000..599b46b
--- /dev/null
+++ b/src/data/districts/oxford.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const oxford: Site[] = [];
diff --git a/src/data/districts/petsburg.ts b/src/data/districts/petsburg.ts
new file mode 100644
index 0000000..56b62d5
--- /dev/null
+++ b/src/data/districts/petsburg.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const petsburg: Site[] = [];
diff --git a/src/data/districts/purgatory.ts b/src/data/districts/purgatory.ts
new file mode 100644
index 0000000..8aee047
--- /dev/null
+++ b/src/data/districts/purgatory.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const purgatory: Site[] = [];
diff --git a/src/data/districts/siliconValley.ts b/src/data/districts/siliconValley.ts
new file mode 100644
index 0000000..8b0fe61
--- /dev/null
+++ b/src/data/districts/siliconValley.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const siliconValley: Site[] = [];
diff --git a/src/data/districts/silverLake.ts b/src/data/districts/silverLake.ts
new file mode 100644
index 0000000..878762e
--- /dev/null
+++ b/src/data/districts/silverLake.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const silverLake: Site[] = [];
diff --git a/src/data/districts/stratfordUponAvon.ts b/src/data/districts/stratfordUponAvon.ts
new file mode 100644
index 0000000..3e818bb
--- /dev/null
+++ b/src/data/districts/stratfordUponAvon.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const stratfordUponAvon: Site[] = [];
diff --git a/src/data/districts/tokyo.ts b/src/data/districts/tokyo.ts
new file mode 100644
index 0000000..804bceb
--- /dev/null
+++ b/src/data/districts/tokyo.ts
@@ -0,0 +1,3 @@
+import type { Site } from "./types";
+
+export const tokyo: Site[] = [];
diff --git a/src/data/districts/types.ts b/src/data/districts/types.ts
new file mode 100644
index 0000000..e495070
--- /dev/null
+++ b/src/data/districts/types.ts
@@ -0,0 +1,16 @@
+export interface District {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+}
+
+export interface Site {
+  name: string;
+  url: string;
+  description: string;
+  owner: string;
+  tags: string[];
+  added: Date;
+  screenshotUrl: string;
+}
diff --git a/src/pages/districts/[district].astro b/src/pages/districts/[district].astro
index c576fe1..191b3ae 100644
--- a/src/pages/districts/[district].astro
+++ b/src/pages/districts/[district].astro
@@ -1,7 +1,9 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import DistrictCardComponent from "../../components/DistrictCardComponent.astro";
-import { districts, getDistrictById, District } from "../../data/districts";
+import DistrictSiteComponent from "../../components/DistrictSiteComponent.astro";
+import { getDistrictById, getPaginatedSitesByDistrictId } from "../../data/districts/functions";
+import { districts } from "../../data/districts/districts";
 
 export function getStaticPaths() {
   return districts.map(district => ({
@@ -11,8 +13,34 @@ export function getStaticPaths() {
 
 const { district } = Astro.params;
 const districtData = getDistrictById(district);
+
+const sitesPerPage = 10;
+const currentPage = 1;
+const { sites, totalPages } = getPaginatedSitesByDistrictId(district, currentPage, sitesPerPage);
 ---
 
 <Layout title={`${districtData.name || district} District`}>
+    <div class="text-sm mb-4">
+        <a class="link" href="/districts">← Back to All Districts</a>
+    </div>
     <DistrictCardComponent district={districtData} />
+    <section class="my-4">
+        {sites.length > 0 ? (
+            <>
+                <p class="text-xs font-bold text-justify">Showing {currentPage} of {totalPages} pages. (Max {sitesPerPage} sites per page, Showing {sites.length} sites)</p>
+                {sites.map(site => (
+                    <DistrictSiteComponent site={site} />
+                ))}
+            </>
+        ) : (
+            <p class="text-xs text-justify">No sites found in this district yet.</p>
+        )}
+    </section>
+    <div class="text-sm flex items-center justify-center gap-2">
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
+            page === currentPage
+                ? <a class="link font-bold" href={page === 1 ? `/districts/${district}` : `/districts/${district}/${page}`}>{page}</a>
+                : <a class="link" href={page === 1 ? `/districts/${district}` : `/districts/${district}/${page}`}>{page}</a>
+        ))}
+    </div>
 </Layout>
\ No newline at end of file
diff --git a/src/pages/districts/[district]/[page].astro b/src/pages/districts/[district]/[page].astro
new file mode 100644
index 0000000..63753df
--- /dev/null
+++ b/src/pages/districts/[district]/[page].astro
@@ -0,0 +1,56 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import DistrictCardComponent from "../../../components/DistrictCardComponent.astro";
+import DistrictSiteComponent from "../../../components/DistrictSiteComponent.astro";
+import { getDistrictById, getPaginatedSitesByDistrictId } from "../../../data/districts/functions";
+import { districts } from "../../../data/districts/districts";
+
+export async function getStaticPaths() {
+    const paths = [];
+    const sitesPerPage = 3;
+    
+    for (const district of districts) {
+        const { totalPages } = getPaginatedSitesByDistrictId(district.id, 1, sitesPerPage);
+        for (let page = 1; page <= totalPages; page++) {
+            paths.push({
+                params: { district: district.id, page: String(page) }
+            });
+        }
+    }
+
+    return paths;
+}
+
+const { district, page } = Astro.params;
+const currentPage = parseInt(page || "1");
+const districtData = getDistrictById(district);
+const sitesPerPage = 10;
+
+const { sites, totalPages } = getPaginatedSitesByDistrictId(district, currentPage, sitesPerPage);
+---
+
+<Layout title={`${districtData?.name || district} District - Page ${currentPage}`}>
+    <div class="text-sm mb-4">
+        <a class="link" href="/districts">← Back to All Districts</a>
+    </div>
+    <DistrictCardComponent district={districtData} />
+    <section class="my-4">
+        {sites.length > 0 ? (
+            <>
+                <p class="text-xs font-bold text-justify">Showing {currentPage} of {totalPages} pages. (Max {sitesPerPage} sites per page, Showing {sites.length} sites)</p>
+                {sites.map(site => (
+                    <DistrictSiteComponent site={site} />
+                ))}
+            </>
+        ) : (
+            <p class="text-xs text-justify">No sites found in this district yet.</p>
+        )}
+    </section>
+    <div class="text-sm flex items-center justify-center gap-2">
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
+            page === currentPage
+                ? <a class="link font-bold" href={page === 1 ? `/districts/${district}` : `/districts/${district}/${page}`}>{page}</a>
+                : <a class="link" href={page === 1 ? `/districts/${district}` : `/districts/${district}/${page}`}>{page}</a>
+        ))}
+    </div>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/districts/index.astro b/src/pages/districts/index.astro
index 94161b4..0990b35 100644
--- a/src/pages/districts/index.astro
+++ b/src/pages/districts/index.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import DistrictCardComponent from "../../components/DistrictCardComponent.astro";
-import { districts, Districts } from "../../data/districts";
+import { districts } from "../../data/districts/districts";
 ---
 <Layout title="Districts">
     <h1 class="text-2xl saira">Districts on Pagoda</h1>
@@ -15,6 +15,4 @@ import { districts, Districts } from "../../data/districts";
             <DistrictCardComponent district={district} />
         ))}
     </section>
-
-
 </Layout>
\ No newline at end of file