Initial commit
This commit is contained in:
744
src/views/Pages/Profile/Projects.js
Normal file
744
src/views/Pages/Profile/Projects.js
Normal file
@@ -0,0 +1,744 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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;
|
||||
Reference in New Issue
Block a user