style(design): added country flags

SuperteamDAO · Jul 4, 2023 · 16dfdeb · 16dfdeb
1 parent a058bb4
commit 16dfdeb
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "next-superjson-plugin": "^0.4.9",
     "react": "18.2.0",
     "react-apexcharts": "^1.4.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.6.0",
     "react-swipeable": "^7.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Dashboard/Row/TableRow.tsx b/src/components/Dashboard/Row/TableRow.tsx
@@ -10,6 +10,7 @@ import {
 } from '@chakra-ui/react';
 import { Inter } from '@next/font/google';
 import * as React from 'react';
+import ReactCountryFlag from "react-country-flag";
 import { FiChevronDown } from 'react-icons/fi';
 import { xpType } from '../../../interfaces/xp';
 import { projectDataType } from '../../../pages/projects';
@@ -18,7 +19,7 @@ import CustomTag from '../../HOC/Tag.HOC';
 import MedalSVG, { hideMedalOrder } from '../../Logo/MedalSVG';
 import { ExpandedProjectRow, ExpandedRow } from './ExpandedRow';
 import RowCategories from './RowCategories';
-
+import code from './code.json';
 type propTypes = {
   row: xpType;
   index: number;
@@ -37,7 +38,12 @@ const TableRow = ({ row, index, sortOrder, searchResult }: propTypes) => {
     'superteamGreyLT.50',
     'superteamGreyDT.900'
   );
-
+  const getCountryCode = (countryName: string) => {
+    const foundCountry = code.find(
+      (country) => country.countryName === countryName
+    );
+    return foundCountry ? foundCountry.countryCode : '';
+  };
   return (
     <>
       <Tr
@@ -73,18 +79,31 @@ const TableRow = ({ row, index, sortOrder, searchResult }: propTypes) => {
         </Td>
         <Td padding="18px">
           <Flex flexDir={'column'} w="13rem">
-            <Text
-              color={useColorModeValue(
-                'superteamBlack.100',
-                'superteamWhite.100'
+            <Flex flexDir={'row'} w="13rem">
+              {row?.region && (
+                <ReactCountryFlag
+                  countryCode={getCountryCode(row.region)}
+                  svg
+                  style={{
+                    width: '1.5em',
+                    height: '1.3em',
+                    marginRight: '0.5em'
+                  }}
+                />
               )}
-              fontSize={'14px'}
-              textTransform="lowercase"
-              fontWeight="500"
-              className={inter.className}
-            >
-              {row?.name.split('#')[0]}
-            </Text>
+              <Text
+                color={useColorModeValue(
+                  'superteamBlack.100',
+                  'superteamWhite.100'
+                )}
+                fontSize={'14px'}
+                textTransform="lowercase"
+                fontWeight="500"
+                className={inter.className}
+              >
+                {row?.name.split('#')[0]}
+              </Text>
+            </Flex>
             <Text
               color={useColorModeValue(
                 'superteamGreyLT.800',
@@ -96,6 +115,7 @@ const TableRow = ({ row, index, sortOrder, searchResult }: propTypes) => {
               {row?.name}
             </Text>
           </Flex>
+
         </Td>
         <Td>
           <Flex h={10} w="7rem" flexDir="row" gap="0.4rem">
@@ -154,7 +174,7 @@ const TableRow = ({ row, index, sortOrder, searchResult }: propTypes) => {
             />
           </Center>
         </Td>
-      </Tr>
+      </Tr >
       <ExpandedRow expandRow={expandRow} row={row} />
     </>
   );
@@ -241,6 +261,7 @@ export const ProjectsTableRow = ({
         </Td>
         <Td w={'50rem'} padding="18px">
           <Flex flexDir={'column'} w="13rem">
+
             <Text
               color={useColorModeValue(
                 'superteamBlack.100',

diff --git a/src/components/Dashboard/Row/TableRowMobile.tsx b/src/components/Dashboard/Row/TableRowMobile.tsx
@@ -8,6 +8,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 import * as React from 'react';
+import ReactCountryFlag from "react-country-flag";
 import { FiChevronDown } from 'react-icons/fi';
 import { xpType } from '../../../interfaces/xp';
 import { projectDataType } from '../../../pages/projects';
@@ -17,7 +18,7 @@ import MedalSVG, { hideMedalOrder } from '../../Logo/MedalSVG';
 import { ExpandedProjectRowMobile, ExpandedRowMobile } from './ExpandedRow';
 import GraphColumn from './GraphColumn';
 import RowCategories from './RowCategories';
-
+import code from './code.json';
 type propTypes = {
   row: xpType;
   index: number;
@@ -27,6 +28,13 @@ type propTypes = {
 
 const TableRowMobile = ({ row, index, sortOrder, searchResult }: propTypes) => {
   const [expandRow, setExpandRow] = React.useState(false);
+
+  const getCountryCode = (countryName: string) => {
+    const foundCountry = code.find(
+      (country) => country.countryName === countryName
+    );
+    return foundCountry ? foundCountry.countryCode : '';
+  };
   return (
     <Tr
       bg={expandRow ? '#1B1F27' : ''}
@@ -46,9 +54,22 @@ const TableRowMobile = ({ row, index, sortOrder, searchResult }: propTypes) => {
           showIndex={searchResult || hideMedalOrder.includes(sortOrder)}
         />
         <Flex gap="0.3rem" direction="column">
-          <Text color="white" fontSize={'14px'} textTransform="capitalize">
-            {row?.name.split('#')[0]}
-          </Text>
+          <Flex gap="0.3rem" direction="row">
+
+            {row?.region && (
+              <ReactCountryFlag
+                countryCode={getCountryCode(row.region)}
+                svg
+                style={{
+                  width: '1.5em',
+                  height: '1.3em',
+                }}
+              />
+            )}
+            <Text color="white" fontSize={'14px'} textTransform="capitalize">
+              {row?.name.split('#')[0]}
+            </Text>
+          </Flex>{' '}
           <Text color="rgba(121, 155, 190, 0.47)" fontSize={'12px'}>
             {row?.name}
           </Text>

diff --git a/src/components/Dashboard/Row/code.json b/src/components/Dashboard/Row/code.json
@@ -0,0 +1,26 @@
+[
+    {
+        "countryName": "Germany",
+        "countryCode": "DE"
+    },
+    {
+        "countryName": "India",
+        "countryCode": "IN"
+    },
+    {
+        "countryName": "Mexico",
+        "countryCode": "MX"
+    },
+    {
+        "countryName": "Turkey",
+        "countryCode": "TR"
+    },
+    {
+        "countryName": "Vietnam",
+        "countryCode": "VN"
+    },
+    {
+        "countryName": "United Kingdom",
+        "countryCode": "GB"
+    }
+]