From 5efe29e0be924b90721a3e2fda2d4629746683dc Mon Sep 17 00:00:00 2001
From: JBierenbroodspot <jim12.brood@gmail.com>
Date: Mon, 10 Jul 2023 00:20:36 +0200
Subject: [PATCH] Parameterize name component

---
 .../name_and_socials/name.component.svelte    | 23 +++++++++++++++++++
 src/routes/+page.svelte                       |  2 +-
 src/routes/name.component.svelte              | 12 ----------
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/components/name_and_socials/name.component.svelte
 delete mode 100644 src/routes/name.component.svelte

diff --git a/src/lib/components/name_and_socials/name.component.svelte b/src/lib/components/name_and_socials/name.component.svelte
new file mode 100644
index 0000000..128dbc3
--- /dev/null
+++ b/src/lib/components/name_and_socials/name.component.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let fullName: string = '[Full Name]';
+	export let occupationTitle: string = '[Occupation Title]';
+</script>
+
+<section>
+	<h1>{fullName}</h1>
+	<h2>{occupationTitle}</h2>
+</section>
+
+<style lang="scss">
+	$grid-area: a;
+
+	section {
+		grid-area: $grid-area;
+
+		& > h1,
+		> h2 {
+			margin-block-start: 0.5em;
+			margin-block-end: 0.5em;
+		}
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 315dc0f..3874b17 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import type { SkillList, InfoArticleList } from '$lib/types/cv_types';
 
 	import InfoComponent from '$lib/components/cv_info_articles/info.component.svelte';
-	import NameComponent from './name.component.svelte';
+	import NameComponent from '$lib/components/name_and_socials/name.component.svelte';
 	import SkillAreaComponent from '$lib/components/proficiency_trackers/skill_area.component.svelte';
 
 	const skills: SkillList = [];
diff --git a/src/routes/name.component.svelte b/src/routes/name.component.svelte
deleted file mode 100644
index c2cad03..0000000
--- a/src/routes/name.component.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<div id="nameArea">
-	<h1 id="title">[FirstName LastName]</h1>
-	<h2 id="subTitle">[Does Things]</h2>
-</div>
-
-<style lang="scss">
-	$grid-area: a;
-
-	#nameArea {
-		grid-area: $grid-area;
-	}
-</style>