add blitz tab

Sammers21 · Sep 11, 2024 · bbe01a2 · bbe01a2
1 parent 001a132
commit bbe01a2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -6,12 +6,15 @@ root = true
 # Unix-style newlines with a newline ending every file
 [*]
 end_of_line = lf
+indent_size = 2
 insert_final_newline = true
 
 # Matches multiple files with brace expansion notation
 # Set default charset
-[*.{js,py}]
+[*.{js,py,ts,tsx}]
 charset = utf-8
+indent_size = 2
+indent_style = space
 
 # 4 space indentation
 [*.py]

diff --git a/frontend/src/constants/pvp-activity.ts b/frontend/src/constants/pvp-activity.ts
@@ -1,6 +1,7 @@
 export enum BRACKETS {
  shuffle = 'shuffle',
  rbg = 'rbg',
+ blitz = 'blitz',
  '3v3' = '3v3',
  '2v2' = '2v2',
  'multiclassers' = 'multiclassers',

diff --git a/frontend/src/containers/Activity/Tabs.tsx b/frontend/src/containers/Activity/Tabs.tsx
@@ -1,19 +1,19 @@
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
-import { generatePath } from 'react-router';
+import {useNavigate, useLocation, useParams} from 'react-router-dom';
+import {generatePath} from 'react-router';
 
-import { Button, Chip } from '@mui/material';
-import { styled } from '@mui/system';
+import {Button, Chip} from '@mui/material';
+import {styled} from '@mui/system';
 
-import { getActivityFromUrl, getBracket, getRegion } from '@/utils/urlparts';
-import { publicUrls } from '@/config';
-import { BRACKETS } from '@/constants/pvp-activity';
-import { borderColor } from '@/theme';
+import {getActivityFromUrl, getBracket, getRegion} from '@/utils/urlparts';
+import {publicUrls} from '@/config';
+import {BRACKETS} from '@/constants/pvp-activity';
+import {borderColor} from '@/theme';
 
 interface IProps {
  bracketActivity: Record<BRACKETS, string> | undefined;
 }
 
-export const TabButton = styled(Button)<{ isActive: boolean }>(({ isActive }) => {
+export const TabButton = styled(Button)<{ isActive: boolean }>(({isActive}) => {
  return {
  color: 'white',
  flexGrow: 1,
@@ -22,67 +22,77 @@ export const TabButton = styled(Button)<{ isActive: boolean }>(({ isActive }) =>
  borderRightWidth: 1,
  borderStyle: 'solid',
  textTransform: 'none',
+ fontSize: 16,
+ fontWeight: 1000,
  backgroundColor: isActive ? 'rgb(21, 128, 61, 0.25)' : 'rgba(31, 41, 55, 0.25)',
  '&:hover': {
  backgroundColor: isActive && 'rgb(21, 128, 61, 0.25)',
  },
  };
 });
 
-export const BracketCount = ({ content }: { content: number | string | undefined }) => {
+export const BracketCount = ({content}: { content: number | string | undefined }) => {
  if (!content) return null;
 
  return (
  <div className="flex items-center justify-between ml-2">
- <Chip className="!text-sm" label={content} size="small" />
+ <Chip className="!text-sm" label={content} size="small"/>
  </div>
  );
 };
 
-const ActivityTabs = ({ bracketActivity }: IProps) => {
+const ActivityTabs = ({bracketActivity}: IProps) => {
  let navigate = useNavigate();
  const location = useLocation();
 
- const { region: regionFromUrl, bracket: bracketFromParams } = useParams();
+ const {region: regionFromUrl, bracket: bracketFromParams} = useParams();
 
  const bracket = getBracket(bracketFromParams);
  const activity = getActivityFromUrl();
  const region = getRegion(regionFromUrl);
 
  const handleBracketChange = (bracket: BRACKETS) => {
- const newPath = generatePath(publicUrls.page, { region, activity, bracket });
+ const newPath = generatePath(publicUrls.page, {region, activity, bracket});
  navigate(`${newPath}${location.search}`);
  };
 
  return (
  <div className="flex w-full rounded-t-md border-t border-l border-b border-solid border-[#2f384de6] bg-[#030303e6]">
  <TabButton
- sx={{ borderTopLeftRadius: 5 }}
+ sx={{borderTopLeftRadius: 5}}
  onClick={() => handleBracketChange(BRACKETS.shuffle)}
  isActive={bracket === BRACKETS.shuffle}
  >
  Shuffle
- <BracketCount content={bracketActivity?.shuffle} />
+ <BracketCount content={bracketActivity?.shuffle}/>
  </TabButton>
  <TabButton
  onClick={() => handleBracketChange(BRACKETS['2v2'])}
  isActive={bracket === BRACKETS['2v2']}
  >
  2v2
- <BracketCount content={bracketActivity?.['2v2']} />
+ <BracketCount content={bracketActivity?.['2v2']}/>
  </TabButton>
  <TabButton
  onClick={() => handleBracketChange(BRACKETS['3v3'])}
  isActive={bracket === BRACKETS['3v3']}
  >
- 3v3 <BracketCount content={bracketActivity?.['3v3']} />
+ 3v3 <BracketCount content={bracketActivity?.['3v3']}/>
  </TabButton>
  <TabButton
- sx={{ borderTopRightRadius: 5 }}
+ sx={{}}
+ onClick={() => handleBracketChange(BRACKETS.blitz)}
+ isActive={bracket === BRACKETS.blitz}
+ >
+ Blitz
+ <BracketCount content={bracketActivity?.blitz}/>
+ </TabButton>
+ <TabButton
+ sx={{}}
  onClick={() => handleBracketChange(BRACKETS.rbg)}
  isActive={bracket === BRACKETS.rbg}
  >
- RBG <BracketCount content={bracketActivity?.rbg} />
+ RBG <BracketCount content={bracketActivity?.rbg}/>
  </TabButton>
  </div>
  );