diff --git a/frontend-react/src/components/team/TeamPage.tsx b/frontend-react/src/components/team/TeamPage.tsx index f5cf186eb..55004e53d 100644 --- a/frontend-react/src/components/team/TeamPage.tsx +++ b/frontend-react/src/components/team/TeamPage.tsx @@ -5,6 +5,8 @@ import { Helmet } from "react-helmet-async" import Chart from "./Chart" import TeamPlayer from "./TeamPlayer" import LogoHeader from "./LogoHeader" +import USAChart from "./USAChart" +import Markdown from "../elements/Markdown" const TeamPage: React.FC = () => { /*const { data, error, loading } = useQuery< @@ -27,15 +29,35 @@ const TeamPage: React.FC = () => { const team = data.searchForTeam const user = userData.user*/ + const bio = `# Bio! + + It is identical to the one you have in your profile + + # Tournament results + + 🥇 Tournament + 🥉 Tournament + 🥇 Tournament + + # You can put whatever you want here + + :rainmaker: + ` + return ( <> Scoze Gaming | sendou.ink + {/* */} + + + = () => { = () => { = () => { = ({ username, + discordId, avatar, weapons, role, country, }) => { - const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext) + const { themeColorWithShade } = useContext(MyThemeContext) + const isSmall = useBreakPoints(850) return ( <> @@ -50,10 +55,16 @@ const TeamPlayer: React.FC = ({ justifyContent="space-between" alignItems="flex-end" > - - {username} {country && } + + {username} + {country && } - {weapons && weapons.length > 0 && ( + {weapons && !isSmall && ( {weapons.map((wpn) => ( @@ -74,6 +85,15 @@ const TeamPlayer: React.FC = ({ > {role} + {weapons && isSmall && ( + + {weapons.map((wpn) => ( + + + + ))} + + )} ) } diff --git a/frontend-react/src/components/team/USAChart.tsx b/frontend-react/src/components/team/USAChart.tsx new file mode 100644 index 000000000..cb47b51f5 --- /dev/null +++ b/frontend-react/src/components/team/USAChart.tsx @@ -0,0 +1,44 @@ +import React, { useContext } from "react" +import { ComposableMap, Geographies, Geography } from "react-simple-maps" +import { Box } from "@chakra-ui/core" +import MyThemeContext from "../../themeContext" + +interface USAChartProps { + states: string[] +} + +const USAChart: React.FC = ({ states }) => { + const { bgColor, themeColorHex } = useContext(MyThemeContext) + return ( + + + + {({ geographies }) => ( + <> + {geographies.map((geo) => { + console.log("geo", geo) + return ( + + ) + })} + {geographies.map((geo) => { + return + })} + + )} + + + + ) +} + +export default USAChart