👋🏻 Add visit link (#84)

efdevcon · Jun 25, 2024 · 5c9e868 · 5c9e868
1 parent 9d9a7c5
commit 5c9e868
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 8 deletions.
diff --git a/packages/frontend/src/components/icons/LanguageIcon.tsx b/packages/frontend/src/components/icons/LanguageIcon.tsx
@@ -0,0 +1,17 @@
+import { IconProps } from '@/components/icons/IconBase'
+
+export const LanguageIcon = ({ color = 'black', size = 16 }: IconProps) => {
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
+      <mask id="mask0_3774_27817" maskUnits="userSpaceOnUse" x="-1" y="0" width="17" height="16">
+        <rect x="-0.5" width="16" height="16" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_3774_27817)">
+        <path
+          d="M7.50033 14.3337C6.63366 14.3337 5.8141 14.167 5.04166 13.8337C4.26966 13.5003 3.59744 13.0474 3.02499 12.475C2.45299 11.903 2.00033 11.231 1.66699 10.459C1.33366 9.68655 1.16699 8.86699 1.16699 8.00033C1.16699 7.12255 1.33366 6.30033 1.66699 5.53366C2.00033 4.76699 2.45299 4.09744 3.02499 3.52499C3.59744 2.95299 4.26966 2.50033 5.04166 2.16699C5.8141 1.83366 6.63366 1.66699 7.50033 1.66699C8.3781 1.66699 9.20033 1.83366 9.96699 2.16699C10.7337 2.50033 11.403 2.95299 11.975 3.52499C12.5474 4.09744 13.0003 4.76699 13.3337 5.53366C13.667 6.30033 13.8337 7.12255 13.8337 8.00033C13.8337 8.86699 13.667 9.68655 13.3337 10.459C13.0003 11.231 12.5474 11.903 11.975 12.475C11.403 13.0474 10.7337 13.5003 9.96699 13.8337C9.20033 14.167 8.3781 14.3337 7.50033 14.3337ZM7.50033 13.317C7.84477 12.8725 8.13099 12.4199 8.35899 11.959C8.58655 11.4977 8.7781 10.9948 8.93366 10.4503H6.06699C6.22255 11.0059 6.41433 11.5141 6.64233 11.975C6.86988 12.4363 7.15588 12.8837 7.50033 13.317ZM6.21699 13.1337C5.96144 12.767 5.73099 12.3503 5.52566 11.8837C5.31988 11.417 5.16144 10.9392 5.05033 10.4503H2.78366C3.13921 11.1392 3.61144 11.7199 4.20033 12.1923C4.78921 12.6643 5.46144 12.9781 6.21699 13.1337ZM8.78366 13.1337C9.53921 12.9781 10.2114 12.6643 10.8003 12.1923C11.3892 11.7199 11.8614 11.1392 12.217 10.4503H9.95033C9.81699 10.9392 9.65032 11.4197 9.45033 11.8917C9.25033 12.3641 9.0281 12.7781 8.78366 13.1337ZM2.36699 9.45033H4.85033C4.80588 9.20588 4.77255 8.9641 4.75033 8.72499C4.7281 8.48633 4.71699 8.24477 4.71699 8.00033C4.71699 7.75588 4.7281 7.5141 4.75033 7.27499C4.77255 7.03632 4.80588 6.79477 4.85033 6.55032H2.36699C2.30033 6.77255 2.25033 7.00588 2.21699 7.25033C2.18366 7.49477 2.16699 7.74477 2.16699 8.00033C2.16699 8.25588 2.18366 8.50588 2.21699 8.75033C2.25033 8.99477 2.30033 9.2281 2.36699 9.45033ZM5.85033 9.45033H9.15033C9.19477 9.20588 9.2281 8.96699 9.25033 8.73366C9.27255 8.50033 9.28366 8.25588 9.28366 8.00033C9.28366 7.74477 9.27255 7.50032 9.25033 7.26699C9.2281 7.03366 9.19477 6.79477 9.15033 6.55032H5.85033C5.80588 6.79477 5.77255 7.03366 5.75033 7.26699C5.7281 7.50032 5.71699 7.74477 5.71699 8.00033C5.71699 8.25588 5.7281 8.50033 5.75033 8.73366C5.77255 8.96699 5.80588 9.20588 5.85033 9.45033ZM10.1503 9.45033H12.6337C12.7003 9.2281 12.7503 8.99477 12.7837 8.75033C12.817 8.50588 12.8337 8.25588 12.8337 8.00033C12.8337 7.74477 12.817 7.49477 12.7837 7.25033C12.7503 7.00588 12.7003 6.77255 12.6337 6.55032H10.1503C10.1948 6.79477 10.2281 7.03632 10.2503 7.27499C10.2725 7.5141 10.2837 7.75588 10.2837 8.00033C10.2837 8.24477 10.2725 8.48633 10.2503 8.72499C10.2281 8.9641 10.1948 9.20588 10.1503 9.45033ZM9.95033 5.55033H12.217C11.8614 4.85033 11.3921 4.26966 10.809 3.80833C10.2254 3.34744 9.55033 3.0281 8.78366 2.85033C9.03921 3.23921 9.26699 3.6641 9.46699 4.12499C9.66699 4.58633 9.8281 5.06144 9.95033 5.55033ZM6.06699 5.55033H8.93366C8.7781 4.99477 8.58099 4.48077 8.34232 4.00833C8.10321 3.53633 7.82255 3.09477 7.50033 2.68366C7.1781 3.09477 6.89766 3.53633 6.65899 4.00833C6.41988 4.48077 6.22255 4.99477 6.06699 5.55033ZM2.78366 5.55033H5.05033C5.17255 5.06144 5.33366 4.58633 5.53366 4.12499C5.73366 3.6641 5.96144 3.23921 6.21699 2.85033C5.43921 3.0281 4.76144 3.34744 4.18366 3.80833C3.60588 4.26966 3.13921 4.85033 2.78366 5.55033Z"
+          fill={color}
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/packages/frontend/src/components/icons/index.ts b/packages/frontend/src/components/icons/index.ts
@@ -18,3 +18,4 @@ export * from './ArchblockLogoIcon'
 export * from './FairyLogoIcon'
 export * from './FarcasterIcon'
 export * from './TwitterIcon'
+export * from './LanguageIcon'
diff --git a/packages/frontend/src/components/topBar/TopBar.tsx b/packages/frontend/src/components/topBar/TopBar.tsx
@@ -3,34 +3,63 @@ import { Logo } from '@/components/icons'
 import { Colors } from '@/styles/colors'
 import { AccountButton } from '@/components/topBar/AccountButton'
 import { MediaQueries } from '@/styles/mediaQueries'
+import { VisitDevconLink } from './VisitDevconLink'
+import { useResponsiveHelpers } from '@/hooks/useResponsiveHelper'
 
 export const TopBar = () => {
+  const { isMobileWidth } = useResponsiveHelpers()
+
   return (
     <TopBarContainer>
-      <HomeLink href="/">
-        <Logo />
-      </HomeLink>
-      <AccountButton />
+      <RowWrapper>
+        <HomeLink href="/">
+          <Logo />
+        </HomeLink>
+        <ButtonWrapper>
+          {!isMobileWidth && <VisitDevconLink />}
+          <AccountButton />
+        </ButtonWrapper>
+      </RowWrapper>
+      {isMobileWidth && <VisitDevconLink />}
     </TopBarContainer>
   )
 }
 
 const TopBarContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
   padding: 8px 68px;
   background-color: ${Colors.White};
   position: sticky;
   top: 0;
   z-index: 99;
 
   ${MediaQueries.medium} {
-    padding: 12px 32px;
+    flex-direction: column;
+    padding: 0;
+    gap: 0;
+  }
+`
+
+const RowWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  ${MediaQueries.medium} {
     gap: 40px;
+    border-bottom: 1px solid #cdcdcd;
+    padding: 12px 32px;
   }
 `
+
 const HomeLink = styled.a`
   line-height: 1;
 `
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`
diff --git a/packages/frontend/src/components/topBar/VisitDevconLink.tsx b/packages/frontend/src/components/topBar/VisitDevconLink.tsx
@@ -0,0 +1,30 @@
+import { styled } from 'styled-components'
+import { LanguageIcon } from '../icons'
+import { Colors } from '@/styles/colors'
+import { MediaQueries } from '@/styles/mediaQueries'
+
+export const VisitDevconLink = () => {
+  return (
+    <VisitLink href="https://devcon.org/en/tickets/" target="_blank">
+      <VisitLinkText>Visit Devcon Website</VisitLinkText>
+      <LanguageIcon />
+    </VisitLink>
+  )
+}
+
+const VisitLink = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${Colors.Black};
+
+  ${MediaQueries.medium} {
+    width: 100%;
+    padding: 8px 32px;
+  }
+`
+
+const VisitLinkText = styled.p`
+  text-decoration: underline;
+  white-space: nowrap;
+`