Add navbar and move typewriter to components namespace

BeauFindlay/BeauFindlay/Components/Typewriter/ITypewriterNotificationService.cs

@@ -1,4 +1,4 @@
-namespace BeauFindlay.Features.Typewriter;
+namespace BeauFindlay.Components.Typewriter;
 
 public interface ITypewriterNotificationService
 {

BeauFindlay/BeauFindlay/Components/Typewriter/TypewriterConstants.cs

@@ -1,4 +1,4 @@
-namespace BeauFindlay.Features.Typewriter;
+namespace BeauFindlay.Components.Typewriter;
 
 public static class TypewriterConstants
 {

BeauFindlay/BeauFindlay/Components/Typewriter/TypewriterNotificationService.cs

@@ -1,4 +1,4 @@
-namespace BeauFindlay.Features.Typewriter;
+namespace BeauFindlay.Components.Typewriter;
 
 public class TypewriterNotificationService : ITypewriterNotificationService
 {

BeauFindlay/BeauFindlay/Layout/MainLayout.razor

@@ -1,13 +1,7 @@
 @inherits LayoutComponentBase
 
-@inject ITypewriterNotificationService TypingNotification
-
 <div class="flex flex-col min-h-screen">
-    <nav class="flex items-center justify-center h-20 space-x-6">
+    <NavBar/>
-        <NavLink href="/" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">Home</NavLink>
-        <NavLink href="/this" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">This App</NavLink>
-        <NavLink href="/contact" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">Contact</NavLink>
-    </nav>
     
     <div class="px-4 md:px-8">
         @Body
@@ -15,8 +9,3 @@
 
     <Footer></Footer>
 </div>
-
-@code {
-
-
-}

BeauFindlay/BeauFindlay/Layout/NavBar.razor

@@ -0,0 +1,11 @@
+<nav class="flex items-center justify-center py-12 space-x-8 fade-in">
+    <NavLink href="/" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+        Home
+    </NavLink>
+    <NavLink href="/contact" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+        Contact
+    </NavLink>
+    <NavLink href="/this" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+        This App
+    </NavLink>
+</nav>

BeauFindlay/BeauFindlay/Program.cs

@@ -1,5 +1,5 @@
 using BeauFindlay;
-using BeauFindlay.Features.Typewriter;
+using BeauFindlay.Components.Typewriter;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 

BeauFindlay/BeauFindlay/_Imports.razor

@@ -8,4 +8,4 @@
 @using Microsoft.JSInterop
 @using BeauFindlay
 @using BeauFindlay.Layout
-@using BeauFindlay.Features.Typewriter
+@using BeauFindlay.Components.Typewriter

BeauFindlay/BeauFindlay/wwwroot/css/app.min.css

@@ -581,22 +581,22 @@ video {
   margin-top: auto;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .flex {
   display: flex;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-10 {
-  height: 2.5rem;
-}
-
 .h-20 {
   height: 5rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -619,12 +619,14 @@ video {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.rounded {
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
-  border-radius: 0.25rem;
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.border {
+.rounded {
-  border-width: 1px;
+  border-radius: 0.25rem;
 }
 
 .border-l-2 {
@@ -635,11 +637,6 @@ video {
   border-right-width: 2px;
 }
 
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -649,13 +646,9 @@ video {
   padding: 2rem;
 }
 
-.p-4 {
+.px-2 {
-  padding: 1rem;
+  padding-left: 0.5rem;
-}
+  padding-right: 0.5rem;
-
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
 }
 
 .px-4 {
@@ -663,9 +656,24 @@ video {
   padding-right: 1rem;
 }
 
-.px-2 {
+.py-10 {
-  padding-left: 0.5rem;
+  padding-top: 2.5rem;
-  padding-right: 0.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-28 {
+  padding-top: 7rem;
+  padding-bottom: 7rem;
+}
+
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
 }
 
 .font-mono {
@@ -677,14 +685,9 @@ video {
   line-height: 2rem;
 }
 
-.text-3xl {
+.text-4xl {
-  font-size: 1.875rem;
+  font-size: 2.25rem;
-  line-height: 2.25rem;
+  line-height: 2.5rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
 }
 
 .text-xl {
@@ -697,15 +700,24 @@ video {
   line-height: 1rem;
 }
 
-.text-4xl {
+.text-3xl {
-  font-size: 2.25rem;
+  font-size: 1.875rem;
-  line-height: 2.5rem;
+  line-height: 2.25rem;
+}
+
+.font-semibold {
+  font-weight: 600;
 }
 
 .leading-5 {
   line-height: 1.25rem;
 }
 
+.text-slate-100 {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
 .text-slate-200 {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity));
@@ -716,11 +728,6 @@ video {
   color: rgb(248 250 252 / var(--tw-text-opacity));
 }
 
-.text-slate-100 {
-  --tw-text-opacity: 1;
-  color: rgb(241 245 249 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -734,11 +741,6 @@ video {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.subpixel-antialiased {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
 @keyframes blink {
   from, to {
     opacity: 1
@@ -799,10 +801,6 @@ video {
     justify-content: space-between;
   }
 
-  .md\:p-8 {
-    padding: 2rem;
-  }
-
   .md\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;