Add links to nearby and online tournaments in the home page (#390)

* add start.gg links card to home page right column

* make it look good

* rename component

* refactor consts

* rename file

* adjust padding

---------

Co-authored-by: Vince Au <[email protected]>

src/renderer/pages/home/HomePage.tsx

@@ -8,6 +8,7 @@ import { Footer } from "@/components/Footer";
 import { usePageScrollingShortcuts } from "@/lib/hooks/useShortcuts";
 
 import { NewsFeed } from "./NewsFeed";
+import { TournamentLinks } from "./TournamentLinks";
 import { TwitterFeed } from "./TwitterFeed";
 
 const Outer = styled.div`
@@ -27,6 +28,13 @@ const Main = styled.div`
   padding-top: 0;
 `;
 
+const Right = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-x: hidden;
+`;
+
 export const HomePage = React.memo(function HomePage() {
   const mainRef = React.createRef<HTMLDivElement>();
   usePageScrollingShortcuts(mainRef);
@@ -49,7 +57,12 @@ export const HomePage = React.memo(function HomePage() {
               <NewsFeed />
             </Main>
           }
-          rightSide={<TwitterFeed />}
+          rightSide={
+            <Right>
+              <TwitterFeed />
+              <TournamentLinks />
+            </Right>
+          }
           rightStyle={{ backgroundColor: colors.purpleDark }}
           style={{ gridTemplateColumns: "auto 300px" }}
         />

src/renderer/pages/home/TournamentLinks.tsx

@@ -0,0 +1,86 @@
+import styled from "@emotion/styled";
+import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
+import LanguageIcon from "@mui/icons-material/Language";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
+import { Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+import React from "react";
+
+import { ExternalLink } from "@/components/ExternalLink";
+import { ReactComponent as StartggLogo } from "@/styles/images/startgg-logo.svg";
+
+const NEARBY_TOURNAMENTS_URL =
+  "https://start.gg/search/near_me?range%5BeffectiveRegistrationClosesAt%5D%5Bmin%5D=1&refinementList%5Bevents.videogame.id%5D=1&refinementList%5BhasOnlineEvents%5D=&refinementList%5Bstate%5D%5B0%5D=1&page=1&configure%5BhitsPerPage%5D=15&configure%5Bfilters%5D=profileType%3Atournament&configure%5BaroundLatLngViaIP%5D=true&configure%5BaroundRadius%5D=160934";
+
+const ONLINE_TOURNAMENTS_URL =
+  "https://start.gg/search/tournaments?refinementList%5Bevents.videogame.id%5D=1&refinementList%5BhasOnlineEvents%5D%5B0%5D=true&page=1&configure%5BhitsPerPage%5D=15&configure%5Bfilters%5D=profileType%3Atournament&range%5BeffectiveRegistrationClosesAt%5D%5Bmin%5D=1";
+
+const PoweredByContainer = styled.div`
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding: 4px 15px;
+  font-size: 9pt;
+  color: rgba(255, 255, 255, 0.6);
+`;
+
+const LinksContainer = styled.div`
+  background-color: rgba(0, 0, 0, 0.35);
+  padding: 15px;
+`;
+
+const LinksGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
+  align-items: center;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+export const TournamentLinks = React.memo(function TournamentLinks() {
+  return (
+    <div>
+      <LinksContainer>
+        <Header>
+          <Typography variant="h2" fontSize={18} marginLeft={0.5}>
+            Tournaments
+          </Typography>
+          <EmojiEventsIcon fontSize="small" />
+        </Header>
+        <LinksGrid>
+          <Button
+            color="secondary"
+            LinkComponent={ExternalLink}
+            size="small"
+            href={NEARBY_TOURNAMENTS_URL}
+            startIcon={<LocationOnIcon />}
+            title="Show nearby tournaments in the browser"
+          >
+            Nearby
+          </Button>
+          <Button
+            color="secondary"
+            LinkComponent={ExternalLink}
+            size="small"
+            href={ONLINE_TOURNAMENTS_URL}
+            startIcon={<LanguageIcon />}
+            title="Show online tournaments in the browser"
+          >
+            Online
+          </Button>
+        </LinksGrid>
+      </LinksContainer>
+      <PoweredByContainer>
+        <div style={{ marginRight: 8 }}>powered by start.gg</div>
+        <StartggLogo height="16px" width="16px" viewBox="0 0 1001 1001" aria-label="start.gg logo" role="image" />
+      </PoweredByContainer>
+    </div>
+  );
+});