Skip to content

Commit 2f9eab3

Browse files
simmmplewebsimmmpleweb
committed
Team members
1 parent 082550c commit 2f9eab3

File tree

4 files changed

+276
-17
lines changed

4 files changed

+276
-17
lines changed

‎src/components/card/Member.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Chakra imports
2+
import React from "react";
3+
import {
4+
Avatar,
5+
Box,
6+
Flex,
7+
useColorModeValue,
8+
Icon,
9+
Text,
10+
} from "@chakra-ui/react";
11+
// Custom components
12+
import Card from "components/card/Card.js";
13+
import TransparentMenu from "components/menu/TransparentMenu";
14+
// Custom icons
15+
import { IoEllipsisVertical } from "react-icons/io5";
16+
17+
export default function Default(props) {
18+
const { avatar, name, job, ...rest } = props;
19+
const textColor = useColorModeValue("secondaryGray.900", "white");
20+
const bg = useColorModeValue("white", "#1B254B");
21+
22+
return (
23+
<Card py='10px' bg={bg} {...rest}>
24+
<Flex align='center'>
25+
<Flex justifyContent='center' alignItems='center'>
26+
<Avatar
27+
h={{ base: "48px", xl: "36px", "2xl": "48px" }}
28+
w={{ base: "48px", xl: "36px", "2xl": "48px" }}
29+
src={avatar}
30+
me='20px'
31+
/>
32+
<Flex direction='column' align='start'>
33+
<Text
34+
color={textColor}
35+
fontSize={{ base: "md", xl: "sm", "3xl": "md" }}
36+
fontWeight='700'>
37+
{name}
38+
</Text>
39+
<Text
40+
color='secondaryGray.600'
41+
fontSize={{ base: "sm", xl: "xs", "3xl": "sm" }}
42+
fontWeight='400'>
43+
{job}
44+
</Text>
45+
</Flex>
46+
</Flex>
47+
48+
<TransparentMenu
49+
ms='auto'
50+
mb='0px'
51+
icon={
52+
<Icon as={IoEllipsisVertical} w='24px' h='24px' color={textColor} />
53+
}
54+
/>
55+
</Flex>
56+
</Card>
57+
);
58+
}

‎src/components/menu/TransparentMenu.js

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from "react";
2+
3+
// Chakra imports
4+
import {
5+
Menu,
6+
MenuButton,
7+
MenuItem,
8+
MenuList,
9+
useDisclosure,
10+
useColorModeValue,
11+
Flex,
12+
Icon,
13+
Text,
14+
} from "@chakra-ui/react";
15+
// Assets
16+
import {
17+
MdOutlinePerson,
18+
MdOutlineCardTravel,
19+
MdOutlineLightbulb,
20+
MdOutlineSettings,
21+
} from "react-icons/md";
22+
export default function Banner(props) {
23+
const { icon, ...rest } = props;
24+
25+
// Ellipsis modals
26+
const {
27+
isOpen: isOpen1,
28+
onOpen: onOpen1,
29+
onClose: onClose1,
30+
} = useDisclosure();
31+
32+
// Chakra color mode
33+
34+
const textColor = useColorModeValue("secondaryGray.500", "white");
35+
const textHover = useColorModeValue(
36+
{ color: "secondaryGray.900", bg: "unset" },
37+
{ color: "secondaryGray.500", bg: "unset" }
38+
);
39+
const bgList = useColorModeValue("white", "whiteAlpha.100");
40+
const bgShadow = useColorModeValue(
41+
"14px 17px 40px 4px rgba(112, 144, 176, 0.08)",
42+
"unset"
43+
);
44+
45+
return (
46+
<Menu isOpen={isOpen1} onClose={onClose1}>
47+
<MenuButton {...rest} onClick={onOpen1}>
48+
{icon}
49+
</MenuButton>
50+
<MenuList
51+
w='150px'
52+
minW='unset'
53+
maxW='150px !important'
54+
border='transparent'
55+
backdropFilter='blur(63px)'
56+
bg={bgList}
57+
boxShadow={bgShadow}
58+
borderRadius='20px'
59+
p='15px'>
60+
<MenuItem
61+
transition='0.2s linear'
62+
color={textColor}
63+
_hover={textHover}
64+
p='0px'
65+
borderRadius='8px'
66+
_active={{
67+
bg: "transparent",
68+
}}
69+
_focus={{
70+
bg: "transparent",
71+
}}
72+
mb='10px'>
73+
<Flex align='center'>
74+
<Icon as={MdOutlinePerson} h='16px' w='16px' me='8px' />
75+
<Text fontSize='sm' fontWeight='400'>
76+
Panel 1
77+
</Text>
78+
</Flex>
79+
</MenuItem>
80+
<MenuItem
81+
transition='0.2s linear'
82+
p='0px'
83+
borderRadius='8px'
84+
color={textColor}
85+
_hover={textHover}
86+
_active={{
87+
bg: "transparent",
88+
}}
89+
_focus={{
90+
bg: "transparent",
91+
}}
92+
mb='10px'>
93+
<Flex align='center'>
94+
<Icon as={MdOutlineCardTravel} h='16px' w='16px' me='8px' />
95+
<Text fontSize='sm' fontWeight='400'>
96+
Panel 2
97+
</Text>
98+
</Flex>
99+
</MenuItem>
100+
<MenuItem
101+
transition='0.2s linear'
102+
p='0px'
103+
borderRadius='8px'
104+
color={textColor}
105+
_hover={textHover}
106+
_active={{
107+
bg: "transparent",
108+
}}
109+
_focus={{
110+
bg: "transparent",
111+
}}
112+
mb='10px'>
113+
<Flex align='center'>
114+
<Icon as={MdOutlineLightbulb} h='16px' w='16px' me='8px' />
115+
<Text fontSize='sm' fontWeight='400'>
116+
Panel 3
117+
</Text>
118+
</Flex>
119+
</MenuItem>
120+
<MenuItem
121+
transition='0.2s linear'
122+
color={textColor}
123+
_hover={textHover}
124+
p='0px'
125+
borderRadius='8px'
126+
_active={{
127+
bg: "transparent",
128+
}}
129+
_focus={{
130+
bg: "transparent",
131+
}}>
132+
<Flex align='center'>
133+
<Icon as={MdOutlineSettings} h='16px' w='16px' me='8px' />
134+
<Text fontSize='sm' fontWeight='400'>
135+
Panel 4
136+
</Text>
137+
</Flex>
138+
</MenuItem>
139+
</MenuList>
140+
</Menu>
141+
);
142+
}

