From d8d40ddc301b81a062e4ba670866eb6e5b9a647a Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Wed, 25 Oct 2023 11:28:22 +0100
Subject: [PATCH] CHORE: Cleaned up components to make main.svelte easier to
 maintain.

---
 src/main.svelte   | 57 +++------------------------------------------
 src/skills.svelte | 59 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 54 deletions(-)
 create mode 100644 src/skills.svelte

diff --git a/src/main.svelte b/src/main.svelte
index afae5a5..13856af 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -3,13 +3,9 @@
 	import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 
-    import Card from '$lib/components/Card.svelte';
-    import Modal from '$lib/components/Modal.svelte';
+    import Skills from './skills.svelte';
 
     import Timeline from "./timeline.svelte";
-
-	let showModal: boolean = false;
-    let activeModal: any = null;
 </script>
 
 <style>
@@ -65,18 +61,6 @@
         font-size: 1.5em;
     }
 
-    .card-footer {
-        margin-bottom: 1em;
-        display: flex;
-        gap: 1.5em;
-        justify-content: space-between;
-    }
-
-    .logo {
-        color: var(--fg);
-        font-size: 3em;
-    }
-
     /* Skills Cards CSS */
     .container {
         padding-top: 3em;
@@ -118,22 +102,7 @@
         <h1>Skills</h1>
         <hr />
         <div class="cards">
-            {#each info.skills as skill}
-                <Card on:click={() => {showModal = true; activeModal = skill}}>
-                    <div slot="header">
-                        <h2>{skill.skill}</h2>
-                        <i class="{skill.logo} logo"></i>
-                    </div>
-                    <div slot="content">
-                        <p class="not-required">{@html skill.usage}</p>
-                    </div>
-                    <div slot="footer">
-                        <!-- svelte-ignore a11y-invalid-attribute -->
-                        <a href="#">View More</a>
-                        <a href="/repos">Repos</a>
-                    </div>
-                </Card>
-            {/each}
+            <Skills skills="{info.skills}"></Skills>
         </div>
     </div>
 
@@ -152,24 +121,4 @@
         </div>
     </div>
     <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
-{/await}
-
-
-<!--Modal to be displayed on click-->
-{#if activeModal != null}
-    <Modal bind:showModal>
-        <h2 slot="header" class="card-header">
-            {activeModal.skill}
-            <i class="{activeModal.logo} logo"></i>
-        </h2>
-
-        <p>
-            {activeModal.about}
-        </p>
-
-        <div class="card-footer">
-            <a href="{activeModal.link}" target="_blank" rel="noopener noreferrer">Learn More</a>
-            <a href="/repos">Repos</a>
-        </div>
-    </Modal>
-{/if}
\ No newline at end of file
+{/await}
\ No newline at end of file
diff --git a/src/skills.svelte b/src/skills.svelte
new file mode 100644
index 0000000..1af6bee
--- /dev/null
+++ b/src/skills.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    export let skills: any;
+
+    import Card from '$lib/components/Card.svelte';
+    import Modal from '$lib/components/Modal.svelte';
+
+    let showModal: boolean = false;
+    let activeModal: any = null;
+</script>
+
+<style>
+    .card-footer {
+        margin-bottom: 1em;
+        display: flex;
+        gap: 1.5em;
+        justify-content: space-between;
+    }
+
+    .logo {
+        color: var(--fg);
+        font-size: 3em;
+    }
+</style>
+
+{#each skills as skill}
+    <Card on:click={() => {showModal = true; activeModal = skill}}>
+        <div slot="header">
+            <h2>{skill.skill}</h2>
+            <i class="{skill.logo} logo"></i>
+        </div>
+        <div slot="content">
+            <p class="not-required">{@html skill.usage}</p>
+        </div>
+        <div slot="footer">
+            <!-- svelte-ignore a11y-invalid-attribute -->
+            <a href="#">View More</a>
+            <a href="/repos">Repos</a>
+        </div>
+    </Card>
+{/each}
+
+<!--Modal to be displayed on click-->
+{#if activeModal != null}
+    <Modal bind:showModal>
+        <h2 slot="header" class="card-header">
+            {activeModal.skill}
+            <i class="{activeModal.logo} logo"></i>
+        </h2>
+
+        <p>
+            {activeModal.about}
+        </p>
+
+        <div class="card-footer">
+            <a href="{activeModal.link}" target="_blank" rel="noopener noreferrer">Learn More</a>
+            <a href="/repos">Repos</a>
+        </div>
+    </Modal>
+{/if}
\ No newline at end of file