From 5ee702062178c7ccd2041dd4faf8a1cebae48ad4 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 12 Jan 2024 18:27:30 +0900
Subject: [PATCH] feat: add social items

---
 public/icons/discord.svg     |  3 +++
 public/icons/docs.svg        | 10 ++++++++
 public/icons/forum.svg       |  3 +++
 public/icons/x.svg           |  3 +++
 src/components/BU/BUHero.tsx | 50 ++++++++++++++++++++++++++++++------
 5 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 public/icons/discord.svg
 create mode 100644 public/icons/docs.svg
 create mode 100644 public/icons/forum.svg
 create mode 100644 public/icons/x.svg

diff --git a/public/icons/discord.svg b/public/icons/discord.svg
new file mode 100644
index 0000000..3a0754f
--- /dev/null
+++ b/public/icons/discord.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2701 5.33005C17.9401 4.71005 16.5001 4.26005 15.0001 4.00005C14.987 3.99963 14.9739 4.00209 14.9618 4.00728C14.9497 4.01246 14.9389 4.02023 14.9301 4.03005C14.7501 4.36005 14.5401 4.79005 14.4001 5.12005C12.8091 4.88005 11.1911 4.88005 9.60012 5.12005C9.46012 4.78005 9.25012 4.36005 9.06012 4.03005C9.05012 4.01005 9.02012 4.00005 8.99012 4.00005C7.49012 4.26005 6.06012 4.71005 4.72012 5.33005C4.71012 5.33005 4.70012 5.34005 4.69012 5.35005C1.97012 9.42005 1.22012 13.38 1.59012 17.3C1.59012 17.32 1.60012 17.34 1.62012 17.35C3.42012 18.67 5.15012 19.47 6.86012 20C6.89012 20.01 6.92012 20 6.93012 19.98C7.33012 19.43 7.69012 18.85 8.00012 18.24C8.02012 18.2 8.00012 18.16 7.96012 18.15C7.39012 17.93 6.85012 17.67 6.32012 17.37C6.28012 17.35 6.28012 17.29 6.31012 17.26C6.42012 17.18 6.53012 17.09 6.64012 17.01C6.66012 16.99 6.69012 16.99 6.71012 17C10.1501 18.57 13.8601 18.57 17.2601 17C17.2801 16.99 17.3101 16.99 17.3301 17.01C17.4401 17.1 17.5501 17.18 17.6601 17.27C17.7001 17.3 17.7001 17.36 17.6501 17.38C17.1301 17.69 16.5801 17.94 16.0101 18.16C15.9701 18.17 15.9601 18.22 15.9701 18.25C16.2901 18.86 16.6501 19.44 17.0401 19.99C17.0701 20 17.1001 20.01 17.1301 20C18.8501 19.47 20.5801 18.67 22.3801 17.35C22.4001 17.34 22.4101 17.32 22.4101 17.3C22.8501 12.77 21.6801 8.84005 19.3101 5.35005C19.3001 5.34005 19.2901 5.33005 19.2701 5.33005ZM8.52012 14.91C7.49012 14.91 6.63012 13.96 6.63012 12.79C6.63012 11.62 7.47012 10.67 8.52012 10.67C9.58012 10.67 10.4201 11.63 10.4101 12.79C10.4101 13.96 9.57012 14.91 8.52012 14.91ZM15.4901 14.91C14.4601 14.91 13.6001 13.96 13.6001 12.79C13.6001 11.62 14.4401 10.67 15.4901 10.67C16.5501 10.67 17.3901 11.63 17.3801 12.79C17.3801 13.96 16.5501 14.91 15.4901 14.91Z" fill="black"/>
+</svg>
diff --git a/public/icons/docs.svg b/public/icons/docs.svg
new file mode 100644
index 0000000..7ce97d7
--- /dev/null
+++ b/public/icons/docs.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2583_65221)">
+<path d="M14.2691 3H6.06762C5.77881 3.00749 5.50467 3.12633 5.30479 3.33069C5.10491 3.53506 4.99543 3.80844 5.00015 4.09143V19.9086C4.99543 20.1916 5.10491 20.4649 5.30479 20.6693C5.50467 20.8737 5.77881 20.9925 6.06762 21H17.9324C18.2212 20.9925 18.4953 20.8737 18.6952 20.6693C18.8951 20.4649 19.0046 20.1916 18.9999 19.9086V7.52571L14.2691 3ZM13.75 8.14286V4.05143L18.0082 8.14286H13.75Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_2583_65221">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/forum.svg b/public/icons/forum.svg
new file mode 100644
index 0000000..0f7b576
--- /dev/null
+++ b/public/icons/forum.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1 6.6H18.3V14.7H6.6V16.5C6.6 16.995 7.005 17.4 7.5 17.4H17.4L21 21V7.5C21 7.005 20.595 6.6 20.1 6.6ZM16.5 12V3.9C16.5 3.405 16.095 3 15.6 3H3.9C3.405 3 3 3.405 3 3.9V16.5L6.6 12.9H15.6C16.095 12.9 16.5 12.495 16.5 12Z" fill="black"/>
+</svg>
diff --git a/public/icons/x.svg b/public/icons/x.svg
new file mode 100644
index 0000000..3e47ac4
--- /dev/null
+++ b/public/icons/x.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9625 3H20.8766L14.5116 10.201L22 20H16.1373L11.5452 14.0559L6.29056 20H3.37525L10.1832 12.2972L3 3H9.01231L13.1626 8.43179L17.9625 3ZM16.9412 18.2742H18.5563L8.13356 4.63552H6.40219L16.9412 18.2742Z" fill="black"/>
+</svg>
diff --git a/src/components/BU/BUHero.tsx b/src/components/BU/BUHero.tsx
index 4d65021..d65e19e 100644
--- a/src/components/BU/BUHero.tsx
+++ b/src/components/BU/BUHero.tsx
@@ -4,13 +4,45 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { businessUnitMark } from '../../../utils/bu'
 import { Button } from '../Button'
