From b7c2266795438cc8ce2a74b948ca50475c5674e5 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Mon, 18 Nov 2024 16:20:53 +0100
Subject: [PATCH] feat: add Instagram and Threads social media links

---
 app/(root)/contact/page.tsx |  2 +-
 components/ui/icons.tsx     | 62 ++++++++++++++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/app/(root)/contact/page.tsx b/app/(root)/contact/page.tsx
index 42e72ae..3fd7c04 100644
--- a/app/(root)/contact/page.tsx
+++ b/app/(root)/contact/page.tsx
@@ -186,7 +186,7 @@ const ContactUs = () => {
               ))}
             </ul>
             <Separator />
-            <ul className="flex justify-center space-x-3 my-6">
+            <ul className="flex justify-center my-6">
               <Iconss />
             </ul>
             <Separator />
diff --git a/components/ui/icons.tsx b/components/ui/icons.tsx
index 5947fad..7c298e7 100644
--- a/components/ui/icons.tsx
+++ b/components/ui/icons.tsx
@@ -10,7 +10,9 @@ const Iconss = () => {
         x: "https://x.com/SVR_JS",
         Mastodon: "https://mastodon.social/@svrjs",
         Bluesky: "https://bsky.app/profile/svrjs.org",
-        Odysee: "https://odysee.com/@SVRJS"
+        Odysee: "https://odysee.com/@SVRJS",
+        instagram: "https://instagram.com/svrjs.webserver",
+        Threads: "https://threads.net/@svrjs.webserver"
       }
     }
   };
@@ -23,7 +25,7 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "sm"
+          size: "icon"
         })}
       >
         <span className="sr-only">X icon</span>
@@ -46,7 +48,7 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "sm"
+          size: "icon"
         })}
       >
         <span className="sr-only">Mastodon icon</span>
@@ -71,7 +73,7 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "sm"
+          size: "icon"
         })}
       >
         <span className="sr-only">Bluesky icon</span>
@@ -96,7 +98,7 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "sm"
+          size: "icon"
         })}
       >
         <span className="sr-only">Odysee icon</span>
@@ -114,6 +116,56 @@ const Iconss = () => {
           />
         </svg>
       </Link>
+
+      <Link
+        href={cards.aboutCard.socialLinks.instagram}
+        target="_blank"
+        rel="me"
+        className={buttonVariants({
+          variant: "ghost",
+          size: "icon"
+        })}
+      >
+        <span className="sr-only">Instagram icon</span>
+
+        <svg
+          width="25"
+          height="25"
+          viewBox="0 0 1000 1000"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M292.92 3.5c-53.2 2.51-89.53 11-121.29 23.48-32.87 12.81-60.73 30-88.45 57.82s-44.79 55.7-57.51 88.62c-12.31 31.83-20.65 68.19-23 121.42S-.2 365.18.06 500.96.92 653.76 3.5 707.1c2.54 53.19 11 89.51 23.48 121.28 12.83 32.87 30 60.72 57.83 88.45s55.69 44.76 88.69 57.5c31.8 12.29 68.17 20.67 121.39 23s70.35 2.87 206.09 2.61 152.83-.86 206.16-3.39 89.46-11.05 121.24-23.47c32.87-12.86 60.74-30 88.45-57.84s44.77-55.74 57.48-88.68c12.32-31.8 20.69-68.17 23-121.35 2.33-53.37 2.88-70.41 2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45s-55.74-44.8-88.67-57.48c-31.82-12.31-68.17-20.7-121.39-23S634.83-.2 499.04.06 346.25.9 292.92 3.5m5.84 903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29 2.53-202c2.08-48.71 10.23-75.21 17-92.84 9-23.39 19.84-40 37.29-57.57s34.1-28.39 57.43-37.51c17.62-6.88 44.06-15.06 92.79-17.38 52.73-2.5 68.53-3 202-3.29s149.31.21 202.06 2.53c48.71 2.12 75.22 10.19 92.83 17 23.37 9 40 19.81 57.57 37.29s28.4 34.07 37.52 57.45c6.89 17.57 15.07 44 17.37 92.76 2.51 52.73 3.08 68.54 3.32 202s-.23 149.31-2.54 202c-2.13 48.75-10.21 75.23-17 92.89-9 23.35-19.85 40-37.31 57.56s-34.09 28.38-57.43 37.5c-17.6 6.87-44.07 15.07-92.76 17.39-52.73 2.48-68.53 3-202.05 3.29s-149.27-.25-202-2.53m407.6-674.61a60 60 0 1 0 59.88-60.1 60 60 0 0 0-59.88 60.1M243.27 500.5c.28 141.8 115.44 256.49 257.21 256.22S757.02 641.3 756.75 499.5 641.29 242.98 499.5 243.26 243 358.72 243.27 500.5m90.06-.18a166.67 166.67 0 1 1 167 166.34 166.65 166.65 0 0 1-167-166.34"
+            fill="currentColor"
+          />
+        </svg>
+      </Link>
+
+      <Link
+        href={cards.aboutCard.socialLinks.Threads}
+        target="_blank"
+        rel="me"
+        className={buttonVariants({
+          variant: "ghost",
+          size: "icon"
+        })}
+      >
+        <span className="sr-only">Threads icon</span>
+
+        <svg
+          width="25"
+          height="25"
+          viewBox="0 0 878 1000"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M446.7 1000h-.3c-149.2-1-263.9-50.2-341-146.2C36.9 768.3 1.5 649.4.3 500.4v-.7c1.2-149.1 36.6-267.9 105.2-353.4C182.5 50.2 297.3 1 446.4 0h.6c114.4.8 210.1 30.2 284.4 87.4 69.9 53.8 119.1 130.4 146.2 227.8l-85 23.7c-46-165-162.4-249.3-346-250.6-121.2.9-212.9 39-272.5 113.2C118.4 271 89.6 371.4 88.5 500c1.1 128.6 29.9 229 85.7 298.5 59.6 74.3 151.3 112.4 272.5 113.2 109.3-.8 181.6-26.3 241.7-85.2 68.6-67.2 67.4-149.7 45.4-199.9-12.9-29.6-36.4-54.2-68.1-72.9-8 56.3-25.9 101.9-53.5 136.3-36.9 45.9-89.2 71-155.4 74.6-50.1 2.7-98.4-9.1-135.8-33.4-44.3-28.7-70.2-72.5-73-123.5-2.7-49.6 17-95.2 55.4-128.4 36.7-31.7 88.3-50.3 149.3-53.8 44.9-2.5 87-.5 125.8 5.9-5.2-30.9-15.6-55.5-31.2-73.2-21.4-24.4-54.5-36.8-98.3-37.1h-1.2c-35.2 0-83 9.7-113.4 55L261.2 327c40.8-60.6 107-94 186.6-94h1.8c133.1.8 212.4 82.3 220.3 224.5 4.5 1.9 9 3.9 13.4 5.9 62.1 29.2 107.5 73.4 131.4 127.9 33.2 75.9 36.3 199.6-64.5 298.3C673.1 965 579.6 999.1 447 1000h-.3zm41.8-487.1c-10.1 0-20.3.3-30.8.9-76.5 4.3-124.2 39.4-121.5 89.3 2.8 52.3 60.5 76.6 116 73.6 51-2.7 117.4-22.6 128.6-154.6-28.2-6.1-59.1-9.2-92.3-9.2z"
+            fill="currentColor"
+          />
+        </svg>
+      </Link>
     </>
   );
 };