chore: 删除未使用的 Argon 模板示例页面
- 删除 Pages/Profile/Overview.js - 删除 Pages/Profile/Teams.js - 删除 Pages/Profile/Projects.js 这些是 Argon Dashboard 模板自带的示例页面，项目中未被引用 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,757 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* 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 {
|
|
||||||
Box,
|
|
||||||
Facebook,
|
|
||||||
Instagram,
|
|
||||||
PenTool,
|
|
||||||
Plus,
|
|
||||||
Twitter,
|
|
||||||
Files,
|
|
||||||
} from "lucide-react";
|
|
||||||
// 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={Box} 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={Files} 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={PenTool} 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={Facebook} />
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="#"
|
|
||||||
color={iconColor}
|
|
||||||
fontSize="lg"
|
|
||||||
me="10px"
|
|
||||||
_hover={{ color: "blue.500" }}
|
|
||||||
>
|
|
||||||
<Icon as={Instagram} />
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="#"
|
|
||||||
color={iconColor}
|
|
||||||
fontSize="lg"
|
|
||||||
me="10px"
|
|
||||||
_hover={{ color: "blue.500" }}
|
|
||||||
>
|
|
||||||
<Icon as={Twitter} />
|
|
||||||
</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={Plus} 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;
|
|
||||||
@@ -1,742 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* 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 { Plus, Box, PenTool, Files, MoreVertical } from "lucide-react";
|
|
||||||
|
|
||||||
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={Box} 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={Files} 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={PenTool} 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={MoreVertical}
|
|
||||||
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={MoreVertical}
|
|
||||||
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={MoreVertical}
|
|
||||||
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={MoreVertical}
|
|
||||||
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={MoreVertical}
|
|
||||||
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={Plus}
|
|
||||||
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;
|
|
||||||
@@ -1,741 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* 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 { ThumbsUp, Plus, MessageCircle, Box as BoxIcon, PenTool, Star, Share2, StarHalf, Files, MoreVertical } from 'lucide-react';
|
|
||||||
// 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={Box} 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={Files} 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={PenTool} 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={Plus} 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={Plus} 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={ThumbsUp} w='18px' h='18px' me='4px' cursor='pointer' />
|
|
||||||
<Text fontSize='md'>1502</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' color='gray.500'>
|
|
||||||
<Icon as={MessageCircle} w='18px' h='18px' me='4px' cursor='pointer' />
|
|
||||||
<Text fontSize='md'>36</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' color='gray.500'>
|
|
||||||
<Icon as={Share2} 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={ThumbsUp} w='18px' h='18px' me='4px' cursor='pointer' />
|
|
||||||
<Text fontSize='md'>3 likes</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' color='gray.500'>
|
|
||||||
<Icon as={Share2} 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={ThumbsUp} w='18px' h='18px' me='4px' cursor='pointer' />
|
|
||||||
<Text fontSize='md'>10 likes</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' color='gray.500'>
|
|
||||||
<Icon as={Share2} 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={ThumbsUp} w='18px' h='18px' me='4px' cursor='pointer' />
|
|
||||||
<Text fontSize='md'>42 likes</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' color='gray.500'>
|
|
||||||
<Icon as={Share2} 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={MoreVertical} 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={Star} fill="currentColor" />
|
|
||||||
<Icon as={Star} fill="currentColor" />
|
|
||||||
<Icon as={Star} fill="currentColor" />
|
|
||||||
<Icon as={Star} fill="currentColor" />
|
|
||||||
<Icon as={StarHalf} fill="currentColor" />
|
|
||||||
</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={MoreVertical} 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={Star} fill="currentColor" />
|
|
||||||
<Icon as={Star} fill="currentColor" />
|
|
||||||
<Icon as={Star} fill="currentColor" />
|
|
||||||
<Icon as={Star} fill="currentColor" />
|
|
||||||
<Icon as={StarHalf} fill="currentColor" />
|
|
||||||
</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