745 lines
24 KiB
JavaScript
Executable File
745 lines
24 KiB
JavaScript
Executable File
/*!
|
||
|
||
=========================================================
|
||
* Argon Dashboard Chakra PRO - v1.0.0
|
||
=========================================================
|
||
|
||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||
|
||
* Designed and Coded by Simmmple & Creative Tim
|
||
|
||
=========================================================
|
||
|
||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||
|
||
*/
|
||
|
||
// Chakra imports
|
||
import {
|
||
Avatar,
|
||
AvatarGroup,
|
||
Button,
|
||
Flex,
|
||
Grid,
|
||
Icon,
|
||
Menu,
|
||
MenuButton,
|
||
MenuItem,
|
||
MenuList,
|
||
Text,
|
||
useColorModeValue,
|
||
useColorMode,
|
||
useDisclosure,
|
||
} from "@chakra-ui/react";
|
||
// Assets
|
||
import avatar1 from "assets/img/avatars/avatar1.png";
|
||
import avatar2 from "assets/img/avatars/avatar2.png";
|
||
import avatar3 from "assets/img/avatars/avatar3.png";
|
||
import avatar5 from "assets/img/avatars/avatar5.png";
|
||
import avatar4 from "assets/img/avatars/avatar4.png";
|
||
import avatar7 from "assets/img/avatars/avatar7.png";
|
||
// Custom components
|
||
import Card from "components/Card/Card";
|
||
import CardBody from "components/Card/CardBody";
|
||
import CardHeader from "components/Card/CardHeader";
|
||
import IconBox from "components/Icons/IconBox";
|
||
import {
|
||
AdobexdLogo,
|
||
AtlassianLogo,
|
||
JiraLogo,
|
||
SlackLogo,
|
||
SpotifyLogo,
|
||
} from "components/Icons/Icons";
|
||
import { HSeparator } from "components/Separator/Separator";
|
||
import React, { useReducer } from "react";
|
||
import { BsPlus } from "react-icons/bs";
|
||
import { FaCube, FaPenFancy } from "react-icons/fa";
|
||
import { IoDocumentsSharp, IoEllipsisVerticalSharp } from "react-icons/io5";
|
||
|
||
const reducer = (state, action) => {
|
||
if (action.type === "SWITCH_ACTIVE") {
|
||
if (action.payload === "overview") {
|
||
const newState = {
|
||
overview: true,
|
||
teams: false,
|
||
projects: false,
|
||
};
|
||
return newState;
|
||
} else if (action.payload === "teams") {
|
||
const newState = {
|
||
overview: false,
|
||
teams: true,
|
||
projects: false,
|
||
};
|
||
return newState;
|
||
} else if (action.payload === "projects") {
|
||
const newState = {
|
||
overview: false,
|
||
teams: false,
|
||
projects: true,
|
||
};
|
||
return newState;
|
||
}
|
||
}
|
||
return state;
|
||
};
|
||
|
||
function Projects() {
|
||
const [state, dispatch] = useReducer(reducer, {
|
||
overview: false,
|
||
teams: false,
|
||
projects: true,
|
||
});
|
||
|
||
const { colorMode } = useColorMode();
|
||
|
||
const {
|
||
isOpen: isOpen1,
|
||
onOpen: onOpen1,
|
||
onClose: onClose1,
|
||
} = useDisclosure();
|
||
|
||
const {
|
||
isOpen: isOpen2,
|
||
onOpen: onOpen2,
|
||
onClose: onClose2,
|
||
} = useDisclosure();
|
||
|
||
const {
|
||
isOpen: isOpen3,
|
||
onOpen: onOpen3,
|
||
onClose: onClose3,
|
||
} = useDisclosure();
|
||
|
||
const {
|
||
isOpen: isOpen4,
|
||
onOpen: onOpen4,
|
||
onClose: onClose4,
|
||
} = useDisclosure();
|
||
|
||
const {
|
||
isOpen: isOpen5,
|
||
onOpen: onOpen5,
|
||
onClose: onClose5,
|
||
} = useDisclosure();
|
||
|
||
// Chakra color mode
|
||
const textColor = useColorModeValue("gray.700", "white");
|
||
const bgProfile = useColorModeValue("hsla(0,0%,100%,.8)", "navy.800");
|
||
const borderProfileColor = useColorModeValue("white", "transparent");
|
||
const bgIconBox = useColorModeValue(
|
||
"linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
|
||
"navy.700"
|
||
);
|
||
const secondaryColor = useColorModeValue("gray.500", "white");
|
||
|
||
return (
|
||
<Flex direction="column" mt={{ sm: "150px", md: "100px" }}>
|
||
<Flex
|
||
direction={{ sm: "column", md: "row" }}
|
||
mb="24px"
|
||
maxH="330px"
|
||
justifyContent={{ sm: "center", md: "space-between" }}
|
||
align="center"
|
||
backdropFilter="blur(21px)"
|
||
boxShadow="0px 2px 5.5px rgba(0, 0, 0, 0.02)"
|
||
border="1.5px solid"
|
||
borderColor={borderProfileColor}
|
||
bg={bgProfile}
|
||
p="24px"
|
||
borderRadius="20px"
|
||
>
|
||
<Flex
|
||
align="center"
|
||
mb={{ sm: "10px", md: "0px" }}
|
||
direction={{ sm: "column", md: "row" }}
|
||
w={{ sm: "100%" }}
|
||
textAlign={{ sm: "center", md: "start" }}
|
||
>
|
||
<Avatar
|
||
me={{ md: "22px" }}
|
||
src={avatar5}
|
||
w="80px"
|
||
h="80px"
|
||
borderRadius="15px"
|
||
/>
|
||
<Flex direction="column" maxWidth="100%" my={{ sm: "14px" }}>
|
||
<Text
|
||
fontSize={{ sm: "lg", lg: "xl" }}
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
ms={{ sm: "8px", md: "0px" }}
|
||
>
|
||
Alec Thompson
|
||
</Text>
|
||
<Text fontSize={{ sm: "sm", md: "md" }} color="gray.400">
|
||
alec@simmmple.com
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
<Flex
|
||
direction={{ sm: "column", lg: "row" }}
|
||
w={{ sm: "100%", md: "50%", lg: "auto" }}
|
||
>
|
||
<Button p="0px" bg="transparent" variant="no-effects">
|
||
<Flex
|
||
align="center"
|
||
w={{ sm: "100%", lg: "135px" }}
|
||
bg={
|
||
state.overview
|
||
? colorMode === "dark"
|
||
? "navy.900"
|
||
: "#fff"
|
||
: null
|
||
}
|
||
borderRadius="8px"
|
||
justifyContent="center"
|
||
py="10px"
|
||
boxShadow={
|
||
state.overview ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||
}
|
||
cursor="pointer"
|
||
transition="all .5s ease"
|
||
onClick={() =>
|
||
dispatch({ type: "SWITCH_ACTIVE", payload: "overview" })
|
||
}
|
||
>
|
||
<Icon color={textColor} as={FaCube} me="6px" />
|
||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||
OVERVIEW
|
||
</Text>
|
||
</Flex>
|
||
</Button>
|
||
<Button p="0px" bg="transparent" variant="no-effects">
|
||
<Flex
|
||
align="center"
|
||
w={{ lg: "135px" }}
|
||
borderRadius="8px"
|
||
justifyContent="center"
|
||
py="10px"
|
||
mx={{ lg: "1rem" }}
|
||
cursor="pointer"
|
||
boxShadow={
|
||
state.teams ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||
}
|
||
bg={
|
||
state.teams
|
||
? colorMode === "dark"
|
||
? "navy.900"
|
||
: "#fff"
|
||
: null
|
||
}
|
||
transition="all .5s ease"
|
||
onClick={() =>
|
||
dispatch({ type: "SWITCH_ACTIVE", payload: "teams" })
|
||
}
|
||
>
|
||
<Icon color={textColor} as={IoDocumentsSharp} me="6px" />
|
||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||
TEAMS
|
||
</Text>
|
||
</Flex>
|
||
</Button>
|
||
<Button p="0px" bg="transparent" variant="no-effects">
|
||
<Flex
|
||
align="center"
|
||
w={{ lg: "135px" }}
|
||
borderRadius="8px"
|
||
justifyContent="center"
|
||
py="10px"
|
||
cursor="pointer"
|
||
boxShadow={
|
||
state.projects ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||
}
|
||
bg={
|
||
state.projects
|
||
? colorMode === "dark"
|
||
? "navy.900"
|
||
: "#fff"
|
||
: null
|
||
}
|
||
transition="all .5s ease"
|
||
onClick={() =>
|
||
dispatch({ type: "SWITCH_ACTIVE", payload: "projects" })
|
||
}
|
||
>
|
||
<Icon color={textColor} as={FaPenFancy} me="6px" />
|
||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||
PROJECTS
|
||
</Text>
|
||
</Flex>
|
||
</Button>
|
||
</Flex>
|
||
</Flex>
|
||
<Flex direction="column" mb="44px" mt={{ sm: "16px", lg: "0px" }}>
|
||
<Text fontSize="xl" color="white" fontWeight="bold" mb="16px">
|
||
Some of Our Awesome Projects
|
||
</Text>
|
||
<Text fontSize="sm" color="white" fontWeight="normal">
|
||
This is the paragraph where you can write more details about your
|
||
projects. Keep you user engaged by providing meaningful information.
|
||
</Text>
|
||
</Flex>
|
||
<Grid
|
||
templateColumns={{
|
||
sm: "1fr",
|
||
md: "repeat(2, auto)",
|
||
lg: "repeat(3, auto)",
|
||
}}
|
||
templateRows={{ md: "repeat(3, auto)", lg: "repeat(2, auto)" }}
|
||
gap="30px"
|
||
>
|
||
<Card minH="100%" alignSelf="flex-start" minH="100%">
|
||
<CardHeader mb="18px">
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex>
|
||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||
<SlackLogo
|
||
w="40px"
|
||
h="40px"
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
transform="translate(5%)"
|
||
/>
|
||
</IconBox>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="8px"
|
||
>
|
||
Slack Bot
|
||
</Text>
|
||
<AvatarGroup size="xs">
|
||
<Avatar src={avatar1} />
|
||
<Avatar src={avatar2} />
|
||
<Avatar src={avatar3} />
|
||
<Avatar src={avatar4} />
|
||
<Avatar src={avatar7} />
|
||
</AvatarGroup>
|
||
</Flex>
|
||
</Flex>
|
||
<Menu isOpen={isOpen1} onClose={onClose1}>
|
||
<MenuButton onClick={onOpen1} alignSelf="flex-start">
|
||
<Icon
|
||
as={IoEllipsisVerticalSharp}
|
||
color="gray.400"
|
||
w="20px"
|
||
h="20px"
|
||
/>
|
||
</MenuButton>
|
||
<MenuList>
|
||
<MenuItem>Action</MenuItem>
|
||
<MenuItem>Another action</MenuItem>
|
||
<MenuItem>Something else here</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
</Flex>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<Flex direction="column">
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
If everything I did failed - which it doesn't, I think that it
|
||
actually succeeds.
|
||
</Text>
|
||
<HSeparator my="22px" />
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
5
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Participants
|
||
</Text>
|
||
</Flex>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
02.03.22
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Due Date
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
<Card minH="100%" alignSelf="flex-start">
|
||
<CardHeader mb="18px">
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex>
|
||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||
<SpotifyLogo
|
||
w="40px"
|
||
h="40px"
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
transform="translate(5%)"
|
||
/>
|
||
</IconBox>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="8px"
|
||
>
|
||
Premium Support
|
||
</Text>
|
||
<AvatarGroup size="xs">
|
||
<Avatar src={avatar2} />
|
||
<Avatar src={avatar3} />
|
||
<Avatar src={avatar4} />
|
||
</AvatarGroup>
|
||
</Flex>
|
||
</Flex>
|
||
<Menu isOpen={isOpen2} onClose={onClose2}>
|
||
<MenuButton onClick={onOpen2} alignSelf="flex-start">
|
||
<Icon
|
||
as={IoEllipsisVerticalSharp}
|
||
color="gray.400"
|
||
w="20px"
|
||
h="20px"
|
||
/>
|
||
</MenuButton>
|
||
<MenuList>
|
||
<MenuItem>Action</MenuItem>
|
||
<MenuItem>Another action</MenuItem>
|
||
<MenuItem>Something else here</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
</Flex>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<Flex direction="column">
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Pink is obviously a better color. Everyone’s born confident, and
|
||
everything’s taken away from you.
|
||
</Text>
|
||
<HSeparator my="22px" />
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
3
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Participants
|
||
</Text>
|
||
</Flex>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
22.11.22
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Due Date
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
<Card minH="100%" alignSelf="flex-start">
|
||
<CardHeader mb="18px">
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex>
|
||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||
<AdobexdLogo
|
||
w="40px"
|
||
h="40px"
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
transform="translate(5%)"
|
||
/>
|
||
</IconBox>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="8px"
|
||
>
|
||
Design Tools
|
||
</Text>
|
||
<AvatarGroup size="xs">
|
||
<Avatar src={avatar1} />
|
||
<Avatar src={avatar2} />
|
||
<Avatar src={avatar3} />
|
||
<Avatar src={avatar4} />
|
||
<Avatar src={avatar2} />
|
||
</AvatarGroup>
|
||
</Flex>
|
||
</Flex>
|
||
<Menu isOpen={isOpen3} onClose={onClose3}>
|
||
<MenuButton onClick={onOpen3} alignSelf="flex-start">
|
||
<Icon
|
||
as={IoEllipsisVerticalSharp}
|
||
color="gray.400"
|
||
w="20px"
|
||
h="20px"
|
||
/>
|
||
</MenuButton>
|
||
<MenuList>
|
||
<MenuItem>Action</MenuItem>
|
||
<MenuItem>Another action</MenuItem>
|
||
<MenuItem>Something else here</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
</Flex>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<Flex direction="column">
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Constantly growing. We’re constantly making mistakes from which
|
||
we learn and improve.
|
||
</Text>
|
||
<HSeparator my="22px" />
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
4
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Participants
|
||
</Text>
|
||
</Flex>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
06.03.21
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Due Date
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
<Card minH="100%" alignSelf="flex-start">
|
||
<CardHeader mb="18px">
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex>
|
||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||
<AtlassianLogo
|
||
w="40px"
|
||
h="40px"
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
/>
|
||
</IconBox>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="8px"
|
||
>
|
||
Looking Great
|
||
</Text>
|
||
<AvatarGroup size="xs">
|
||
<Avatar src={avatar3} />
|
||
<Avatar src={avatar4} />
|
||
</AvatarGroup>
|
||
</Flex>
|
||
</Flex>
|
||
<Menu isOpen={isOpen4} onClose={onClose4}>
|
||
<MenuButton onClick={onOpen4} alignSelf="flex-start">
|
||
<Icon
|
||
as={IoEllipsisVerticalSharp}
|
||
color="gray.400"
|
||
w="20px"
|
||
h="20px"
|
||
/>
|
||
</MenuButton>
|
||
<MenuList>
|
||
<MenuItem>Action</MenuItem>
|
||
<MenuItem>Another action</MenuItem>
|
||
<MenuItem>Something else here</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
</Flex>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<Flex direction="column">
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
You have the opportunity to play this game of life you need to
|
||
appreciate every moment.
|
||
</Text>
|
||
<HSeparator my="22px" />
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
6
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Participants
|
||
</Text>
|
||
</Flex>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
14.03.24
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Due Date
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
<Card minH="100%" alignSelf="flex-start">
|
||
<CardHeader mb="18px">
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex>
|
||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||
<JiraLogo
|
||
w="40px"
|
||
h="40px"
|
||
alignSelf="center"
|
||
justifySelf="center"
|
||
/>
|
||
</IconBox>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="8px"
|
||
>
|
||
Developer First
|
||
</Text>
|
||
<AvatarGroup size="xs">
|
||
<Avatar src={avatar2} />
|
||
<Avatar src={avatar3} />
|
||
<Avatar src={avatar4} />
|
||
</AvatarGroup>
|
||
</Flex>
|
||
</Flex>
|
||
<Menu isOpen={isOpen5} onClose={onClose5}>
|
||
<MenuButton onClick={onOpen5} alignSelf="flex-start">
|
||
<Icon
|
||
as={IoEllipsisVerticalSharp}
|
||
color="gray.400"
|
||
w="20px"
|
||
h="20px"
|
||
/>
|
||
</MenuButton>
|
||
<MenuList>
|
||
<MenuItem>Action</MenuItem>
|
||
<MenuItem>Another action</MenuItem>
|
||
<MenuItem>Something else here</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
</Flex>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<Flex direction="column">
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
For standing out. But the time is now to be okay to be the
|
||
greatest you.
|
||
</Text>
|
||
<HSeparator my="22px" />
|
||
<Flex justify="space-between" w="100%">
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
4
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Participants
|
||
</Text>
|
||
</Flex>
|
||
<Flex direction="column">
|
||
<Text
|
||
fontSize="md"
|
||
color={textColor}
|
||
fontWeight="bold"
|
||
mb="6px"
|
||
>
|
||
02.03.22
|
||
</Text>
|
||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||
Due Date
|
||
</Text>
|
||
</Flex>
|
||
</Flex>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
<Card minH="100%">
|
||
<CardBody h="100%">
|
||
<Flex w="100%" h="100%">
|
||
<Button variant="no-effects" w="100%" h="100%">
|
||
<Flex
|
||
direction="column"
|
||
align="center"
|
||
justify="center"
|
||
color={secondaryColor}
|
||
>
|
||
<Icon
|
||
as={BsPlus}
|
||
w="30px"
|
||
h="30px"
|
||
mb="12px"
|
||
fontWeight="bold"
|
||
/>
|
||
<Text fontSize="lg" fontWeight="bold">
|
||
Create a New Project
|
||
</Text>
|
||
</Flex>
|
||
</Button>
|
||
</Flex>
|
||
</CardBody>
|
||
</Card>
|
||
</Grid>
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
export default Projects;
|