Initial commit
This commit is contained in:
757
src/views/Pages/Profile/Overview.js
Normal file
757
src/views/Pages/Profile/Overview.js
Normal file
@@ -0,0 +1,757 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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.
|
||||
|
||||
*/
|
||||
|
||||
import { useReducer } from "react";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Link,
|
||||
Switch,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import avatar2 from "assets/img/avatars/avatar2.png";
|
||||
import avatar3 from "assets/img/avatars/avatar3.png";
|
||||
import avatar4 from "assets/img/avatars/avatar4.png";
|
||||
import avatar5 from "assets/img/avatars/avatar5.png";
|
||||
import avatar6 from "assets/img/avatars/avatar6.png";
|
||||
import ImageArchitect1 from "assets/img/ImageArchitect1.png";
|
||||
import ImageArchitect2 from "assets/img/ImageArchitect2.png";
|
||||
import ImageArchitect3 from "assets/img/ImageArchitect3.png";
|
||||
import {
|
||||
FaCube,
|
||||
FaFacebook,
|
||||
FaInstagram,
|
||||
FaPenFancy,
|
||||
FaPlus,
|
||||
FaTwitter,
|
||||
} from "react-icons/fa";
|
||||
import { IoDocumentsSharp } from "react-icons/io5";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import { HSeparator } from "components/Separator/Separator";
|
||||
|
||||
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 Overview() {
|
||||
const [state, dispatch] = useReducer(reducer, {
|
||||
overview: true,
|
||||
teams: false,
|
||||
projects: false,
|
||||
});
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const iconColor = useColorModeValue("blue.500", "white");
|
||||
const bgProfile = useColorModeValue("hsla(0,0%,100%,.8)", "navy.800");
|
||||
const borderProfileColor = useColorModeValue("white", "transparent");
|
||||
|
||||
return (
|
||||
<Flex direction="column" pt={{ base: "120px", md: "75px", lg: "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>
|
||||
|
||||
<Grid templateColumns={{ sm: "1fr", xl: "repeat(3, 1fr)" }} gap="22px">
|
||||
<Card p="16px">
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Platform Settings
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="600" mb="20px">
|
||||
ACCOUNT
|
||||
</Text>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Email me when someone follows me
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Email me when someone answers on my post
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Email me when someone mentions me
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.400"
|
||||
fontWeight="600"
|
||||
m="6px 0px 20px 0px"
|
||||
>
|
||||
APPLICATION
|
||||
</Text>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
New launches and projects
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Monthly product changes
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Subscribe to newsletter
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card p="16px" my={{ sm: "24px", xl: "0px" }}>
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Overview Information
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
Hi, I’m Esthera Jackson, Decisions: If you can’t decide, the
|
||||
answer is no. If two equally difficult paths, choose the one
|
||||
more painful in the short term (pain avoidance is creating an
|
||||
illusion of equality).
|
||||
</Text>
|
||||
<HSeparator my="30px" />
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Full Name:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
Esthera Jackson
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Mobile:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
(44) 123 1234 123
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Email:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
esthera@simmmple.com
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Location:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
United States
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Social Media:{" "}
|
||||
</Text>
|
||||
<Flex>
|
||||
<Link
|
||||
href="#"
|
||||
color={iconColor}
|
||||
fontSize="lg"
|
||||
me="10px"
|
||||
_hover={{ color: "blue.500" }}
|
||||
>
|
||||
<Icon as={FaFacebook} />
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
color={iconColor}
|
||||
fontSize="lg"
|
||||
me="10px"
|
||||
_hover={{ color: "blue.500" }}
|
||||
>
|
||||
<Icon as={FaInstagram} />
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
color={iconColor}
|
||||
fontSize="lg"
|
||||
me="10px"
|
||||
_hover={{ color: "blue.500" }}
|
||||
>
|
||||
<Icon as={FaTwitter} />
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card p="16px">
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Conversations
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Flex direction="column" w="100%">
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar2}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
Hi! I need more information...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar3}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
Awesome work, can you change...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar4}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
Have a great afternoon...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar5}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
About files I can...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar6}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
About files I can...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Card p="16px" my="24px">
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Projects
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="400">
|
||||
Architects design houses
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr", md: "1fr 1fr", xl: "repeat(4, 1fr)" }}
|
||||
templateRows={{ sm: "1fr 1fr 1fr auto", md: "1fr 1fr", xl: "1fr" }}
|
||||
gap="24px"
|
||||
>
|
||||
<Flex direction="column">
|
||||
<Box mb="20px" position="relative" borderRadius="15px">
|
||||
<Image src={ImageArchitect1} borderRadius="15px" />
|
||||
<Box
|
||||
w="100%"
|
||||
h="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
borderRadius="15px"
|
||||
bg="linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)"
|
||||
></Box>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="600" mb="10px">
|
||||
Project #1
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Modern
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400" mb="20px">
|
||||
As Uber works through a huge amount of internal management
|
||||
turmoil.
|
||||
</Text>
|
||||
<Flex justifyContent="space-between">
|
||||
<Button variant="dark" minW="110px" h="36px">
|
||||
VIEW ALL
|
||||
</Button>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar name="Ryan Florence" src={avatar6} />
|
||||
<Avatar name="Segun Adebayo" src={avatar2} />
|
||||
<Avatar name="Kent Dodds" src={avatar3} />
|
||||
<Avatar name="Prosper Otemuyiwa" src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Box mb="20px" position="relative" borderRadius="15px">
|
||||
<Image src={ImageArchitect2} borderRadius="15px" />
|
||||
<Box
|
||||
w="100%"
|
||||
h="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
borderRadius="15px"
|
||||
bg="linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)"
|
||||
></Box>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="600" mb="10px">
|
||||
Project #2
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Scandinavian
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400" mb="20px">
|
||||
Music is something that every person has his or her own
|
||||
specific opinion about.
|
||||
</Text>
|
||||
<Flex justifyContent="space-between">
|
||||
<Button variant="dark" minW="110px" h="36px">
|
||||
VIEW ALL
|
||||
</Button>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar name="Ryan Florence" src={avatar6} />
|
||||
<Avatar name="Segun Adebayo" src={avatar2} />
|
||||
<Avatar name="Kent Dodds" src={avatar3} />
|
||||
<Avatar name="Prosper Otemuyiwa" src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Box mb="20px" position="relative" borderRadius="15px">
|
||||
<Image src={ImageArchitect3} borderRadius="15px" />
|
||||
<Box
|
||||
w="100%"
|
||||
h="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
borderRadius="15px"
|
||||
bg="linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)"
|
||||
></Box>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="600" mb="10px">
|
||||
Project #3
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Minimalist
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400" mb="20px">
|
||||
Different people have different taste, especially various
|
||||
types of music.
|
||||
</Text>
|
||||
<Flex justifyContent="space-between">
|
||||
<Button variant="dark" minW="110px" h="36px">
|
||||
VIEW ALL
|
||||
</Button>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar name="Ryan Florence" src={avatar6} />
|
||||
<Avatar name="Segun Adebayo" src={avatar2} />
|
||||
<Avatar name="Kent Dodds" src={avatar3} />
|
||||
<Avatar name="Prosper Otemuyiwa" src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button
|
||||
p="0px"
|
||||
bg="transparent"
|
||||
border="1px solid lightgray"
|
||||
borderRadius="15px"
|
||||
minHeight={{ sm: "200px", md: "100%" }}
|
||||
>
|
||||
<Flex direction="column" justifyContent="center" align="center">
|
||||
<Icon as={FaPlus} color={textColor} fontSize="lg" mb="12px" />
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Create a New Project
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Overview;
|
||||
181
src/views/Pages/Profile/Profile.js
Normal file
181
src/views/Pages/Profile/Profile.js
Normal file
@@ -0,0 +1,181 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Avatar,
|
||||
Button,
|
||||
Divider,
|
||||
Badge,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
useColorMode,
|
||||
useToast,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalCloseButton,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { useAuth } from "../../../contexts/AuthContext";
|
||||
|
||||
export default function Profile() {
|
||||
const { colorMode } = useColorMode();
|
||||
const { user, logout, updateUser } = useAuth();
|
||||
const toast = useToast();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
toast({
|
||||
title: "已登出",
|
||||
description: "您已成功退出登录",
|
||||
status: "info",
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogoutConfirm = () => {
|
||||
handleLogout();
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Box p={8}>
|
||||
<Text>加载用户信息中...</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box p={8}>
|
||||
<VStack spacing={8} align="stretch">
|
||||
{/* 用户信息卡片 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<HStack spacing={4}>
|
||||
<Avatar
|
||||
size="lg"
|
||||
name={user.name}
|
||||
src={user.avatar}
|
||||
bg="blue.500"
|
||||
/>
|
||||
<VStack align="start" spacing={2}>
|
||||
<Heading size="md">{user.name}</Heading>
|
||||
<Text color="gray.500">{user.email}</Text>
|
||||
<Badge colorScheme="blue" variant="subtle">
|
||||
{user.role === 'admin' ? '管理员' : '用户'}
|
||||
</Badge>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<HStack justify="space-between">
|
||||
<Text fontWeight="medium">用户ID:</Text>
|
||||
<Text>{user.id}</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text fontWeight="medium">登录时间:</Text>
|
||||
<Text>{new Date(user.loginTime).toLocaleString()}</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text fontWeight="medium">账户状态:</Text>
|
||||
<Badge colorScheme="green">活跃</Badge>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 账户设置 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Heading size="md">账户设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
修改个人信息
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
修改密码
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
通知设置
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 安全设置 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Heading size="md">安全设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
两步验证
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
登录历史
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
设备管理
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 登出按钮 */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
<VStack spacing={4}>
|
||||
<Text color="gray.500" textAlign="center">
|
||||
点击下方按钮退出当前账户
|
||||
</Text>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
variant="outline"
|
||||
onClick={onOpen}
|
||||
w="full"
|
||||
>
|
||||
退出登录
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</VStack>
|
||||
|
||||
{/* 登出确认对话框 */}
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>确认退出</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Text>您确定要退出登录吗？</Text>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant="ghost" mr={3} onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button colorScheme="red" onClick={handleLogoutConfirm}>
|
||||
确认退出
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
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;
|
||||
744
src/views/Pages/Profile/Teams.js
Normal file
744
src/views/Pages/Profile/Teams.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.
|
||||
|
||||
*/
|
||||
import React, { useReducer } from 'react';
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Input,
|
||||
Link,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Stack,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
useDisclosure
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import avatar1 from 'assets/img/avatars/avatar1.png';
|
||||
import avatar10 from 'assets/img/avatars/avatar10.png';
|
||||
import avatar2 from 'assets/img/avatars/avatar2.png';
|
||||
import avatar3 from 'assets/img/avatars/avatar3.png';
|
||||
import avatar4 from 'assets/img/avatars/avatar4.png';
|
||||
import avatar5 from 'assets/img/avatars/avatar5.png';
|
||||
import avatar7 from 'assets/img/avatars/avatar7.png';
|
||||
import avatar8 from 'assets/img/avatars/avatar8.png';
|
||||
import avatar9 from 'assets/img/avatars/avatar9.png';
|
||||
import teamsImage from 'assets/img/teams-image.png';
|
||||
import { AiFillLike, AiOutlinePlus } from 'react-icons/ai';
|
||||
import { FaCommentDots, FaCube, FaPenFancy, FaPlus } from 'react-icons/fa';
|
||||
import { IoIosStar, IoMdShareAlt, IoMdStarHalf } from 'react-icons/io';
|
||||
import { IoDocumentsSharp, IoEllipsisVerticalSharp } from 'react-icons/io5';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card.js';
|
||||
import CardBody from 'components/Card/CardBody.js';
|
||||
import CardHeader from 'components/Card/CardHeader.js';
|
||||
import { InvisionLogo, SlackLogo } from 'components/Icons/Icons';
|
||||
import { HSeparator } from 'components/Separator/Separator.js';
|
||||
|
||||
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 Teams() {
|
||||
const [ state, dispatch ] = useReducer(reducer, {
|
||||
overview: false,
|
||||
teams: true,
|
||||
projects: false
|
||||
});
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure();
|
||||
|
||||
const { isOpen: isOpen2, onOpen: onOpen2, onClose: onClose2 } = 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 bgButton = useColorModeValue('linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)', 'blue.500');
|
||||
const bgBadge = useColorModeValue('gray.100', 'navy.900');
|
||||
|
||||
return (
|
||||
<Flex direction='column' mt={{ sm: '150px', md: '100px' }} overflowX='hidden'>
|
||||
<Box
|
||||
borderRadius='15px'
|
||||
px='0px'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
justifyContent='center'
|
||||
align='center'>
|
||||
<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>
|
||||
</Box>
|
||||
<Card px='0px'>
|
||||
<CardBody overflowX={{ sm: 'scroll', '2xl': 'hidden' }}>
|
||||
<Grid
|
||||
gap={{ sm: '50px', '2xl': '70px' }}
|
||||
templateColumns={{ sm: 'repeat(12, 1fr)', lg: 'repeat(12, 1fr)' }}>
|
||||
<Flex direction='column' mx='auto' align='center' justify='center' ms='20px'>
|
||||
<Link href='#'>
|
||||
<Flex
|
||||
justify='center'
|
||||
align='center'
|
||||
borderRadius='50%'
|
||||
bg={bgButton}
|
||||
w='62px'
|
||||
h='58px'
|
||||
mb='7px'>
|
||||
<Icon as={FaPlus} w='16px' h='16px' color='#fff' />
|
||||
</Flex>
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Add Story
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar4} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Esthera
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar3} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Boris U
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar2} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Tao G
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar1} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Kay R
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar5} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Tom M
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar1} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Nicole N
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar7} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Emma O
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar8} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Marie P
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar9} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Bruce M
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar10} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Sandra A
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center' me='20px'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar1} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Katty L
|
||||
</Text>
|
||||
</Flex>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '2.1fr 1fr' }} templateRows='auto 1fr' mt='24px' gap='24px'>
|
||||
<Card alignSelf={{ lg: 'flex-start', '2xl': 'stretch' }}>
|
||||
<CardHeader w='100%'>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Flex>
|
||||
<Box>
|
||||
<Avatar src={avatar4} w='40px' h='40px' borderRadius='12px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Esthera Jackson
|
||||
</Text>
|
||||
<Text fontSize='sm' color='gray.500' fontWeight='normal'>
|
||||
3 days ago
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button variant='primary' p='8px 32px'>
|
||||
<Flex align='center' color='#fff' justifyContent='center'>
|
||||
<Icon as={AiOutlinePlus} w='18px' h='18px' fontWeight='bold' me='4px' />
|
||||
<Text fontSize='10px' fontWeight='bold' mt='4px'>
|
||||
FOLLOW
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<HSeparator my='16px' />
|
||||
<CardBody>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md' mb='24px'>
|
||||
Personal profiles are the perfect way for you to grab their attention and persuade
|
||||
recruiters to continue reading your CV because you’re telling them from the off exactly
|
||||
why they should hire you.
|
||||
</Text>
|
||||
<Image src={teamsImage} minW={{ sm: '270px' }} h='auto' borderRadius='12px' />
|
||||
<Flex justify='space-between' align='center' my='6px'>
|
||||
<Stack spacing='20px' direction='row' my='18px'>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>1502</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={FaCommentDots} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>36</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>12</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Flex align='center' display={{ sm: 'none', md: 'flex' }} direction='row'>
|
||||
<AvatarGroup size='xs' me='6px'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='sm'>
|
||||
and 30+ more
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<HSeparator mb='26px' />
|
||||
<Flex mb='30px'>
|
||||
<Box>
|
||||
<Avatar src={avatar7} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Michael Lewis
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='md' mt='6px' mb='14px'>
|
||||
I always felt like I could do anything. That’s the main thing people are
|
||||
controlled by! Thoughts- their perception of themselves!
|
||||
</Text>
|
||||
<Flex>
|
||||
<Flex align='center' color='gray.500' me='21px'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>3 likes</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>2 shares</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex mb='30px'>
|
||||
<Box>
|
||||
<Avatar src={avatar10} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Jessica Stones
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='md' mt='6px' mb='14px'>
|
||||
Society has put up so many boundaries, so many limitations on what’s right and
|
||||
wrong that it’s almost impossible to get a pure thought out. It’s like a little
|
||||
kid, a little boy.
|
||||
</Text>
|
||||
<Flex>
|
||||
<Flex align='center' color='gray.500' me='21px'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>10 likes</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>1 share</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex mb='30px'>
|
||||
<Box>
|
||||
<Avatar src={avatar8} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Anthony Joshua
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='md' mt='6px' mb='14px'>
|
||||
It's all about work ! Great ideas mean nothing if they aren't realised by
|
||||
hungry, desiring people.
|
||||
</Text>
|
||||
<Flex>
|
||||
<Flex align='center' color='gray.500' me='21px'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>42 likes</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>6 shares</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center'>
|
||||
<Box>
|
||||
<Avatar src={avatar4} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='Write your comment...'
|
||||
_focus={{ borderColor: 'blue.500' }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Digital Marketing
|
||||
</Text>
|
||||
<Flex as='div' variant='no-effects' p='0px'>
|
||||
<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>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' mt='16px'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md' mb='20px'>
|
||||
A group of people who collectively are responsible for all of the work necessary to
|
||||
produce working, validated assets.
|
||||
</Text>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Industry:</Text>
|
||||
<Badge p='12px 16px' borderRadius='12px' bg={bgBadge}>
|
||||
MARKETING TEAM
|
||||
</Badge>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Rating:</Text>
|
||||
<Stack direction='row' spacing='2px'>
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoMdStarHalf} />
|
||||
</Stack>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Members:</Text>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Design
|
||||
</Text>
|
||||
<Flex variant='no-effects' p='0px'>
|
||||
<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>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' mt='16px'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md' mb='20px'>
|
||||
Because it's about motivating the doers. Because I’m here to follow my dreams and
|
||||
inspire other people to follow their dreams, too.
|
||||
</Text>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Industry:</Text>
|
||||
<Badge p='12px 16px' borderRadius='12px' bg={bgBadge}>
|
||||
DESIGN TEAM
|
||||
</Badge>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Rating:</Text>
|
||||
<Stack direction='row' spacing='2px'>
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoMdStarHalf} />
|
||||
</Stack>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Members:</Text>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex align='center'>
|
||||
<SlackLogo w='34px' h='34px' me='14px' />
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Slack Meet
|
||||
</Text>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='sm'>
|
||||
11:00 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='md' mt='16px' mb='8px'>
|
||||
You have an upcoming meet for Marketing Planning
|
||||
</Text>
|
||||
<Text fontWeight='bold' color={textColor} fontSize='md'>
|
||||
Meeting ID:{' '}
|
||||
<Text as='span' color='gray.400' fontWeight='normal'>
|
||||
902-128-281
|
||||
</Text>
|
||||
</Text>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Button variant='primary' p='0px 40px' h='35px'>
|
||||
JOIN
|
||||
</Button>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex align='center'>
|
||||
<InvisionLogo w='34px' h='34px' me='14px' />
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Invision
|
||||
</Text>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='sm'>
|
||||
04:50 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='md' mt='16px' mb='8px'>
|
||||
You have an upcoming video call for{' '}
|
||||
<Text as='span' color='blue.500'>
|
||||
Chakra Design
|
||||
</Text>{' '}
|
||||
at 04:50 PM.
|
||||
</Text>
|
||||
<Text fontWeight='bold' color={textColor} fontSize='md'>
|
||||
Meeting ID:{' '}
|
||||
<Text as='span' color='gray.400' fontWeight='normal'>
|
||||
902-128-281
|
||||
</Text>
|
||||
</Text>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Button variant='primary' p='0px 40px' h='35px'>
|
||||
JOIN
|
||||
</Button>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Teams;
|
||||
Reference in New Issue
Block a user