From 6984b3dd89597c9556c2a55292ad5c9ecb29f1b4 Mon Sep 17 00:00:00 2001
From: Chai Landau <112015853+chailandau@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:11:20 -0500
Subject: [PATCH] feat: add only icons styling (#7)

---
 public/icons/linkedin.svg        |  8 ++++++
 public/icons/x.svg               |  6 +++++
 public/icons/youtube.svg         |  5 ++++
 src/components/Footer/Footer.tsx | 43 +++++++++++++++++++++++++++-----
 src/styles/components/footer.css | 12 ++++++++-
 5 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 public/icons/linkedin.svg
 create mode 100644 public/icons/x.svg
 create mode 100644 public/icons/youtube.svg

diff --git a/public/icons/linkedin.svg b/public/icons/linkedin.svg
new file mode 100644
index 0000000..431a2f1
--- /dev/null
+++ b/public/icons/linkedin.svg
@@ -0,0 +1,8 @@
+<svg height="72" width="72" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36Z" fill="#444950" />
+        <path
+            d="M59 57h-9.04V41.602c0-4.222-1.605-6.581-4.946-6.581-3.635 0-5.535 2.455-5.535 6.58V57h-8.712V27.667h8.712v3.95s2.62-4.847 8.845-4.847C54.546 26.77 59 30.57 59 38.428V57ZM20.373 23.826c-2.968 0-5.373-2.424-5.373-5.413C15 15.423 17.405 13 20.373 13c2.967 0 5.37 2.424 5.37 5.413 0 2.989-2.403 5.413-5.37 5.413ZM15.873 57h9.086V27.667h-9.085V57Z"
+            fill="#FFF" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/x.svg b/public/icons/x.svg
new file mode 100644
index 0000000..00a4de4
--- /dev/null
+++ b/public/icons/x.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 965 965">
+    <path fill="#444950" stroke="#fff" stroke-miterlimit="10"
+        d="M482.28 963.93c265.831 0 481.33-215.499 481.33-481.33S748.111 1.27 482.28 1.27.95 216.769.95 482.6 216.45 963.93 482.28 963.93Z" />
+    <path fill="#fff"
+        d="m185.78 203.731 230.07 307.62-231.52 250.11h52.11l202.7-218.98 163.77 218.98h177.32l-243.02-324.92 215.5-232.81H700.6l-186.67 201.67-150.83-201.67H185.78Zm76.63 38.38h81.46l359.72 480.97h-81.46l-359.72-480.97Z" />
+</svg>
\ No newline at end of file
diff --git a/public/icons/youtube.svg b/public/icons/youtube.svg
new file mode 100644
index 0000000..814ae34
--- /dev/null
+++ b/public/icons/youtube.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300" height="300">
+    <rect width="300" height="300" fill="#444950" ry="150" />
+    <path fill="#fff"
+        d="M149.938 79.223s-63.22 0-79.086 4.123c-8.496 2.374-15.492 9.37-17.866 17.99-4.123 15.867-4.123 48.727-4.123 48.727s0 32.984 4.123 48.601c2.374 8.62 9.245 15.491 17.866 17.865 15.992 4.248 79.086 4.248 79.086 4.248s63.344 0 79.21-4.123c8.621-2.373 15.492-9.12 17.74-17.865 4.249-15.742 4.249-48.601 4.249-48.601s.125-32.985-4.248-48.852c-2.25-8.62-9.12-15.491-17.74-17.74-15.867-4.373-79.211-4.373-79.211-4.373zm-20.116 40.48 52.6 30.36-52.6 30.234v-60.594z" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 32c6689..8f3a213 100644
--- 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
index 01ffb08..02da416 100644
--- 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;