🛠️ Create dynamic route.

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>
+<Container>
-<div>{@html data.content}</div>
+  <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>

src/routes/directory/[slug]/+page.ts

@@ -1,13 +1,23 @@
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (({ params }) => {
+import { svgs } from '@/data/svgs';
-  if (params.slug === 'hello-world') {
+import type { iSVG } from '@/types/svg';
-    return {
+
-      title: 'Hello world!',
+export const load = (async ({ params }) => {
-      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
+  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;