c820cfa804
- views/Center, views/Community, views/DataBrowser 等 - views/EventDetail, views/LimitAnalyse, views/StockOverview - views/TradingSimulation, views/Pages, views/Authentication - views/Profile, views/Settings - 处理 Tag/TagIcon 命名冲突 - 涉及 52 个组件文件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
742 lines
24 KiB
JavaScript
Executable File
742 lines
24 KiB
JavaScript
Executable File
/*!
|
||
|
||
=========================================================
|
||
* Argon Dashboard Chakra PRO - v1.0.0
|
||
=========================================================
|
||
|
||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||
|
||
* Designed and Coded by Simmmple & Creative Tim
|
||
|
||
=========================================================
|
||
|
||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||
|
||
*/
|
||
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;
|