diff --git a/src/renderer/pages/home/HomePage.tsx b/src/renderer/pages/home/HomePage.tsx index bddf7d8b1..68ce6320e 100644 --- a/src/renderer/pages/home/HomePage.tsx +++ b/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(); usePageScrollingShortcuts(mainRef); @@ -49,7 +57,12 @@ export const HomePage = React.memo(function HomePage() { } - rightSide={} + rightSide={ + + + + + } rightStyle={{ backgroundColor: colors.purpleDark }} style={{ gridTemplateColumns: "auto 300px" }} /> diff --git a/src/renderer/pages/home/TournamentLinks.tsx b/src/renderer/pages/home/TournamentLinks.tsx new file mode 100644 index 000000000..47cec0e56 --- /dev/null +++ b/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 ( +
+ +
+ + Tournaments + + +
+ + + + +
+ +
powered by start.gg
+ +
+
+ ); +}); diff --git a/src/renderer/styles/images/startgg-logo.svg b/src/renderer/styles/images/startgg-logo.svg new file mode 100644 index 000000000..e865a2ebb --- /dev/null +++ b/src/renderer/styles/images/startgg-logo.svg @@ -0,0 +1,15 @@ + + + + + + + + +