feat: 删除无用组件
This commit is contained in:
zdl
@@ -1,434 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Flex,
|
||||
Text,
|
||||
Stack,
|
||||
Grid,
|
||||
Image,
|
||||
Button,
|
||||
Icon,
|
||||
Input,
|
||||
Box,
|
||||
RangeSlider,
|
||||
RangeSliderTrack,
|
||||
RangeSliderFilledTrack,
|
||||
RangeSliderThumb,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
import Card from "components/Card/Card";
|
||||
import IconBox from "components/Icons/IconBox";
|
||||
import { HSeparator, VSeparator } from "components/Separator/Separator";
|
||||
|
||||
import Map from "components/Map/Map";
|
||||
|
||||
import bgAutomotiveCard from "assets/img/automotive-background-card.png";
|
||||
import tesla from "assets/img/tesla.png";
|
||||
import drake from "assets/img/drake.png";
|
||||
|
||||
import { FaMap, FaPlay, FaPowerOff } from "react-icons/fa";
|
||||
import {
|
||||
AiFillCar,
|
||||
AiOutlineSearch,
|
||||
AiFillBackward,
|
||||
AiFillForward,
|
||||
AiOutlineUnorderedList,
|
||||
} from "react-icons/ai";
|
||||
import { BsBatteryCharging } from "react-icons/bs";
|
||||
import { IoIosSpeedometer, IoIosMusicalNotes } from "react-icons/io";
|
||||
import { IoHeadsetSharp, IoChatbubbleEllipsesSharp } from "react-icons/io5";
|
||||
import { CgAppleWatch } from "react-icons/cg";
|
||||
import { SpotifyLogo } from "components/Icons/Icons";
|
||||
|
||||
const Automotive = () => {
|
||||
|
||||
const bgCard = useColorModeValue("linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)", "navy.800")
|
||||
|
||||
return (
|
||||
<Flex direction="column" pt={{ base: "150px" }}>
|
||||
<Card
|
||||
bgImage={bgAutomotiveCard}
|
||||
bgSize="cover"
|
||||
p={{ sm: "22px", lg: "60px 40px", xl: "100px 80px" }}
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align={{ sm: "center", lg: "normal" }}
|
||||
w="100%"
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
>
|
||||
<Flex direction="column" my={{ sm: "10px", lg: "0px" }}>
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold">
|
||||
Since Last Charge
|
||||
</Text>
|
||||
<HSeparator mt="11px" mb="25px" />
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing="30px"
|
||||
justify={{ sm: "center", lg: "normal" }}
|
||||
>
|
||||
<Flex direction="column">
|
||||
<Text color="white" fontSize="xs">
|
||||
Distance
|
||||
</Text>
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold">
|
||||
145{" "}
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="10px"
|
||||
display="inline-block"
|
||||
transform="translateY(-50%)"
|
||||
>
|
||||
KM
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text color="white" fontSize="xs">
|
||||
Average Energy
|
||||
</Text>
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold">
|
||||
300{" "}
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="10px"
|
||||
display="inline-block"
|
||||
transform="translateY(-50%)"
|
||||
>
|
||||
KW
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
textAlign="center"
|
||||
my={{ sm: "10px", lg: "0px" }}
|
||||
>
|
||||
<Image
|
||||
src={tesla}
|
||||
minW={{ md: "300px", lg: "450px" }}
|
||||
mt={{ lg: "-170px" }}
|
||||
mb="30px"
|
||||
display={{ sm: "none", md: "block" }}
|
||||
/>
|
||||
<Text color="white" fontSize="lg" fontWeight="bold">
|
||||
Available Range{" "}
|
||||
<Text as="span" fontSize="2xl">
|
||||
70{" "}
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="10px"
|
||||
display="inline-block"
|
||||
transform="translateY(-50%)"
|
||||
>
|
||||
%
|
||||
</Text>
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column" my={{ sm: "10px", lg: "0px" }}>
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold">
|
||||
Nearest Charger
|
||||
</Text>
|
||||
<HSeparator mt="11px" mb="25px" />
|
||||
|
||||
<Flex direction="row">
|
||||
<Text color="white" fontSize="xs" fontWeight="bold" me="52px">
|
||||
Miclan, DW <br />
|
||||
891 Limarenda road
|
||||
</Text>
|
||||
<Button
|
||||
p="9px"
|
||||
borderRadius="50%"
|
||||
variant="no-effects"
|
||||
bg="rgba(255, 255, 255, 0.15)"
|
||||
border="1px solid #fff"
|
||||
>
|
||||
<Icon as={FaMap} color="white" w="14px" h="14px" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: "1fr",
|
||||
md: "repeat(2, 1fr)",
|
||||
lg: "repeat(4, 1fr)",
|
||||
}}
|
||||
my="20px"
|
||||
gap="20px"
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
p="18px"
|
||||
justify="space-between"
|
||||
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
borderRadius="20px"
|
||||
>
|
||||
<Flex direction="column" me="auto">
|
||||
<Text fontSize="xs" color="white" mb="3px">
|
||||
Today's Trip
|
||||
</Text>
|
||||
<Text color="#fff" fontSize="lg" fontWeight="bold">
|
||||
143 KM
|
||||
</Text>
|
||||
</Flex>
|
||||
<IconBox bg="white" w="45px" h="45px">
|
||||
<Icon as={AiFillCar} color="blue.500" w="22px" h="22px" />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
<Flex
|
||||
align="center"
|
||||
p="18px"
|
||||
justify="space-between"
|
||||
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
borderRadius="20px"
|
||||
>
|
||||
<Flex direction="column" me="auto">
|
||||
<Text fontSize="xs" color="white" mb="3px">
|
||||
Battery Health
|
||||
</Text>
|
||||
<Text color="#fff" fontSize="lg" fontWeight="bold">
|
||||
99%
|
||||
</Text>
|
||||
</Flex>
|
||||
<IconBox bg="white" w="45px" h="45px">
|
||||
<Icon as={BsBatteryCharging} color="blue.500" w="22px" h="22px" />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
<Flex
|
||||
align="center"
|
||||
p="18px"
|
||||
justify="space-between"
|
||||
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
borderRadius="20px"
|
||||
>
|
||||
<Flex direction="column" me="auto">
|
||||
<Text fontSize="xs" color="white" mb="3px">
|
||||
Average Speed
|
||||
</Text>
|
||||
<Text color="#fff" fontSize="lg" fontWeight="bold">
|
||||
56 KM/h
|
||||
</Text>
|
||||
</Flex>
|
||||
<IconBox bg="white" w="45px" h="45px">
|
||||
<Icon as={IoIosSpeedometer} color="blue.500" w="22px" h="22px" />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
<Flex
|
||||
align="center"
|
||||
p="18px"
|
||||
justify="space-between"
|
||||
bg="linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
borderRadius="20px"
|
||||
>
|
||||
<Flex direction="column" me="auto">
|
||||
<Text fontSize="xs" color="white" mb="3px">
|
||||
Music Volume
|
||||
</Text>
|
||||
<Text color="#fff" fontSize="lg" fontWeight="bold">
|
||||
15 / 100
|
||||
</Text>
|
||||
</Flex>
|
||||
<IconBox bg="white" w="45px" h="45px">
|
||||
<Icon as={IoIosMusicalNotes} color="blue.500" w="22px" h="22px" />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Grid>
|
||||
<Card
|
||||
bg={bgCard}
|
||||
px="0px"
|
||||
>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
px="22px"
|
||||
>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
as={AiOutlineSearch}
|
||||
color="white"
|
||||
w="20px"
|
||||
h="20px"
|
||||
me="8px"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Search anything..."
|
||||
border={{}}
|
||||
_hover={{}}
|
||||
_focus={{}}
|
||||
color="white"
|
||||
/>
|
||||
</Flex>
|
||||
<Stack direction="row" spacing="10px" align="center">
|
||||
<Icon as={IoHeadsetSharp} color="white" w="18px" h="18px" />
|
||||
<Icon as={FaPlay} color="white" w="18px" h="18px" />
|
||||
<Icon as={FaPowerOff} color="white" w="18px" h="18px" />
|
||||
<Icon as={CgAppleWatch} color="white" w="18px" h="18px" />
|
||||
<Text color="white" fontWeight="bold" fontSize="2xl">
|
||||
10:45
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<HSeparator my="22px" />
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
mb="20px"
|
||||
px="22px"
|
||||
>
|
||||
<Flex align="center">
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold" me="10px">
|
||||
11:43
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="xs" fontWeight="bold">
|
||||
Estimated arrival time
|
||||
</Text>
|
||||
</Flex>
|
||||
<VSeparator
|
||||
h="30px"
|
||||
bg="white"
|
||||
display={{ sm: "none", md: "block" }}
|
||||
/>
|
||||
<Flex align="center">
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold" me="10px">
|
||||
2.4{" "}
|
||||
<Text
|
||||
as="span"
|
||||
color="white"
|
||||
fontSize="10px"
|
||||
display="inline-block"
|
||||
transform="translateY(-50%)"
|
||||
>
|
||||
KM
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="xs" fontWeight="bold">
|
||||
Turn Right in 2.4 miles
|
||||
</Text>
|
||||
</Flex>
|
||||
<VSeparator
|
||||
h="30px"
|
||||
bg="white"
|
||||
display={{ sm: "none", md: "block" }}
|
||||
/>
|
||||
<Flex align="center">
|
||||
<Text color="white" fontSize="2xl" fontWeight="bold" me="10px">
|
||||
6.7{" "}
|
||||
<Text
|
||||
as="span"
|
||||
color="white"
|
||||
fontSize="10px"
|
||||
display="inline-block"
|
||||
transform="translateY(-50%)"
|
||||
>
|
||||
KM
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="xs" fontWeight="bold">
|
||||
Distance to Starbucks
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Map />
|
||||
<Flex
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
my="20px"
|
||||
px="22px"
|
||||
>
|
||||
<Stack direction="row" spacing="15px" align="center">
|
||||
<Box position="relative">
|
||||
<Image src={drake} w="70px" h="70px" borderRadius="50%" />
|
||||
<SpotifyLogo
|
||||
w="25px"
|
||||
h="25px"
|
||||
position="absolute"
|
||||
right="-10px"
|
||||
transform="translateY(-70%)"
|
||||
/>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text color="white" fontSize="sm" fontWeight="bold">
|
||||
Life Is Good (feat. Drake)
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm">
|
||||
Future, Drake - Hip-Hop
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing="18px" my={{ sm: "15px", lg: "0px" }}>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="whiteAlpha"
|
||||
borderRadius="50px"
|
||||
w="45px"
|
||||
h="45px"
|
||||
>
|
||||
<Icon as={AiFillBackward} color="#fff" w="26px" h="26px" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="whiteAlpha"
|
||||
borderRadius="50px"
|
||||
w="45px"
|
||||
h="45px"
|
||||
>
|
||||
<Icon as={FaPlay} color="#fff" w="18px" h="18px" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="whiteAlpha"
|
||||
borderRadius="50px"
|
||||
w="45px"
|
||||
h="45px"
|
||||
>
|
||||
<Icon as={AiFillForward} color="#fff" w="26px" h="26px" />
|
||||
</Button>
|
||||
</Stack>
|
||||
<Flex align="center">
|
||||
<Flex direction="column" me="80px">
|
||||
<Text color="gray.400" fontSize="xs" fontWeight="bold">
|
||||
Volume
|
||||
</Text>
|
||||
<RangeSlider
|
||||
aria-label={["max"]}
|
||||
colorScheme="blue"
|
||||
defaultValue={[30]}
|
||||
borderRadius="20px"
|
||||
w={{ sm: "130px", md: "250px", lg: "200px" }}
|
||||
>
|
||||
<RangeSliderTrack>
|
||||
<RangeSliderFilledTrack />
|
||||
</RangeSliderTrack>
|
||||
<RangeSliderThumb index={0} />
|
||||
</RangeSlider>
|
||||
</Flex>
|
||||
<Stack direction="row" spacing="12px" align="center">
|
||||
<Icon
|
||||
as={AiOutlineUnorderedList}
|
||||
color="white"
|
||||
w="18px"
|
||||
h="18px"
|
||||
/>
|
||||
<Icon
|
||||
as={IoChatbubbleEllipsesSharp}
|
||||
color="white"
|
||||
w="18px"
|
||||
h="18px"
|
||||
/>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Automotive;
|
||||
@@ -1,539 +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 {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Portal,
|
||||
Spacer,
|
||||
Stack,
|
||||
Stat,
|
||||
StatHelpText,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import CRMimage from 'assets/img/CRM-image.png';
|
||||
import peopleImage from 'assets/img/people-image.png';
|
||||
import EventCalendar from 'components/Calendars/EventCalendar';
|
||||
import Card from 'components/Card/Card.js';
|
||||
import CardHeader from 'components/Card/CardHeader.js';
|
||||
import LineChart from 'components/Charts/LineChart';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import { DocumentIcon, RocketIcon, SettingsIcon } from 'components/Icons/Icons';
|
||||
import TransactionRow from 'components/Tables/TransactionRow';
|
||||
import React, { useRef } from 'react';
|
||||
import { BsArrowRight } from 'react-icons/bs';
|
||||
import { FaPlus, FaRegCalendarAlt } from 'react-icons/fa';
|
||||
import { RiArrowDropRightLine } from 'react-icons/ri';
|
||||
import { calendarDataCRM } from 'variables/calendar';
|
||||
import {
|
||||
lineChartDataCRM1,
|
||||
lineChartDataCRM2,
|
||||
lineChartOptionsCRM1,
|
||||
lineChartOptionsCRM2,
|
||||
} from 'variables/charts';
|
||||
import { revenueCRM, transactionsCRM } from 'variables/general';
|
||||
|
||||
function CRM() {
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const secondaryColor = useColorModeValue('gray.500', 'white');
|
||||
const iconBlue = useColorModeValue('gray.800', 'blue.500');
|
||||
const iconBoxInside = useColorModeValue('white', 'white');
|
||||
const overlayRef = useRef();
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '120px', md: '75px' }}>
|
||||
<Grid
|
||||
templateColumns={{ sm: '1fr', lg: '1.6fr 1fr', xl: '2fr 1fr' }}
|
||||
templateRows='1fr'
|
||||
gap='24px'
|
||||
mb={{ lg: '24px' }}
|
||||
>
|
||||
<Grid
|
||||
templateColumns='auto'
|
||||
templateRows={{ sm: '1fr auto', lg: '1fr 2.5fr' }}
|
||||
gap='24px'
|
||||
>
|
||||
<Stack
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
spacing='24px'
|
||||
maxH={{ lg: '220px' }}
|
||||
>
|
||||
<Card px='0px' pb='0px'>
|
||||
<CardHeader px='22px'>
|
||||
<Stat>
|
||||
<StatLabel fontSize='xs' color='gray.400'>
|
||||
Visitors
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' me='4px' color={textColor}>
|
||||
$5,927
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
color='green.400'
|
||||
size='sm'
|
||||
alignSelf='flex-end'
|
||||
fontWeight='bold'
|
||||
mb='0px'
|
||||
>
|
||||
+55%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
</CardHeader>
|
||||
<Flex direction='column'>
|
||||
<Box w='100%' h='100%'>
|
||||
<LineChart
|
||||
chartData={lineChartDataCRM1}
|
||||
chartOptions={lineChartOptionsCRM1}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card px='0px' pb='0px'>
|
||||
<CardHeader px='22px'>
|
||||
<Stat>
|
||||
<StatLabel fontSize='xs' color='gray.400'>
|
||||
Income
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' me='4px' color={textColor}>
|
||||
$130,912
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
color='green.400'
|
||||
size='sm'
|
||||
alignSelf='flex-end'
|
||||
fontWeight='bold'
|
||||
mb='0px'
|
||||
>
|
||||
+90%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
</CardHeader>
|
||||
<Flex direction='column'>
|
||||
<Box w='100%'>
|
||||
<LineChart
|
||||
chartData={lineChartDataCRM2}
|
||||
chartOptions={lineChartOptionsCRM2}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card p='0px'>
|
||||
<Button
|
||||
p='0px'
|
||||
w='100%'
|
||||
h='100%'
|
||||
bg='transparent'
|
||||
color='gray.500'
|
||||
borderRadius='15px'
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justifyContent='center'
|
||||
align='center'
|
||||
h='120px'
|
||||
>
|
||||
<Icon
|
||||
as={FaPlus}
|
||||
w='30px'
|
||||
h='30px'
|
||||
mb='12px'
|
||||
color={secondaryColor}
|
||||
/>
|
||||
<Text fontSize='lg' fontWeight='bold' color={secondaryColor}>
|
||||
New Tab
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Card>
|
||||
</Stack>
|
||||
<Card w={{ sm: '100%' }} h='575px'>
|
||||
<CardHeader pt='6px' mb='8px'>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Calendar
|
||||
</Text>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Wednesday, 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<Flex
|
||||
direction='column'
|
||||
position='relative'
|
||||
display='block'
|
||||
height='100%'
|
||||
>
|
||||
<EventCalendar
|
||||
initialDate='2022-10-01'
|
||||
calendarData={calendarDataCRM}
|
||||
/>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card w={{ sm: '100%' }} minH={{ lg: '300px' }}>
|
||||
<Flex
|
||||
direction='column'
|
||||
backgroundImage={peopleImage}
|
||||
bgPosition='center'
|
||||
bgRepeat='no-repeat'
|
||||
w='100%'
|
||||
h='100%'
|
||||
minH={{ sm: '200px', lg: '100%' }}
|
||||
bgSize='cover'
|
||||
position='relative'
|
||||
borderRadius='15px'
|
||||
>
|
||||
<Box
|
||||
bg='linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)'
|
||||
w='100%'
|
||||
position='absolute'
|
||||
h='100%'
|
||||
borderRadius='inherit'
|
||||
ref={overlayRef}
|
||||
></Box>
|
||||
<Portal containerRef={overlayRef}>
|
||||
<Flex
|
||||
flexDirection='column'
|
||||
color='white'
|
||||
p='24px 20px 4px 20px'
|
||||
lineHeight='1.6'
|
||||
h={{ md: '190px', lg: '240px' }}
|
||||
>
|
||||
<Text fontSize='lg' fontWeight='bold' pb='6px'>
|
||||
Hello John!
|
||||
</Text>
|
||||
<Text fontSize='sm' fontWeight='normal' w={{ lg: '92%' }}>
|
||||
Wealth creation is a revolutionary recent positive-sum game.
|
||||
It is all about who takes the opportunity first.
|
||||
</Text>
|
||||
<Spacer />
|
||||
<Flex
|
||||
align='center'
|
||||
mt={{ sm: '20px', lg: '40px', xl: '80px' }}
|
||||
>
|
||||
<Button
|
||||
ps='0px'
|
||||
pb={{ xl: '22px' }}
|
||||
variant='no-effects'
|
||||
bg='transparent'
|
||||
>
|
||||
<Text
|
||||
fontSize='sm'
|
||||
fontWeight='bold'
|
||||
_hover={{ me: '4px' }}
|
||||
color='#fff'
|
||||
transition='all .5s ease'
|
||||
>
|
||||
Read more
|
||||
</Text>
|
||||
<Icon
|
||||
as={BsArrowRight}
|
||||
w='12px'
|
||||
h='12px'
|
||||
fontSize='xl'
|
||||
transition='all .5s ease'
|
||||
mx='4px'
|
||||
color='#fff'
|
||||
cursor='pointer'
|
||||
_hover={{ transform: 'translateX(20%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Portal>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Stack
|
||||
direction={{ sm: 'column', md: 'row', lg: 'column' }}
|
||||
maxW={{ md: '100%' }}
|
||||
spacing='24px'
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Text fontSize='lg' text={textColor} fontWeight='bold'>
|
||||
Invoices
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<Flex direction='column' w='100%' pt='28px'>
|
||||
<Stack direction='column' spacing='24px' w='100%'>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBlue} me='18px'>
|
||||
<RocketIcon
|
||||
h={'20px'}
|
||||
w={'20px'}
|
||||
color={iconBoxInside}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Devices
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
250 in stock,{' '}
|
||||
<Text as='span' fontWeight='bold'>
|
||||
346+ sold
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBlue} me='18px'>
|
||||
<SettingsIcon
|
||||
h={'20px'}
|
||||
w={'20px'}
|
||||
color={iconBoxInside}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Tickets
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
123 closed,{' '}
|
||||
<Text as='span' fontWeight='bold'>
|
||||
15 open
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBlue} me='18px'>
|
||||
<DocumentIcon
|
||||
h={'20px'}
|
||||
w={'20px'}
|
||||
color={iconBoxInside}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Error logs
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
1 is active,{' '}
|
||||
<Text as='span' fontWeight='bold'>
|
||||
40 closed
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card maxH={{ md: '130px', lg: '100%' }}>
|
||||
<Flex
|
||||
direction={{ sm: 'column', md: 'row', lg: 'row' }}
|
||||
align='center'
|
||||
>
|
||||
<Box
|
||||
minW={{
|
||||
sm: '80px',
|
||||
lg: '100px',
|
||||
xl: '130px',
|
||||
'2xl': '170px',
|
||||
}}
|
||||
h={{ sm: '80px', lg: '100px', xl: '130px', '2xl': '170px' }}
|
||||
me={{ md: '36px' }}
|
||||
mb={{ sm: '12px', md: '0px' }}
|
||||
>
|
||||
<Image src={CRMimage} w='100%' h='100%' borderRadius='15px' />
|
||||
</Box>
|
||||
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align={{ sm: 'center', md: 'flex-start' }}
|
||||
>
|
||||
<Text
|
||||
fontWeight='bold'
|
||||
textAlign={{ sm: 'center', md: 'start' }}
|
||||
color={secondaryColor}
|
||||
fontSize={{ sm: 'sm', md: 'xs', lg: 'sm' }}
|
||||
mb={{ sm: '10px', lg: '22px' }}
|
||||
>
|
||||
Today's Martina's Birthday. Wish her the best of luck!
|
||||
</Text>
|
||||
<Button
|
||||
h={{ sm: '32px' }}
|
||||
variant='primary'
|
||||
p={{ sm: '0px 32px', lg: '6px 22px' }}
|
||||
>
|
||||
SEND MESSAGE
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Stack
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
spacing='24px'
|
||||
mt={{ sm: '24px', lg: '0px' }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader mb='12px'>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
justify={{ sm: 'center', lg: 'space-between' }}
|
||||
align={{ sm: 'center' }}
|
||||
w='100%'
|
||||
my={{ md: '12px' }}
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize={{ sm: 'lg', md: 'xl', lg: 'lg' }}
|
||||
fontWeight='bold'
|
||||
>
|
||||
Your Transactions
|
||||
</Text>
|
||||
<Flex align='center'>
|
||||
<Icon
|
||||
as={FaRegCalendarAlt}
|
||||
color='gray.400'
|
||||
fontSize='md'
|
||||
me='6px'
|
||||
></Icon>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='semibold'>
|
||||
23 - 30 March 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<Flex direction='column'>
|
||||
<Flex direction='column' w='100%' justify='center'>
|
||||
{transactionsCRM.map((row, index) => {
|
||||
return (
|
||||
<TransactionRow
|
||||
name={row.name}
|
||||
logo={row.logo}
|
||||
date={row.date}
|
||||
price={row.price}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader mb='12px'>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
justify={{ sm: 'center', lg: 'space-between' }}
|
||||
align={{ sm: 'center' }}
|
||||
w='100%'
|
||||
my={{ md: '12px' }}
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize={{ sm: 'lg', md: 'xl', lg: 'lg' }}
|
||||
fontWeight='bold'
|
||||
>
|
||||
Revenue
|
||||
</Text>
|
||||
<Flex align='center'>
|
||||
<Icon
|
||||
as={FaRegCalendarAlt}
|
||||
color='gray.400'
|
||||
fontSize='md'
|
||||
me='6px'
|
||||
></Icon>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='semibold'>
|
||||
23 - 30 March 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<Flex direction='column'>
|
||||
<Flex direction='column' w='100%' justify='center'>
|
||||
{revenueCRM.map((row, index) => {
|
||||
return (
|
||||
<TransactionRow
|
||||
name={row.name}
|
||||
logo={row.logo}
|
||||
date={row.date}
|
||||
price={row.price}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default CRM;
|
||||
@@ -1,115 +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 { Box, Image, Link } from "@chakra-ui/react";
|
||||
import Landing1 from "assets/img/Landing1.png";
|
||||
import Landing2 from "assets/img/Landing2.png";
|
||||
import Landing3 from "assets/img/Landing3.png";
|
||||
import React from "react";
|
||||
|
||||
export default function Default() {
|
||||
return (
|
||||
<Box
|
||||
flexDirection='column'
|
||||
pt={{ base: "0px", lg: "0px", xl: "70px", "2xl": "0px" }}
|
||||
m='auto'>
|
||||
<Box
|
||||
bg='linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%)'
|
||||
backdropFilter='blur(20px)'
|
||||
borderRadius={{ base: "12px", lg: "24px" }}
|
||||
p={{ base: "15px", lg: "20px" }}
|
||||
mx='auto'
|
||||
mb={{ base: "20px", lg: "20px" }}
|
||||
width={{
|
||||
base: "95% !important",
|
||||
xl: "80% !important",
|
||||
"2xl": "92% !important",
|
||||
}}
|
||||
zIndex='3'
|
||||
position={{ lg: "absolute" }}
|
||||
transform={{
|
||||
lg:
|
||||
"scale(0.8) perspective(2000px) rotateY(-35deg) rotateX(2deg) rotate(0deg)",
|
||||
xl:
|
||||
"scale(0.9) perspective(2000px) rotateY(-35deg) rotateX(2deg) rotate(0deg)",
|
||||
"2xl":
|
||||
"scale(0.8) perspective(2000px) rotateY(-35deg) rotateX(2deg) rotate(0deg)",
|
||||
}}
|
||||
right={{ lg: "125px", xl: "290px", "2xl": "250px" }}
|
||||
_hover={{
|
||||
transform: "scale(0.85) rotateY(-25deg) ",
|
||||
right: "225px",
|
||||
}}
|
||||
transition='0.3s linear'>
|
||||
<Link href='#'>
|
||||
<Image src={Landing1} borderRadius={{ base: "12px", lg: "24px" }} />
|
||||
</Link>
|
||||
</Box>
|
||||
<Box
|
||||
bg='linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%)'
|
||||
backdropFilter='blur(20px)'
|
||||
borderRadius={{ base: "12px", lg: "24px" }}
|
||||
p={{ base: "15px", lg: "20px" }}
|
||||
mx='auto'
|
||||
mb={{ base: "20px", lg: "20px" }}
|
||||
width={{
|
||||
base: "95% !important",
|
||||
xl: "80% !important",
|
||||
"2xl": "92% !important",
|
||||
}}
|
||||
zIndex='2'
|
||||
position={{ lg: "absolute" }}
|
||||
transform={{
|
||||
lg:
|
||||
"scale(.75) perspective(2000px) rotateY(-32deg) rotateX(2deg) rotate(0deg)",
|
||||
xl:
|
||||
"scale(.85) perspective(2000px) rotateY(-32deg) rotateX(2deg) rotate(0deg)",
|
||||
"2xl":
|
||||
"scale(.75) perspective(2000px) rotateY(-32deg) rotateX(2deg) rotate(0deg)",
|
||||
}}
|
||||
right={{ lg: "55px", xl: "120px", "2xl": "80px" }}>
|
||||
<Image src={Landing2} borderRadius={{ base: "12px", lg: "24px" }} />
|
||||
</Box>
|
||||
<Box
|
||||
bg='linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%)'
|
||||
backdropFilter='blur(20px)'
|
||||
borderRadius={{ base: "12px", lg: "24px" }}
|
||||
p={{ base: "15px", lg: "20px" }}
|
||||
mx='auto'
|
||||
mb={{ base: "20px", lg: "20px" }}
|
||||
width={{
|
||||
base: "95% !important",
|
||||
xl: "80% !important",
|
||||
"2xl": "92% !important",
|
||||
}}
|
||||
zIndex='1'
|
||||
position={{ lg: "absolute" }}
|
||||
transform={{
|
||||
lg:
|
||||
"scale(.7) perspective(2000px) rotateY(-30deg) rotateX(2deg) rotate(0deg)",
|
||||
xl:
|
||||
"scale(.8) perspective(2000px) rotateY(-30deg) rotateX(2deg) rotate(0deg)",
|
||||
"2xl":
|
||||
"scale(.7) perspective(2000px) rotateY(-30deg) rotateX(2deg) rotate(0deg)",
|
||||
}}
|
||||
right={{ lg: "-25px", xl: "-10px", "2xl": "-90px" }}>
|
||||
<Image src={Landing3} borderRadius={{ base: "12px", lg: "24px" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,532 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
useColorMode,
|
||||
} from "@chakra-ui/react";
|
||||
import bgWeather from "assets/img/BgMusicCard.png";
|
||||
import bgWeatherDark from "assets/img/bgMusicCardDark.png";
|
||||
import smartHome from "assets/img/smart-home.png";
|
||||
import sunBehindCloud from "assets/img/sun-behind-cloud.png";
|
||||
import Card from "components/Card/Card";
|
||||
import BarChart from "components/Charts/BarChart";
|
||||
import { HSeparator } from "components/Separator/Separator";
|
||||
import VisxPieChart from "components/VisxPieChart/VisxPieChart";
|
||||
import CircularSlider from "react-circular-slider-svg";
|
||||
import { AiOutlineInfoCircle } from "react-icons/ai";
|
||||
import { BiWater, BiWifi } from "react-icons/bi";
|
||||
import { BsFillRecordCircleFill, BsThermometerHigh } from "react-icons/bs";
|
||||
import { FaPlus, FaSnowflake } from "react-icons/fa";
|
||||
import { IoBulbOutline, IoEllipsisVerticalSharp } from "react-icons/io5";
|
||||
import {
|
||||
barChartDataSmartHome,
|
||||
barChartOptionsSmartHome,
|
||||
} from "variables/charts";
|
||||
import { rooms } from "variables/general";
|
||||
|
||||
const SmartHome = () => {
|
||||
const { colorMode } = useColorMode();
|
||||
const [temperature, setTemperature] = useState(21);
|
||||
const [activeButton, setActiveButton] = useState({
|
||||
kitchen: true,
|
||||
living: false,
|
||||
attic: false,
|
||||
});
|
||||
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgButtonGroup = useColorModeValue("gray.50", "navy.700");
|
||||
const bgActiveButton = useColorModeValue("#fff", "navy.800");
|
||||
const arcBackgroundColor = useColorModeValue("#EDF2F7", "#0B1437");
|
||||
const borderColor = useColorModeValue("gray.200", "gray.600");
|
||||
const iconColor = useColorModeValue("gray.400", "white");
|
||||
const bgIcon = useColorModeValue(
|
||||
"linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
|
||||
"navy.800"
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: "125px", lg: "75px" }}>
|
||||
<Grid templateColumns={{ sm: "1fr", lg: "1.5fr 1fr" }} gap='20px'>
|
||||
<Card>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify='space-between'
|
||||
align={{ md: "center" }}
|
||||
mb='16px'>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='lg'
|
||||
fontWeight='bold'
|
||||
mb={{ sm: "12px", md: "0px" }}>
|
||||
Cameras
|
||||
</Text>
|
||||
<Flex align='center'>
|
||||
<Flex bg={bgButtonGroup} borderRadius='10px' p='6px' me='10px'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
w={{ sm: "fit-content", xl: "135px" }}
|
||||
h='40px'
|
||||
fontSize='xs'
|
||||
boxShadow={
|
||||
activeButton.kitchen
|
||||
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
|
||||
: "none"
|
||||
}
|
||||
bg={activeButton.kitchen ? bgActiveButton : "transparent"}
|
||||
onClick={() =>
|
||||
setActiveButton({
|
||||
kitchen: true,
|
||||
living: false,
|
||||
attic: false,
|
||||
})
|
||||
}>
|
||||
KITCHEN
|
||||
</Button>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
w={{ sm: "fit-content", xl: "135px" }}
|
||||
h='40px'
|
||||
fontSize='xs'
|
||||
boxShadow={
|
||||
activeButton.living
|
||||
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
|
||||
: "none"
|
||||
}
|
||||
bg={activeButton.living ? bgActiveButton : "transparent"}
|
||||
onClick={() =>
|
||||
setActiveButton({
|
||||
kitchen: false,
|
||||
living: true,
|
||||
attic: false,
|
||||
})
|
||||
}>
|
||||
LIVING
|
||||
</Button>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
w={{ sm: "fit-content", xl: "135px" }}
|
||||
h='40px'
|
||||
fontSize='xs'
|
||||
boxShadow={
|
||||
activeButton.attic
|
||||
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
|
||||
: "none"
|
||||
}
|
||||
bg={activeButton.attic ? bgActiveButton : "transparent"}
|
||||
onClick={() =>
|
||||
setActiveButton({
|
||||
kitchen: false,
|
||||
attic: true,
|
||||
living: false,
|
||||
})
|
||||
}>
|
||||
ATTIC
|
||||
</Button>
|
||||
</Flex>
|
||||
<Menu isOpen={isOpen} onClose={onClose}>
|
||||
<MenuButton onClick={onOpen}>
|
||||
<Icon
|
||||
as={IoEllipsisVerticalSharp}
|
||||
color='gray.400'
|
||||
w='20px'
|
||||
h='20px'
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
p='20px'
|
||||
justify='flex-end'
|
||||
borderRadius='15px'
|
||||
bgImage={smartHome}
|
||||
minH='390px'>
|
||||
<Flex
|
||||
p='6px 12px'
|
||||
align='center'
|
||||
h='fit-content'
|
||||
bg='rgba(255, 255, 255, 0.4)'
|
||||
borderRadius='8px'>
|
||||
<Icon
|
||||
as={BsFillRecordCircleFill}
|
||||
color='red.500'
|
||||
w='10px'
|
||||
h='10px'
|
||||
me='4px'
|
||||
/>
|
||||
<Text color={textColor} fontSize='10px' fontWeight='bold'>
|
||||
RECORDING
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Flex direction='column' justify='space-between' h='100%'>
|
||||
<Card
|
||||
bgImage={colorMode === "light" ? bgWeather : bgWeatherDark}
|
||||
minH='140px'
|
||||
bgSize='cover'
|
||||
mb={{ sm: "20px", lg: "0px" }}>
|
||||
<Flex align='center' justify='space-between' h='100%'>
|
||||
<Flex direction='column'>
|
||||
<Text color='white' fontSize='xs' mb='3px'>
|
||||
Weather Today
|
||||
</Text>
|
||||
<Text color='white' fontSize='lg' fontWeight='bold'>
|
||||
San Francisco - 34°C
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' align='center'>
|
||||
<Image src={sunBehindCloud} w='65px' h='65px' />
|
||||
<Text color='white' fontSize='xs' fontWeight='bold'>
|
||||
Cloudly
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap='20px'>
|
||||
<Card display='flex' justify='center' align='center' minH='155px'>
|
||||
<Flex direction='column'>
|
||||
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
|
||||
23{" "}
|
||||
<Text as='span' fontSize='sm'>
|
||||
°C
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Living Room
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Temperature
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card display='flex' justify='center' align='center' minH='155px'>
|
||||
<Flex direction='column'>
|
||||
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
|
||||
44{" "}
|
||||
<Text as='span' fontSize='sm'>
|
||||
%
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Outside
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Humidity
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card display='flex' justify='center' align='center' minH='155px'>
|
||||
<Flex direction='column'>
|
||||
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
|
||||
87{" "}
|
||||
<Text as='span' fontSize='sm'>
|
||||
m³
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Water
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Consumption
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card display='flex' justify='center' align='center' minH='155px'>
|
||||
<Flex direction='column'>
|
||||
<Text color='blue.500' fontSize='3xl' fontWeight='bold'>
|
||||
593{" "}
|
||||
<Text as='span' fontSize='sm'>
|
||||
GB
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Internet
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
All Devices
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Flex>
|
||||
</Grid>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: "1fr",
|
||||
md: "repeat(2, 1fr)",
|
||||
lg: "1.5fr 1fr 1fr",
|
||||
xl: "2fr 1fr 1fr",
|
||||
}}
|
||||
gap='20px'
|
||||
my='20px'>
|
||||
<Card gridColumn={{ md: "1 / 3", lg: "auto" }}>
|
||||
<Flex justify='space-between' align='center' mb='30px'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Consumption by Room
|
||||
</Text>
|
||||
<Icon
|
||||
as={AiOutlineInfoCircle}
|
||||
w='20px'
|
||||
h='20px'
|
||||
color={textColor}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex direction={{ sm: "column", md: "row" }} align='center'>
|
||||
<Box mb={{ sm: "12px", lg: "0px" }} color='red'>
|
||||
<VisxPieChart data={rooms} title={"473.1"} width={200} />
|
||||
</Box>
|
||||
<Stack
|
||||
direction='column'
|
||||
spacing='10px'
|
||||
ms={{ md: "50px", lg: "10px", xl: "50px" }}
|
||||
w='100%'>
|
||||
{rooms.map((room, index, arr) => {
|
||||
return (
|
||||
<Flex
|
||||
justify='space-between'
|
||||
align='center'
|
||||
key={index}
|
||||
py='6px'
|
||||
w='100%'
|
||||
borderBottom={
|
||||
index === arr.length - 1 ? "none" : "1px solid"
|
||||
}
|
||||
borderColor={borderColor}>
|
||||
<Flex align='center'>
|
||||
<Box
|
||||
borderRadius='6px'
|
||||
bg={room.color}
|
||||
w='20px'
|
||||
h='20px'
|
||||
me='12px'
|
||||
/>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='xs'>
|
||||
{room.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
color='gray.400'
|
||||
fontSize='xs'
|
||||
fontWeight='bold'>{`${room.percentage} %`}</Text>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Consumption per Day
|
||||
</Text>
|
||||
<BarChart
|
||||
chartData={barChartDataSmartHome}
|
||||
chartOptions={barChartOptionsSmartHome}
|
||||
/>
|
||||
</Card>
|
||||
<Card>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Device Limit
|
||||
</Text>
|
||||
<Flex
|
||||
direction='column'
|
||||
align='center'
|
||||
alignSelf='center'
|
||||
textAlign='center'
|
||||
position='relative'>
|
||||
<CircularSlider
|
||||
startAngle={45}
|
||||
endAngle={315}
|
||||
handleSize={6}
|
||||
minValue={16}
|
||||
maxValue={32}
|
||||
size={220}
|
||||
arcColor='#3182CE'
|
||||
arcBackgroundColor={arcBackgroundColor}
|
||||
handle1={{
|
||||
value: temperature,
|
||||
onChange: (v) => setTemperature(Math.round(v)),
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='32px'
|
||||
fontWeight='bold'
|
||||
position='absolute'
|
||||
top='35%'>{`${temperature} °C`}</Text>
|
||||
|
||||
<Stack direction='row' spacing='16px'>
|
||||
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
|
||||
16°C
|
||||
</Text>
|
||||
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
|
||||
Temperature
|
||||
</Text>
|
||||
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
|
||||
32°C
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
<HSeparator my='40px' />
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: "1fr",
|
||||
md: "repeat(2, 1fr)",
|
||||
lg: "repeat(6, 1fr)",
|
||||
}}
|
||||
gap='20px'>
|
||||
<Card minH='210px'>
|
||||
<Flex direction='column' justify='space-between' h='100%'>
|
||||
<Flex justify='space-between' align='center' mb='auto'>
|
||||
<Text fontSize='xs' color='gray.400'>
|
||||
OFF
|
||||
</Text>
|
||||
<Switch colorScheme='blue' />
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Icon as={BiWater} color='gray.400' w='62px' h='62px' mb='10px' />
|
||||
<Text color={textColor} fontWeight='bold' mb='3px'>
|
||||
Humidity
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Inactive since: 2 days
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card minH='210px' bg={bgIcon}>
|
||||
<Flex direction='column' justify='space-between' h='100%'>
|
||||
<Flex justify='space-between' align='center' mb='auto'>
|
||||
<Text fontSize='xs' color='gray.400'>
|
||||
ON
|
||||
</Text>
|
||||
<Switch colorScheme='blue' defaultChecked />
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Icon
|
||||
as={BsThermometerHigh}
|
||||
color={iconColor}
|
||||
w='62px'
|
||||
h='62px'
|
||||
mb='10px'
|
||||
/>
|
||||
<Text color='white' fontWeight='bold' mb='3px'>
|
||||
Temperature
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Active
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card minH='210px'>
|
||||
<Flex direction='column' justify='space-between' h='100%'>
|
||||
<Flex justify='space-between' align='center' mb='auto'>
|
||||
<Text fontSize='xs' color='gray.400'>
|
||||
OFF
|
||||
</Text>
|
||||
<Switch colorScheme='blue' />
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Icon
|
||||
as={FaSnowflake}
|
||||
color={iconColor}
|
||||
w='62px'
|
||||
h='62px'
|
||||
mb='10px'
|
||||
/>
|
||||
<Text color={textColor} fontWeight='bold' mb='3px'>
|
||||
Air Conditioner
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Inactive since: 1 hour
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card minH='210px'>
|
||||
<Flex direction='column' justify='space-between' h='100%'>
|
||||
<Flex justify='space-between' align='center' mb='auto'>
|
||||
<Text fontSize='xs' color='gray.400'>
|
||||
OFF
|
||||
</Text>
|
||||
<Switch colorScheme='blue' />
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Icon
|
||||
as={IoBulbOutline}
|
||||
color={iconColor}
|
||||
w='62px'
|
||||
h='62px'
|
||||
mb='10px'
|
||||
/>
|
||||
<Text color={textColor} fontWeight='bold' mb='3px'>
|
||||
Lights
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Inactive since: 27 min
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card minH='210px' bg={bgIcon}>
|
||||
<Flex direction='column' justify='space-between' h='100%'>
|
||||
<Flex justify='space-between' align='center' mb='auto'>
|
||||
<Text fontSize='xs' color='gray.400'>
|
||||
ON
|
||||
</Text>
|
||||
<Switch colorScheme='blue' defaultChecked />
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Icon as={BiWifi} color={iconColor} w='62px' h='62px' mb='10px' />
|
||||
<Text color='white' fontWeight='bold' mb='3px'>
|
||||
Wi-Fi
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='bold'>
|
||||
Active
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card minH='210px' cursor='pointer'>
|
||||
<Flex direction='column' align='center' justify='center' h='100%'>
|
||||
<Icon as={FaPlus} color={iconColor} w='30px' h='30px' mb='11px' />
|
||||
<Text
|
||||
fontSize={{ sm: "lg", lg: "md", xl: "lg" }}
|
||||
color={iconColor}
|
||||
fontWeight='bold'>
|
||||
New Device
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default SmartHome;
|
||||
Reference in New Issue
Block a user