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 @@ + + + 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 @@ + + + + + + + + + + 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 @@ + + + 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 @@ + + + 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 + case 'Discord': + return ( + + ) + case 'Docs': + return ( + + ) + case 'Forum': + return ( + + ) + default: + return ( + + ) + } + } + return ( @@ -83,10 +115,7 @@ export const BUHero = ({ data }: Props) => { href={item.link} target="_blank" > - {item?.label} - - - + {renderSocialIcon(item?.label)} ))} @@ -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