From bbe01a222127f8994b1e41bfead92b0802d66a94 Mon Sep 17 00:00:00 2001
From: Sammers21 <titantins@gmail.com>
Date: Wed, 11 Sep 2024 09:35:57 +0300
Subject: [PATCH] add blitz tab

---
 .editorconfig                             |  5 ++-
 frontend/src/constants/pvp-activity.ts    |  1 +
 frontend/src/containers/Activity/Tabs.tsx | 50 ++++++++++++++---------
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index b4ed584d..10c010d2 100644
--- 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
index f0150dad..c4a9e0f1 100644
--- 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
index 37e82031..5c75fca7 100644
--- 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,6 +22,8 @@ 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)',
@@ -29,60 +31,68 @@ export const TabButton = styled(Button)<{ isActive: boolean }>(({ isActive }) =>
   };
 });
 
-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>
   );