From d321ec72f7891eaca237c32b792497065e634ae2 Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Mon, 10 Jul 2023 18:56:54 +0200
Subject: [PATCH] Add Path component

---
 frontend/src/routes/+page.svelte           | 106 ++-------------------
 frontend/src/routes/components/Path.svelte |  70 ++++++++++++++
 2 files changed, 77 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/routes/components/Path.svelte

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d85f152..4ef0f12 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import BottomAppBar from './components/BottomAppBar.svelte';
+	import Path from './components/Path.svelte';
 </script>
 
 <header>
@@ -8,42 +9,9 @@
 
 <main>
 	<div id="route-cards">
-		<div class="route-card">
-			<div class="route-card-left">
-				<img src="/images/app-bar-logo.png" alt="logo" />
-			</div>
-			<div class="route-card-center">
-				<div class="name">
-					<div>Percorsi</div>
-					<div class="bold">naturalistici</div>
-				</div>
-			</div>
-			<div class="route-card-right" />
-		</div>
-		<div class="route-card">
-			<div class="route-card-left">
-				<img src="/images/app-bar-logo.png" alt='logo' />
-			</div>
-			<div class="route-card-center">
-				<div class="name">
-					<div>Percorsi</div>
-					<div class="bold">storici</div>
-				</div>
-			</div>
-			<div class="route-card-right" />
-		</div>
-		<div class="route-card">
-			<div class="route-card-left">
-				<img src="/images/app-bar-logo.png" alt='logo' />
-			</div>
-			<div class="route-card-center">
-				<div class="name">
-					<div>Percorsi</div>
-					<div class="bold">tradizionalistici</div>
-				</div>
-			</div>
-			<div class="route-card-right" />
-		</div>
+		<Path color='#de0e1b'  type="naturalistici" />
+		<Path color='#f6ae04' type="storici" />
+		<Path color='#213c8b' type="tradizionalisti" />
 	</div>
 </main>
 
@@ -52,6 +20,9 @@
 </footer>
 
 <style>
+	.bold {
+		font-weight: bold;
+	}
 	#welcome-message {
 		font-size: 18px;
 	}
@@ -63,67 +34,4 @@
 		width: 100%;
 		align-items: center;
 	}
-
-	.route-card {
-		flex: 1;
-		--route-card-radius: 45px;
-		border-radius: var(--route-card-radius);
-		box-shadow: 0 0 27px #ccc;
-		margin-top: 10px;
-		margin-bottom: 10px;
-		width: 90%;
-		display: flex;
-		background-color: var(--card-background-color);
-	}
-
-	.route-card > * {
-		flex: 1;
-	}
-
-	.route-card-left {
-		flex: 0 1 20%;
-		border-top-left-radius: var(--route-card-radius);
-		border-bottom-left-radius: var(--route-card-radius);
-		display: grid;
-		place-items: center;
-	}
-
-	.route-card-left img {
-		display: block;
-		width: 80%;
-		height: auto;
-	}
-
-	.route-card-right {
-		flex: 0 1 20%;
-		border-top-right-radius: var(--route-card-radius);
-		border-bottom-right-radius: var(--route-card-radius);
-		background-image: url('/images/test-1.jpg');
-		background-position: center;
-		background-size: cover;
-	}
-
-	#route-cards .route-card:nth-child(1) .route-card-left {
-		background-color: var(--pianello-red);
-	}
-
-	#route-cards .route-card:nth-child(2) .route-card-left {
-		background-color: var(--pianello-yellow);
-	}
-
-	#route-cards .route-card:nth-child(3) .route-card-left {
-		background-color: var(--pianello-blue);
-	}
-
-	.route-card .name {
-		display: grid;
-		height: 100%;
-		align-content: center;
-		padding: 20px;
-		font-size: 20px;
-	}
-
-	.route-card .name > * {
-		flex: 1;
-	}
 </style>
diff --git a/frontend/src/routes/components/Path.svelte b/frontend/src/routes/components/Path.svelte
new file mode 100644
index 0000000..0bbcaa3
--- /dev/null
+++ b/frontend/src/routes/components/Path.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	export let type: string;
+	export let color: string;
+</script>
+
+<div class="route-card">
+	<div class="route-card-left" style="background-color: {color}">
+		<img src="/images/app-bar-logo.png" alt="logo" />
+	</div>
+	<div class="route-card-center">
+		<div class="name">
+			<div>Percorsi</div>
+			<div class="bold">{type}</div>
+		</div>
+	</div>
+	<div class="route-card-right" />
+</div>
+
+<style>
+	.route-card {
+		flex: 1;
+		--route-card-radius: 45px;
+		border-radius: var(--route-card-radius);
+		box-shadow: 0 0 27px #ccc;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		width: 90%;
+		display: flex;
+		background-color: var(--card-background-color);
+	}
+
+	.route-card > * {
+		flex: 1;
+	}
+
+	.route-card-left {
+		flex: 0 1 20%;
+		border-top-left-radius: var(--route-card-radius);
+		border-bottom-left-radius: var(--route-card-radius);
+		display: grid;
+		place-items: center;
+	}
+
+	.route-card-left img {
+		display: block;
+		width: 80%;
+		height: auto;
+	}
+
+	.route-card-right {
+		flex: 0 1 20%;
+		border-top-right-radius: var(--route-card-radius);
+		border-bottom-right-radius: var(--route-card-radius);
+		background-image: url('/images/test-1.jpg');
+		background-position: center;
+		background-size: cover;
+	}
+
+	.route-card .name {
+		display: grid;
+		height: 100%;
+		align-content: center;
+		padding: 20px;
+		font-size: 20px;
+	}
+
+	.route-card .name > * {
+		flex: 1;
+	}
+</style>