‎src/views/admin/default/components/Team.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Chakra imports
2+
import { Button, Flex, Text, Icon, useColorModeValue } from "@chakra-ui/react";
3+
// Custom components
4+
import Card from "components/card/Card.js";
5+
import Member from "components/card/Member.js";
6+
import Menu from "components/menu/MainMenu";
7+
import IconBox from "components/icons/IconBox";
8+
9+
// Assets
10+
import { MdCheckBox, MdAddCircle } from "react-icons/md";
11+
import Avatar2 from "assets/img/avatars/avatar2.png";
12+
import Avatar3 from "assets/img/avatars/avatar3.png";
13+
import Avatar5 from "assets/img/avatars/avatar5.png";
14+
import React from "react";
15+
16+
export default function Conversion(props) {
17+
const { ...rest } = props;
18+
19+
// Chakra Color Mode
20+
const textColor = useColorModeValue("secondaryGray.900", "white");
21+
const boxBg = useColorModeValue("secondaryGray.300", "navy.700");
22+
const brandColor = useColorModeValue("brand.500", "brand.400");
23+
24+
const iconColor = useColorModeValue("brand.500", "white");
25+
const bgButton = useColorModeValue("secondaryGray.300", "whiteAlpha.100");
26+
const bgHover = useColorModeValue(
27+
{ bg: "secondaryGray.400" },
28+
{ bg: "whiteAlpha.50" }
29+
);
30+
const bgFocus = useColorModeValue(
31+
{ bg: "secondaryGray.300" },
32+
{ bg: "whiteAlpha.100" }
33+
);
34+
return (
35+
<Card p='20px' align='center' direction='column' w='100%' {...rest}>
36+
<Flex alignItems='center' w='100%' mb='30px'>
37+
<Text color={textColor} fontSize='lg' fontWeight='700'>
38+
Team members
39+
</Text>
40+
<Button
41+
ms='auto'
42+
align='center'
43+
justifyContent='center'
44+
bg={bgButton}
45+
_hover={bgHover}
46+
_focus={bgFocus}
47+
_active={bgFocus}
48+
w='37px'
49+
h='37px'
50+
lineHeight='100%'
51+
borderRadius='10px'>
52+
<Icon as={MdAddCircle} color={iconColor} h='24px' w='24px' />
53+
</Button>
54+
</Flex>
55+
<Member
56+
mb='17px'
57+
name='Adela Parkson'
58+
job='Creative Director'
59+
avatar={Avatar3}
60+
/>
61+
<Member
62+
mb='17px'
63+
name='Christian Mad'
64+
job='Product Designer'
65+
avatar={Avatar2}
66+
/>
67+
<Member
68+
name='Jason Statham'
69+
job='Junior Graphic Designer'
70+
avatar={Avatar5}
71+
/>
72+
</Card>
73+
);
74+
}

‎src/views/admin/default/index.jsx

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import TotalSpent from "views/admin/default/components/TotalSpent";
5959
import WeeklyRevenue from "views/admin/default/components/WeeklyRevenue";
6060
import Limited from "components/card/Limited";
6161
import Security from "views/admin/default/components/Security";
62+
import Team from "views/admin/default/components/Team";
6263
import {
6364
columnsDataCheck,
6465
columnsDataComplex,
@@ -193,23 +194,7 @@ export default function UserReports() {
193194
currentBid='0.91 ETH'
194195
download='#'
195196
/>
196-
<Limited
197-
name='ETH AI Brain'
198-
author='By Nick Wilson'
199-
bidders={[
200-
Avatar1,
201-
Avatar2,
202-
Avatar3,
203-
Avatar4,
204-
Avatar1,
205-
Avatar1,
206-
Avatar1,
207-
Avatar1,
208-
]}
209-
image={Coffee}
210-
currentBid='0.91 ETH'
211-
download='#'
212-
/>
197+
<Team />
213198
<Security name='ETH AI Brain' author='By Nick Wilson' />
214199
<Limited
215200
name='Starbucks'

0 commit comments

Comments
 (0)