feat: add only icons styling (#7)

octoml · Mar 8, 2024 · 6984b3d · 6984b3d
1 parent 7320140
commit 6984b3d
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 7 deletions.
diff --git a/public/icons/linkedin.svg b/public/icons/linkedin.svg
diff --git a/public/icons/x.svg b/public/icons/x.svg
diff --git a/public/icons/youtube.svg b/public/icons/youtube.svg
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,13 +1,9 @@
+import Image from "next/image";
+
 const Footer = () => {
   return (
     <footer>
       <div className="container m-auto">
-        <p className="credit">
-          Data sourced from{" "}
-          <a href="https://huggingface.co/" target="_blank">
-            HuggingFace
-          </a>
-        </p>
         <nav>
           <ul>
             <li>
@@ -18,6 +14,41 @@ const Footer = () => {
                 Powered by OctoAI
               </a>
             </li>
+            <li className="only-icons">
+              <a
+                href="https://www.youtube.com/channel/UCbUrHpUyw2q5s-oe6t8ljnA"
+                target="_blank"
+              >
+                <Image
+                  src="/icons/youtube.svg"
+                  alt="Youtube Icon"
+                  width="22"
+                  height="22"
+                />
+              </a>
+              <a href="https://twitter.com/octoml" target="_blank">
+                <Image src="/icons/x.svg" alt="X Icon" width="22" height="22" />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/octoaicloud"
+                target="_blank"
+              >
+                <Image
+                  src="/icons/linkedin.svg"
+                  alt="LinkedIn Icon"
+                  width="22"
+                  height="22"
+                />
+              </a>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              Data sourced from{" "}
+              <a href="https://huggingface.co/" target="_blank">
+                HuggingFace
+              </a>
+            </li>
             <li>
               <a
                 href="https://octo.ai/legals/privacy-policy/?utm_source=llmtimecapsule"

diff --git a/src/styles/components/footer.css b/src/styles/components/footer.css
@@ -28,8 +28,18 @@ footer {
       @apply text-gray-600 dark:text-gray-400;
     }
     li {
+      &.with-icon a,
+      &.only-icons {
+        @apply flex items-center justify-center;
+      }
       &.with-icon a {
-        @apply flex items-center justify-center gap-2;
+        @apply gap-2;
+      }
+      &.only-icons {
+        @apply gap-7;
+      }
+      &.only-icons a {
+        @apply -m-4 p-4;
       }
       &.multilink {
         @apply flex flex-nowrap gap-1 m-auto;