diff --git a/packages/frontend/components/common/TextInput.tsx b/packages/frontend/components/common/TextInput.tsx
index 840f5d9a9..afdf06498 100644
--- a/packages/frontend/components/common/TextInput.tsx
+++ b/packages/frontend/components/common/TextInput.tsx
@@ -7,7 +7,7 @@ const useStyles = createStyles(() => ({
backgroundColor: "var(--colors-bg-lighter)",
color: "var(--colors-text)",
fontWeight: 500,
- fontSize: "0.9rem",
+ fontSize: "var(--fonts-sm)",
"::placeholder": {
color: "var(--colors-text-lighter)",
},
diff --git a/packages/frontend/components/layout.tsx b/packages/frontend/components/layout.tsx
index ec40ed7c3..eb36d38c8 100644
--- a/packages/frontend/components/layout.tsx
+++ b/packages/frontend/components/layout.tsx
@@ -35,6 +35,10 @@ const _LogoContainer = styled.div`
border-radius: 16px;
`;
+const _Main = styled.main`
+ padding-top: 1rem;
+`;
+
export function Layout({ children }: { children: ReactNode }) {
return (
<>
@@ -52,7 +56,7 @@ export function Layout({ children }: { children: ReactNode }) {
- {children}
+ <_Main>{children}
);
}
diff --git a/packages/frontend/components/tournament/InfoBanner.tsx b/packages/frontend/components/tournament/InfoBanner.tsx
new file mode 100644
index 000000000..3742f0ff7
--- /dev/null
+++ b/packages/frontend/components/tournament/InfoBanner.tsx
@@ -0,0 +1,164 @@
+import styled from "@emotion/styled";
+import { ReactNode } from "react";
+import { FaDiscord, FaTwitter } from "react-icons/fa";
+
+const infos = [
+ {
+ title: "Starting time",
+ value: "Saturday, 18:00",
+ },
+ {
+ title: "Format",
+ value: "Double Elimination",
+ },
+ {
+ title: "Organizer",
+ value: "Sendou#0043",
+ },
+];
+
+const _Container = styled.div`
+ width: min(48rem, 100%);
+ padding: 1.5rem;
+ margin: 0 auto;
+ background: linear-gradient(to bottom, #9796f0, #fbc7d4);
+ border-radius: var(--radii-rounded);
+ color: hsl(231, 9%, 16%);
+`;
+
+const _TopRow = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 1rem;
+`;
+
+const _DateName = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+`;
+
+const _MonthDate = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ line-height: 1.25;
+`;
+
+const _Month = styled.div`
+ font-size: var(--fonts-xs);
+`;
+
+const _Date = styled.div`
+ font-size: var(--fonts-lg);
+ font-weight: bold;
+`;
+
+const _TournamentName = styled.div`
+ padding-left: 1rem;
+ border-color: var(--colors-text);
+ border-left: 1px solid;
+ font-size: var(--fonts-xl);
+ font-weight: bold;
+`;
+
+const _BottomRow = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 1rem;
+
+ @media only screen and (min-width: 600px) {
+ flex-direction: row;
+ align-items: flex-end;
+ }
+`;
+
+const _Infos = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 2rem;
+ gap: 1rem;
+
+ @media only screen and (min-width: 500px) {
+ gap: 2rem;
+ }
+`;
+
+const _IconButtons = styled.div`
+ display: flex;
+ gap: 1rem;
+`;
+
+export function InfoBanner() {
+ return (
+ <_Container>
+ <_TopRow>
+ <_DateName>
+ <_MonthDate>
+ <_Month>APR
+ <_Date>23
+
+ <_TournamentName>In The Zone 23
+
+ <_IconButtons>
+
+
+
+
+
+
+
+
+ <_BottomRow>
+ <_Infos>
+ {infos.map((info) => (
+
+ ))}
+
+
+
+ );
+}
+
+const _InfoContainer = styled.div`
+ font-size: var(--fonts-xs);
+
+ > label {
+ font-weight: bold;
+ }
+`;
+
+function Info(props: { info: { title: string; value: string } }) {
+ return (
+ <_InfoContainer>
+
+ {props.info.value}
+
+ );
+}
+
+const _IconButton = styled.a`
+ display: inline-flex;
+ width: 2.25rem;
+ height: 2.25rem;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+ border: 1px solid;
+ border-color: var(--text-transparent);
+ border-radius: 50%;
+ color: inherit;
+ transition: background-color 0.3s;
+ :hover {
+ background-color: var(--text-transparent);
+ }
+ > svg {
+ height: 1.75rem;
+ }
+`;
+
+function IconButton(props: { children: ReactNode; href: string }) {
+ return <_IconButton href={props.href}>{props.children};
+}
diff --git a/packages/frontend/pages/_app.css b/packages/frontend/pages/_app.css
index c9be3731c..90c2ef305 100644
--- a/packages/frontend/pages/_app.css
+++ b/packages/frontend/pages/_app.css
@@ -3,6 +3,13 @@
--colors-bg-lighter: hsl(237.3, 42.3%, 35.6%);
--colors-text: rgba(255, 255, 255, 0.95);
--colors-text-lighter: rgba(255, 255, 255, 0.55);
+ --radii-rounded: 16px;
+ --fonts-xl: 1.5rem;
+ --fonts-lg: 1.2rem;
+ --fonts-md: 1rem;
+ --fonts-sm: 0.9rem;
+ --fonts-xs: 0.8rem;
+ --text-transparent: hsla(231, 9%, 16%, 0.2);
}
*,
diff --git a/packages/frontend/pages/o/[organization]/[tournament].tsx b/packages/frontend/pages/o/[organization]/[tournament].tsx
index 913a89938..1afac39e5 100644
--- a/packages/frontend/pages/o/[organization]/[tournament].tsx
+++ b/packages/frontend/pages/o/[organization]/[tournament].tsx
@@ -1,5 +1,6 @@
import { useRouter } from "next/dist/client/router";
import useSWR from "swr";
+import { InfoBanner } from "../../../components/tournament/InfoBanner";
export default function TournamentPage() {
const router = useRouter();
@@ -7,5 +8,5 @@ export default function TournamentPage() {
`/tournaments/${router.query.organization}/${router.query.tournament}`
);
console.log("error", error);
- return {JSON.stringify(data, null, 2)};
+ return ;
}