-import ArrowUpRight from '../Icons/ArrowUpRight'
 
 interface Props {
   data: any
 }
 
 export const BUHero = ({ data }: Props) => {
+  const renderSocialIcon = (label: string) => {
+    switch (label) {
+      case 'X':
+        return <SocialIcon src="/icons/x.svg" width={24} height={24} alt="X" />
+      case 'Discord':
+        return (
+          <SocialIcon
+            src="/icons/discord.svg"
+            width={24}
+            height={24}
+            alt="Discord"
+          />
+        )
+      case 'Docs':
+        return (
+          <SocialIcon src="/icons/docs.svg" width={24} height={24} alt="Docs" />
+        )
+      case 'Forum':
+        return (
+          <SocialIcon
+            src="/icons/forum.svg"
+            width={24}
+            height={24}
+            alt="Forum"
+          />
+        )
+      default:
+        return (
+          <SocialIcon src="/icons/docs.svg" width={24} height={24} alt="Docs" />
+        )
+    }
+  }
+
   return (
     <Container>
       <Left>
@@ -83,10 +115,7 @@ export const BUHero = ({ data }: Props) => {
                         href={item.link}
                         target="_blank"
                       >
-                        {item?.label}
-                        <IconContainer>
-                          <ArrowUpRight />
-                        </IconContainer>
+                        {renderSocialIcon(item?.label)}
                       </CustomLink>
                     ))}
                   </Links>
@@ -415,9 +444,14 @@ const CustomLink = styled(Link)`
   }
 `
 
-const IconContainer = styled.div`
-  visibility: hidden;
-  display: none;
+const SocialIcon = styled(Image)`
+  width: 24px;
+  height: 24px;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    width: 18px;
+    height: 18px;
+  }
 `
 
 export default BUHero