From a2aee8908867f332bf299960354ea78da8c540f5 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sun, 19 Mar 2023 14:53:04 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Create=20dynamic=20rout?=
 =?UTF-8?q?e.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/directory/[slug]/+page.svelte | 34 ++++++++++++++++++++++--
 src/routes/directory/[slug]/+page.ts     | 24 ++++++++++++-----
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/routes/directory/[slug]/+page.svelte b/src/routes/directory/[slug]/+page.svelte
index 298fc0e..ac9b605 100644
--- a/src/routes/directory/[slug]/+page.svelte
+++ b/src/routes/directory/[slug]/+page.svelte
@@ -1,7 +1,37 @@
 <script lang="ts">
   import type { PageData } from './$types';
+  import type { iSVG } from '@/types/svg';
   export let data: PageData;
+  let svgsByCategory = data.props?.svgs || [];
+
+  // Components:
+  import Container from '@/components/container.svelte';
+  import Search from '@/components/search.svelte';
+  import SvgCard from '@/components/svgCard.svelte';
+
+  // Search:
+  let searchTerm = '';
+  let filteredSvgs: iSVG[] = [];
+
+  if (searchTerm.length === 0) {
+    filteredSvgs = svgsByCategory.sort((a: iSVG, b: iSVG) => {
+      return b.id - a.id;
+    });
+}
+
+  const searchSvgs = () => {
+    return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => {
+      let svgTitle = svg.title.toLowerCase();
+      return svgTitle.includes(searchTerm.toLowerCase());
+    }));
+  };
 </script>
 
-<h1>{data.title}</h1>
-<div>{@html data.content}</div>
+<Container>
+  <Search bind:searchTerm on:input={searchSvgs} />
+  <div class="mt-4 grid grid-cols-6 gap-4">
+    {#each filteredSvgs as svg}
+      <SvgCard svgInfo={svg} />
+    {/each}
+  </div>
+</Container>
diff --git a/src/routes/directory/[slug]/+page.ts b/src/routes/directory/[slug]/+page.ts
index d935cd8..4b6ad6b 100644
--- a/src/routes/directory/[slug]/+page.ts
+++ b/src/routes/directory/[slug]/+page.ts
@@ -1,13 +1,23 @@
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (({ params }) => {
-  if (params.slug === 'hello-world') {
-    return {
-      title: 'Hello world!',
-      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
-    };
+import { svgs } from '@/data/svgs';
+import type { iSVG } from '@/types/svg';
+
+export const load = (async ({ params }) => {
+  const { slug } = params;
+
+  // Check if slug is valid:
+  if (!slug) {
+    return error(404, 'Not found');
   }
 
-  throw error(404, 'Not found');
+  // Filter out the svg with the matching slug:
+  const svgsByCategory = svgs.filter((svg: iSVG) => svg.category.toLowerCase() === slug);
+
+  return {
+    props: {
+      svgs: svgsByCategory
+    }
+  };
 }) satisfies PageLoad;