feat: add not found (#5)

* feat: add page not found styles

* refactor: change nav items to use grid

Author: chailandau

src/components/ContentNav/ContentNav.tsx

@@ -20,15 +20,19 @@ const ContentNav: FC<ContentNavProps> = ({
   );
   return (
     <div className="content-nav">
-      <button>
-        {Chevron}
-        {prevText}
-      </button>
+      <div className="nav-item prev">
+        <a href="">
+          {Chevron}
+          <span>{prevText}</span>
+        </a>
+      </div>
       {current && <div className="current middle">{current}</div>}
-      <button>
-        {nextText}
-        {Chevron}
-      </button>
+      <div className="nav-item next">
+        <a href="">
+          <span>{nextText}</span>
+          {Chevron}
+        </a>
+      </div>
       {current && <div className="current bottom">{current}</div>}
     </div>
   );

src/styles/components/content-nav.css

@@ -1,17 +1,25 @@
 .content-nav {
-  @apply flex gap-y-2 justify-between border-b border-b-gray-200 pb-4 flex-wrap mt-5 sm:flex-nowrap dark:border-b-gray-700;
-  button {
-    @apply flex items-center gap-2 text-gray-500 hover:underline focus-visible:underline px-0 w-2/4 sm:w-auto dark:text-gray-300;
-    &:first-of-type img {
-      @apply rotate-90;
+  @apply flex gap-y-2 justify-between border-b border-b-gray-200 pb-4 flex-wrap mt-5 sm:flex-nowrap dark:border-b-gray-700 sm:grid sm:grid-cols-3;
+
+  .nav-item {
+    a {
+      @apply flex items-center gap-2 text-gray-500 hover:underline focus-visible:underline px-0 sm:w-auto dark:text-gray-300 w-full;
     }
-    &:last-of-type {
-      @apply justify-end;
-      img {
-        @apply -rotate-90;
+    &.prev {
+      a img {
+        @apply rotate-90;
+      }
+    }
+    &.next {
+      a {
+        @apply justify-end;
+        img {
+          @apply -rotate-90;
+        }
       }
     }
   }
+
   .current {
     @apply text-2xs text-center sm:text-xs;
     &.middle {

src/styles/components/not-found.css

@@ -0,0 +1,9 @@
+.not-found {
+  @apply pt-6 flex-grow justify-center;
+  .heading {
+    @apply text-lg min-[420px]:text-xl transition-font-size xs:text-2xl;
+  }
+  .button {
+    @apply mr-auto;
+  }
+}

src/styles/main.css

@@ -10,3 +10,4 @@
 @import "./components/content-nav.css";
 @import "./components/card-grid.css";
 @import "./components/switchback.css";
+@import "./components/not-found.css";