From 65005818855529dad7137ac72a572445f4ff63ea Mon Sep 17 00:00:00 2001
From: Laurent <58115082+naaturel@users.noreply.github.com>
Date: Sat, 1 Mar 2025 14:49:11 +0100
Subject: [PATCH] Add TextBlock component

---
 src/assets/main.css           |  5 +++
 src/components/TextBlock.vue  | 37 ++++++++++++++++++++++
 src/layouts/LayoutDefault.vue |  6 ++--
 src/views/AboutView.vue       | 28 ++++++++++-------
 src/views/CreateView.vue      |  7 ++++-
 src/views/HomeView.vue        | 59 +++++++++++++++--------------------
 src/views/JoinView.vue        | 15 ++++++++-
 7 files changed, 106 insertions(+), 51 deletions(-)
 create mode 100644 src/components/TextBlock.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index c51a763..0a4e976 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -17,6 +17,11 @@ body
     background: var(--background-color);
 }
 
+.colored-text
+{
+    color: var(--secondary-color);
+}
+
 footer
 {
     position:absolute;
diff --git a/src/components/TextBlock.vue b/src/components/TextBlock.vue
new file mode 100644
index 0000000..1c017b7
--- /dev/null
+++ b/src/components/TextBlock.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="text-block">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+
+.text-block {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0 1vw 0 1vw;
+}
+
+.text-block {
+  flex-direction: column;
+  padding: 30px;
+  min-width: 250px;
+}
+
+.text-block {
+  justify-content: start;
+  word-break: break-word;
+  height: fit-content;
+
+  border-radius: var(--radius);
+  border-left: solid 4px;
+  background: rgb(239, 239, 239);
+}
+
+</style>
diff --git a/src/layouts/LayoutDefault.vue b/src/layouts/LayoutDefault.vue
index bb8113c..f4fc2d1 100644
--- a/src/layouts/LayoutDefault.vue
+++ b/src/layouts/LayoutDefault.vue
@@ -8,7 +8,7 @@ import NavLink from "@/components/NavLink.vue";
 
     <nav class="nav">
       <p>Let's<br>Meet</p>
-      <div class="nav-actions">
+      <div class="nav-actions-group">
         <NavLink path="/" description="Home"></NavLink>
         <NavLink path="/login" description="Log in"></NavLink>
         <NavLink path="/about" description="About"></NavLink>
@@ -38,7 +38,7 @@ nav {
   align-items: center;
   justify-content: space-between;
   min-height: 10vh;
-  border: 1px solid;
+  border-bottom: 1px solid;
   border-radius: var(--radius);
   background-color: var(--header-color);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
@@ -51,7 +51,7 @@ nav p {
   margin: 4px 0 4px 0;
 }
 
-.nav-actions {
+.nav-actions-group {
   display: flex;
   flex-direction: row;
   gap: 1vw;
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 19bc2c8..ac22907 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
 
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-  <h1>About</h1>
-  <p>
-    Inspired by <a href="https://when2meet.com">when2meet</a>, Let's meet is a free and open-source
-    app that allows you and your friends to find a date to meet. From now on, there is no need to spend
-    hours and hours trying to find a suitable day for everyone.
-  </p>
 
-  <p>
-    Developed and hosted by Naaturel<br>
-    Check my links out !<br>
-    <a href="https://github.com/">Github</a><br>
-    <a href="https://bsky.app/profile/naaturel.be">Blue Sky</a>
-  </p>
+  <TextBlock>
+    <h1>About</h1>
+    <p>
+      Inspired by <a href="https://when2meet.com">when2meet</a>, Let's meet is a free and open-source
+      app that allows you and your friends to find a date to meet. From now on, there is no need to spend
+      hours and hours trying to find a suitable day for everyone.
+    </p>
+
+    <p>
+      Developed and hosted by Naaturel<br>
+      Check my links out !<br>
+      <a href="https://github.com/">Github</a><br>
+      <a href="https://bsky.app/profile/naaturel.be">Blue Sky</a>
+    </p>
+  </TextBlock>
 
 </template>
 
diff --git a/src/views/CreateView.vue b/src/views/CreateView.vue
index fc3c185..c0071f9 100644
--- a/src/views/CreateView.vue
+++ b/src/views/CreateView.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 
+import Calendar from "@/components/Calendar.vue";
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-  <h1>Create an event</h1>
+  <TextBlock>
+    <h1>Create an event</h1>
+  </TextBlock>
+  <Calendar />
 </template>
 
 <style scoped>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4fa1135..7224f75 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 
 import NavLink from "@/components/NavLink.vue";
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
 
   <div class="container">
-    <div class="introduction">
+    <TextBlock class="introduction">
       <h1>Welcome !</h1>
       <p>
         This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
@@ -16,12 +17,12 @@ import NavLink from "@/components/NavLink.vue";
         Yes I know i could have use
         a Lorem Ipsum but it seems more natural with words everyone can understand
       </p>
-    </div>
+      </TextBlock>
 
-      <div class="actions">
+      <div class="actions-group">
         <h1>Meet up <span class="colored-text">now</span> !</h1>
-        <NavLink path="/create" description="Join"></NavLink>
-        <NavLink path="/join" description="Create"></NavLink>
+        <NavLink path="/create" description="Create"></NavLink>
+        <NavLink path="/join" description="Join"></NavLink>
     </div>
   </div>
 
@@ -30,7 +31,7 @@ import NavLink from "@/components/NavLink.vue";
 
 <style scoped>
 
-.container, .introduction, .actions {
+.container, .actions-group {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -43,35 +44,20 @@ import NavLink from "@/components/NavLink.vue";
   gap: 10vw;
 }
 
-.introduction, .actions {
-  flex-direction: column;
-  padding: 30px;
-  min-width: 250px;
-}
-
-.introduction {
-  justify-content: start;
-  word-break: break-word;
-  height: fit-content;
-
-  border-radius: var(--radius);
-  border-left: solid 4px;
-  background: rgb(239, 239, 239);
-}
-
 .introduction p
 {
   width: 80%;
   text-align: justify;
 }
 
-.colored-text
-{
-  color: var(--secondary-color);
+.actions-group {
+  flex-direction: column;
+  padding: 30px;
+  min-width: 250px;
 }
 
-.actions {
-  justify-content: start;
+.actions-group {
+  justify-content: center;
   gap: 4vh;
   height: fit-content;
   border-radius: var(--radius);
@@ -79,8 +65,13 @@ import NavLink from "@/components/NavLink.vue";
   margin-bottom: 5vh;
 }
 
-.actions::before,
-.actions::after {
+.actions-group h1
+{
+  margin-top: 0;
+}
+
+.actions-group::before,
+.actions-group::after {
   content: "";
   position: absolute;
   width: 5%;
@@ -88,7 +79,7 @@ import NavLink from "@/components/NavLink.vue";
   border: 4px solid black;
 }
 
-.actions::before {
+.actions-group::before {
   top: 0;
   left: 0;
   border-radius: var(--radius);
@@ -96,7 +87,7 @@ import NavLink from "@/components/NavLink.vue";
   border-bottom: none;
 }
 
-.actions::after {
+.actions-group::after {
   bottom: 0;
   right: 0;
   border-radius: var(--radius);
@@ -115,7 +106,7 @@ import NavLink from "@/components/NavLink.vue";
     min-height: 40vh;
   }
 
-  .actions {
+  .actions-group {
     width: 25%;
     min-height: 35vh;
   }
@@ -131,7 +122,7 @@ import NavLink from "@/components/NavLink.vue";
     flex-direction: column;
   }
 
-  .introduction, .actions {
+  .introduction, .actions-group {
     width: 95%;
   }
 
@@ -139,7 +130,7 @@ import NavLink from "@/components/NavLink.vue";
     min-height: 25vh;
   }
 
-  .actions {
+  .actions-group {
     min-height: 40vh;
   }
 
diff --git a/src/views/JoinView.vue b/src/views/JoinView.vue
index f5d7b9b..2664b84 100644
--- a/src/views/JoinView.vue
+++ b/src/views/JoinView.vue
@@ -1,9 +1,22 @@
 <script setup lang="ts">
 
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-  <h1>Join an event</h1>
+
+  <TextBlock>
+    <h1>Join an event</h1>
+    <p>
+      This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
+      bla bla bla I'm just writing things nobody will read to fill the space and see how it looks.
+    </p>
+    <p>
+      Yes I know i could have use
+      a Lorem Ipsum but it seems more natural with words everyone can understand
+    </p>
+  </TextBlock>
+
 </template>
 
 <style scoped>