feat: 删除无用组件
This commit is contained in:
zdl
@@ -1,264 +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 { AddIcon } from '@chakra-ui/icons';
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Box,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
IconButton,
|
||||
Stack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
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 EventCalendar from 'components/Calendars/EventCalendar';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card';
|
||||
import CardBody from 'components/Card/CardBody';
|
||||
import CardHeader from 'components/Card/CardHeader';
|
||||
import LineChart from 'components/Charts/LineChart';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import { ClockIcon, DocumentIcon, WalletIcon } from 'components/Icons/Icons';
|
||||
import { VSeparator } from 'components/Separator/Separator';
|
||||
import React from 'react';
|
||||
import { FaPalette, FaShip } from 'react-icons/fa';
|
||||
import { calendarDataCalendar } from 'variables/calendar';
|
||||
import {
|
||||
lineChartDataCalendar,
|
||||
lineChartOptionsCalendar,
|
||||
} from 'variables/charts';
|
||||
|
||||
function Calendar() {
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const iconBlue = useColorModeValue('blue.500', 'white');
|
||||
const iconBoxColor = useColorModeValue('gray.100', 'blue.500');
|
||||
const bgCard = useColorModeValue(
|
||||
'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
|
||||
'navy.800'
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
||||
<Flex w='100%' align='flex-end' justify='flex-end' mb='24px'>
|
||||
<Flex
|
||||
ms='auto'
|
||||
align='center'
|
||||
justify='center'
|
||||
me='25px'
|
||||
mb={{ sm: '16px', md: '50px' }}
|
||||
>
|
||||
<Flex direction='column' me='25px'>
|
||||
<Text fontSize='sm' color='white' fontWeight='bold' mb='8px'>
|
||||
Team Members:
|
||||
</Text>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar
|
||||
borderColor={useColorModeValue('blue.500', 'navy.900')}
|
||||
src={avatar1}
|
||||
/>
|
||||
<Avatar
|
||||
borderColor={useColorModeValue('blue.500', 'navy.900')}
|
||||
src={avatar2}
|
||||
/>
|
||||
<Avatar
|
||||
borderColor={useColorModeValue('blue.500', 'navy.900')}
|
||||
src={avatar3}
|
||||
/>
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
<VSeparator h='56px' me='25px' />
|
||||
<IconButton
|
||||
w='40px'
|
||||
h='40px'
|
||||
bg={useColorModeValue('white', 'blue.500')}
|
||||
aria-label='Search database'
|
||||
icon={
|
||||
<AddIcon
|
||||
w='12px'
|
||||
h='12px'
|
||||
color={useColorModeValue('blue.500', 'white')}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '2fr 1fr' }} gap='24px'>
|
||||
<Card minH='570px'>
|
||||
<CardHeader mb='6px'>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='6px'>
|
||||
Calendar
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
Wednesday, 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody position='relative' display='block' height='100%'>
|
||||
<EventCalendar
|
||||
initialDate='2022-10-01'
|
||||
calendarData={calendarDataCalendar}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Stack
|
||||
direction={{ sm: 'column', md: 'row', lg: 'column' }}
|
||||
spacing='24px'
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='28px'>
|
||||
Upcoming events
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Stack direction='column' spacing='20px'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
|
||||
<Icon
|
||||
as={WalletIcon}
|
||||
h={'22px'}
|
||||
w={'22px'}
|
||||
color={iconBlue}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Cyber Week
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
27 March 2020, at 12:30 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
|
||||
<Icon
|
||||
as={ClockIcon}
|
||||
h={'22px'}
|
||||
w={'22px'}
|
||||
color={iconBlue}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Meeting with Marry
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
22 March 2020, at 10:00 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center' mb='22px'>
|
||||
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
|
||||
<Icon
|
||||
as={DocumentIcon}
|
||||
h={'22px'}
|
||||
w={'22px'}
|
||||
color={iconBlue}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Book Deposit Hall
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
25 March 2022, at 9:30 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center' mb='22px'>
|
||||
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
|
||||
<Icon as={FaShip} h={'22px'} w={'22px'} color={iconBlue} />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Shipment Deal UK
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
25 March 2022, at 2:00 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center' mb='22px'>
|
||||
<IconBox h={'50px'} w={'50px'} bg={iconBoxColor} me='16px'>
|
||||
<Icon
|
||||
as={FaPalette}
|
||||
h={'22px'}
|
||||
w={'22px'}
|
||||
color={iconBlue}
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Verify Dashboard Color Palette
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
26 March 2022, at 9:00 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card
|
||||
px='0px'
|
||||
pb='0px'
|
||||
bg={bgCard}
|
||||
minH='230px'
|
||||
alignSelf='flex-start'
|
||||
>
|
||||
<CardHeader px='22px'>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='lg' color='#fff' fontWeight='bold'>
|
||||
Productivity
|
||||
</Text>
|
||||
<Text color='#fff' fontSize='sm' fontWeight='normal'>
|
||||
<Text as='span' color='green.400' fontWeight='bold'>
|
||||
+4%
|
||||
</Text>
|
||||
<Text as='span' fontWeight='bold'>
|
||||
{' '}
|
||||
more{' '}
|
||||
</Text>
|
||||
in 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Box w='100%'>
|
||||
<LineChart
|
||||
chartData={lineChartDataCalendar}
|
||||
chartOptions={lineChartOptionsCalendar}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
@@ -1,70 +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 { Flex, Text, useColorModeValue } from "@chakra-ui/react";
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import BasicTable from "components/Tables/BasicTable";
|
||||
import SearchTable1 from "components/Tables/SearchTable1";
|
||||
import React from "react";
|
||||
import { columnsData1 } from "variables/columnsData";
|
||||
import tableData1 from "variables/tableData1.json";
|
||||
|
||||
function DataTables() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
|
||||
return (
|
||||
<Flex direction="column" pt={{ sm: "125px", lg: "75px" }}>
|
||||
<Card px="0px" mb="24px">
|
||||
<CardHeader px="22px" mb="24px">
|
||||
<Flex direction="column">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold" mb="6px">
|
||||
Datatable Simple
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
A lightweight, extendable, dependency-free javascript HTML table
|
||||
plugin.
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<BasicTable tableData={tableData1} columnsData={columnsData1} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px">
|
||||
<CardHeader px="22px" mb="24px">
|
||||
<Flex direction="column">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold" mb="6px">
|
||||
Datatable Search
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
A lightweight, extendable, dependency-free javascript HTML table
|
||||
plugin.
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<SearchTable1 tableData={tableData1} columnsData={columnsData1} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataTables;
|
||||
@@ -1,336 +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 Board from '@asseinfo/react-kanban';
|
||||
import '@asseinfo/react-kanban/dist/styles.css';
|
||||
import { AddIcon, AttachmentIcon } from '@chakra-ui/icons';
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Badge,
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
IconButton,
|
||||
Image,
|
||||
Input,
|
||||
Text,
|
||||
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 kanban1 from 'assets/img/kanban1.png';
|
||||
import kanban2 from 'assets/img/kanban2.png';
|
||||
import kanban3 from 'assets/img/kanban3.png';
|
||||
import {
|
||||
kanbanRenderTrack,
|
||||
kanbanRenderView,
|
||||
} from 'components/Scrollbar/Scrollbar';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Scrollbars } from 'react-custom-scrollbars-2';
|
||||
import { logger } from '../../utils/logger';
|
||||
|
||||
function Kanban() {
|
||||
// Chakra color mode
|
||||
const textGray = useColorModeValue('gray.400', 'white');
|
||||
const attachementsGray = useColorModeValue('gray.500', 'gray.200');
|
||||
const kanbanCardBg = useColorModeValue('white', 'navy.700');
|
||||
const addButton = useColorModeValue('white', 'blue.500');
|
||||
const addIcon = useColorModeValue('blue.500', 'white');
|
||||
// Kanban Settings, states, etc.
|
||||
let initialBoard = {
|
||||
counter: 9,
|
||||
columns: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Backlog',
|
||||
cards: [
|
||||
{
|
||||
id: 1.1,
|
||||
title: 'Drag me to “In progress” section!',
|
||||
},
|
||||
{
|
||||
id: 1.2,
|
||||
title: 'Click me to change the title',
|
||||
},
|
||||
{
|
||||
id: 1.3,
|
||||
image: kanban1,
|
||||
members: [avatar2, avatar3, avatar4],
|
||||
status: 'PENDING',
|
||||
title:
|
||||
'Website Design: New cards for blog section and profile details!',
|
||||
attachements: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'In progress',
|
||||
cards: [
|
||||
{
|
||||
id: 2.1,
|
||||
title: 'Fix Firefox Errors!',
|
||||
members: [avatar2, avatar3, avatar4],
|
||||
status: 'ERRORS',
|
||||
attachements: '2',
|
||||
},
|
||||
{
|
||||
id: 2.2,
|
||||
title: 'Argon UI Dashboard - PRO Version v1.0.1',
|
||||
},
|
||||
{
|
||||
id: 2.3,
|
||||
image: kanban2,
|
||||
members: [avatar2, avatar3, avatar4],
|
||||
status: 'UPDATES',
|
||||
title:
|
||||
'Argon UI Update: Add RTL Page and the details about documentation',
|
||||
attachements: '9',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Done',
|
||||
cards: [
|
||||
{
|
||||
id: 3.1,
|
||||
title: 'Schedule Black Friday campaign',
|
||||
},
|
||||
{
|
||||
id: 3.2,
|
||||
image: kanban3,
|
||||
title:
|
||||
'Marketing plan: The whole plan for the next weeks & quarter',
|
||||
attachements: '7',
|
||||
members: [avatar2, avatar3, avatar4],
|
||||
status: 'DONE',
|
||||
},
|
||||
{
|
||||
id: 3.3,
|
||||
title: 'Redesign website page - until tomorrow',
|
||||
attachements: '7',
|
||||
members: [avatar2, avatar3, avatar4],
|
||||
status: 'DONE',
|
||||
},
|
||||
{
|
||||
id: 3.4,
|
||||
title: 'Resolve RTL Page bugs - Argon',
|
||||
attachements: '1',
|
||||
members: [avatar2, avatar3, avatar4],
|
||||
status: 'DONE',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const [board, setBoard] = useState(initialBoard);
|
||||
function onCardNew(newCard) {
|
||||
const newCardLocal = { id: initialBoard.counter + 1, ...newCard };
|
||||
initialBoard.counter = initialBoard.counter + 1;
|
||||
setBoard(initialBoard);
|
||||
return newCardLocal;
|
||||
}
|
||||
|
||||
// 卡片创建日志处理函数
|
||||
function handleCardNew(cardData) {
|
||||
logger.debug('Kanban', '创建新卡片', {
|
||||
cardId: cardData?.id,
|
||||
title: cardData?.title,
|
||||
boardCounter: initialBoard.counter
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction='column'
|
||||
minH='100vh'
|
||||
align='center'
|
||||
pt={{ sm: '125px', lg: '75px' }}
|
||||
overflow='hidden'
|
||||
>
|
||||
<Flex maxWidth='100%'>
|
||||
<Scrollbars
|
||||
autoHide
|
||||
renderTrackHorizontal={kanbanRenderTrack}
|
||||
renderView={kanbanRenderView}
|
||||
>
|
||||
<Board
|
||||
initialBoard={board}
|
||||
allowAddCard
|
||||
onNewCardConfirm={onCardNew}
|
||||
onCardNew={handleCardNew}
|
||||
renderColumnHeader={function ({ title }, { addCard }) {
|
||||
const kanbanForm = useRef(null);
|
||||
const cardInput = useRef(null);
|
||||
function kanbanFormOpen() {
|
||||
kanbanForm.current.style.display = 'flex';
|
||||
}
|
||||
function kanbanFormClose() {
|
||||
kanbanForm.current.style.display = 'none';
|
||||
}
|
||||
function formSubmit() {
|
||||
addCard({ title: cardInput.current.value });
|
||||
cardInput.current.value = '';
|
||||
}
|
||||
return (
|
||||
<Flex
|
||||
flexDirection='column'
|
||||
mb='24px'
|
||||
fontWeight='bold'
|
||||
w='100%'
|
||||
key={title}
|
||||
>
|
||||
<Flex justify='space-between' align='center' mb='24px'>
|
||||
<Text fontSize='lg' mt='5px'>
|
||||
{title}
|
||||
</Text>
|
||||
<IconButton
|
||||
w='92px'
|
||||
h='35px'
|
||||
aria-label='Search database'
|
||||
variant='no-hover'
|
||||
bg={addButton}
|
||||
icon={<AddIcon w='12px' h='12px' color={addIcon} />}
|
||||
onClick={kanbanFormOpen}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex flexDirection='column' ref={kanbanForm} display='none'>
|
||||
<FormControl>
|
||||
<Input
|
||||
variant='main'
|
||||
borderRadius='15px'
|
||||
mb='20px'
|
||||
bg={kanbanCardBg}
|
||||
border='none'
|
||||
ref={cardInput}
|
||||
/>
|
||||
<Flex>
|
||||
<Button
|
||||
colorScheme='blue'
|
||||
me='14px'
|
||||
onClick={formSubmit}
|
||||
>
|
||||
Add Card
|
||||
</Button>
|
||||
<Button
|
||||
variant='no-hover'
|
||||
color={useColorModeValue('gray.700', 'white')}
|
||||
bg={useColorModeValue('white', 'gray.700')}
|
||||
onClick={kanbanFormClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Flex>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}}
|
||||
renderCard={({ image, title, attachements, status, members }) => (
|
||||
<Flex
|
||||
mt='10px'
|
||||
flexDirection='column'
|
||||
bg={kanbanCardBg}
|
||||
p='25px'
|
||||
borderRadius='15px'
|
||||
w='470px'
|
||||
key={title}
|
||||
>
|
||||
{image ? (
|
||||
<Image
|
||||
borderRadius='15px'
|
||||
w='420px'
|
||||
h='284px'
|
||||
src={image}
|
||||
mb='20px'
|
||||
/>
|
||||
) : null}
|
||||
{status ? (
|
||||
<Badge
|
||||
fontSize='10px'
|
||||
fontWeight='bold'
|
||||
variant='solid'
|
||||
mb='16px'
|
||||
h='28px'
|
||||
w='94px'
|
||||
display='flex'
|
||||
borderRadius='8px'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
bg={
|
||||
status === 'ERRORS'
|
||||
? 'red.500'
|
||||
: status === 'PENDING'
|
||||
? 'orange.300'
|
||||
: status === 'DONE'
|
||||
? 'green.500'
|
||||
: status === 'UPDATES'
|
||||
? 'blue.400'
|
||||
: 'teal'
|
||||
}
|
||||
colorScheme={
|
||||
status === 'ERRORS'
|
||||
? 'red'
|
||||
: status === 'PENDING'
|
||||
? 'orange'
|
||||
: status === 'DONE'
|
||||
? 'green'
|
||||
: status === 'UPDATES'
|
||||
? 'blue'
|
||||
: 'teal'
|
||||
}
|
||||
>
|
||||
{status}
|
||||
</Badge>
|
||||
) : null}
|
||||
<Text fontSize='md' color={textGray}>
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{image ? (
|
||||
members ? (
|
||||
<Flex justify='space-between' align='center' mt='20px'>
|
||||
<Flex justify='center' align='center'>
|
||||
<AttachmentIcon me='2px' color={attachementsGray} />
|
||||
<Text fontSize='sm' color={attachementsGray}>
|
||||
{attachements}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar3} />
|
||||
<Avatar src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
) : null
|
||||
) : null}
|
||||
</Flex>
|
||||
)}
|
||||
/>
|
||||
</Scrollbars>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Kanban;
|
||||
@@ -1,680 +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,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Grid,
|
||||
Icon,
|
||||
Input,
|
||||
Stack,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import avatar4 from 'assets/img/avatars/avatar4.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 { RocketIcon } from 'components/Icons/Icons';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { AiFillSetting } from 'react-icons/ai';
|
||||
import { BsCircleFill } from 'react-icons/bs';
|
||||
import { FaCube } from 'react-icons/fa';
|
||||
import { MdModeEdit } from 'react-icons/md';
|
||||
|
||||
function Wizard() {
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const bgPrevButton = useColorModeValue('gray.100', 'gray.100');
|
||||
const iconColor = useColorModeValue('gray.300', 'gray.700');
|
||||
const [activeBullets, setActiveBullets] = useState({
|
||||
about: true,
|
||||
account: false,
|
||||
address: false,
|
||||
});
|
||||
|
||||
const [checkboxes, setCheckboxes] = useState({
|
||||
design: false,
|
||||
code: false,
|
||||
develop: false,
|
||||
});
|
||||
|
||||
const aboutTab = useRef();
|
||||
const accountTab = useRef();
|
||||
const addressTab = useRef();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction='column'
|
||||
minH='100vh'
|
||||
align='center'
|
||||
pt={{ sm: '125px', lg: '75px' }}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
textAlign='center'
|
||||
mb={{ sm: '25px', md: '45px' }}
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize={{ sm: '2xl', md: '3xl', lg: '4xl' }}
|
||||
fontWeight='bold'
|
||||
mb='8px'
|
||||
>
|
||||
Build your profile
|
||||
</Text>
|
||||
<Text
|
||||
color='gray.400'
|
||||
fontWeight='normal'
|
||||
fontSize={{ sm: 'sm', md: 'lg' }}
|
||||
>
|
||||
This information will let us know more about you.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Tabs variant='unstyled' mt='24px' display='flex' flexDirection='column'>
|
||||
<TabList
|
||||
display='flex'
|
||||
align='center'
|
||||
alignSelf='center'
|
||||
justifySelf='center'
|
||||
>
|
||||
<Tab
|
||||
ref={aboutTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '120px', md: '250px', lg: '300px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
about: true,
|
||||
account: false,
|
||||
address: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
position='relative'
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: '120px', md: '250px', lg: '300px' },
|
||||
height: '3px',
|
||||
bg: activeBullets.account ? 'white' : 'blue.300',
|
||||
left: { sm: '12px', md: '30px' },
|
||||
top: {
|
||||
sm: activeBullets.about ? '6px' : '4px',
|
||||
md: null,
|
||||
},
|
||||
position: 'absolute',
|
||||
bottom: activeBullets.about ? '40px' : '38px',
|
||||
|
||||
transition: 'all .3s ease',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.about ? 'white' : 'blue.300'}
|
||||
w={activeBullets.about ? '16px' : '12px'}
|
||||
h={activeBullets.about ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.about ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.about ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
About
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={accountTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '120px', md: '250px', lg: '300px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
about: true,
|
||||
account: true,
|
||||
address: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
position='relative'
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: '120px', md: '250px', lg: '300px' },
|
||||
height: '3px',
|
||||
bg: activeBullets.address ? 'white' : 'blue.300',
|
||||
left: { sm: '12px', md: '32px' },
|
||||
top: {
|
||||
sm: activeBullets.account ? '6px' : '4px',
|
||||
md: null,
|
||||
},
|
||||
position: 'absolute',
|
||||
bottom: activeBullets.account ? '40px' : '38px',
|
||||
|
||||
transition: 'all .3s ease',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.account ? 'white' : 'blue.300'}
|
||||
w={activeBullets.account ? '16px' : '12px'}
|
||||
h={activeBullets.account ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.account ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.account ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
Account
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={addressTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '120px', md: '250px', lg: '300px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
about: true,
|
||||
account: true,
|
||||
address: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
position='relative'
|
||||
>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.address ? 'white' : 'blue.300'}
|
||||
w={activeBullets.address ? '16px' : '12px'}
|
||||
h={activeBullets.address ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.address ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.address ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
Address
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels mt='24px' maxW={{ md: '90%', lg: '100%' }} mx='auto'>
|
||||
<TabPanel w={{ sm: '330px', md: '700px', lg: '850px' }} mx='auto'>
|
||||
<Card>
|
||||
<CardHeader mb='40px'>
|
||||
<Flex
|
||||
direction='column'
|
||||
align='center'
|
||||
justify='center'
|
||||
textAlign='center'
|
||||
w='80%'
|
||||
mx='auto'
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='lg'
|
||||
fontWeight='bold'
|
||||
mb='4px'
|
||||
>
|
||||
Let's start with the basic information
|
||||
</Text>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
|
||||
Let us know your name and email address. Use an address you
|
||||
don't mind other users contacting you at
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
w='100%'
|
||||
mb='24px'
|
||||
>
|
||||
<Box
|
||||
position='relative'
|
||||
minW={{ sm: '110px', xl: '150px' }}
|
||||
h={{ sm: '110px', xl: '150px' }}
|
||||
mx={{ sm: 'auto', md: '40px', xl: '85px' }}
|
||||
mb={{ sm: '25px' }}
|
||||
>
|
||||
<Avatar
|
||||
src={avatar4}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='12px'
|
||||
/>
|
||||
<IconBox
|
||||
bg='#fff'
|
||||
h='35px'
|
||||
w='35px'
|
||||
boxShadow='0px 3.5px 5.5px rgba(0, 0, 0, 0.06)'
|
||||
position='absolute'
|
||||
right='-10px'
|
||||
bottom='-10px'
|
||||
cursor='pointer'
|
||||
>
|
||||
<Icon as={MdModeEdit} w='15px' h='15px' color='#333' />
|
||||
</IconBox>
|
||||
</Box>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontSize='xs'
|
||||
fontWeight='bold'
|
||||
>
|
||||
First Name
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Michael'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontSize='xs'
|
||||
fontWeight='bold'
|
||||
>
|
||||
Last Name
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Jackson'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontSize='xs'
|
||||
fontWeight='bold'
|
||||
>
|
||||
Email Address
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. example@address.com'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Button
|
||||
variant='dark'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w={{ sm: '75px', lg: '100px' }}
|
||||
h='35px'
|
||||
onClick={() => accountTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
NEXT
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel w={{ sm: '330px', md: '700px', lg: '850px' }} mx='auto'>
|
||||
<Card>
|
||||
<CardHeader mb='40px'>
|
||||
<Flex
|
||||
direction='column'
|
||||
align='center'
|
||||
justify='center'
|
||||
textAlign='center'
|
||||
w='80%'
|
||||
mx='auto'
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='lg'
|
||||
fontWeight='bold'
|
||||
mb='4px'
|
||||
>
|
||||
What are you doing? (checkboxes)
|
||||
</Text>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
|
||||
Give us more details about you. What do you enjoy doing in
|
||||
your spare time?
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Stack
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
spacing={{ sm: '20px', lg: '35px' }}
|
||||
alignSelf='center'
|
||||
justifySelf='center'
|
||||
mb='24px'
|
||||
>
|
||||
<Flex direction='column' align='center'>
|
||||
<FormLabel w='150px' h='150px' cursor='pointer' mb='16px'>
|
||||
<Flex
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
justify='center'
|
||||
transition='.5s all ease'
|
||||
border={
|
||||
checkboxes.design ? 'none' : '1px solid lightgray'
|
||||
}
|
||||
align='center'
|
||||
bg={checkboxes.design ? 'blue.500' : '#fff'}
|
||||
_hover={{ opacity: '0.8' }}
|
||||
>
|
||||
<Checkbox
|
||||
onChange={() =>
|
||||
setCheckboxes((prevCheckboxes) => {
|
||||
return {
|
||||
...prevCheckboxes,
|
||||
design: !prevCheckboxes.design,
|
||||
};
|
||||
})
|
||||
}
|
||||
display='none'
|
||||
/>
|
||||
<Icon
|
||||
as={AiFillSetting}
|
||||
w='54px'
|
||||
h='54px'
|
||||
color={checkboxes.design ? '#fff' : iconColor}
|
||||
/>
|
||||
</Flex>
|
||||
</FormLabel>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='md'>
|
||||
Design
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' align='center'>
|
||||
<FormLabel w='150px' h='150px' cursor='pointer' mb='16px'>
|
||||
<Flex
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
justify='center'
|
||||
transition='.5s all ease'
|
||||
border={
|
||||
checkboxes.code ? 'none' : '1px solid lightgray'
|
||||
}
|
||||
align='center'
|
||||
bg={checkboxes.code ? 'blue.500' : '#fff'}
|
||||
_hover={{ opacity: '0.8' }}
|
||||
>
|
||||
<Checkbox
|
||||
onChange={() =>
|
||||
setCheckboxes((prevCheckboxes) => {
|
||||
return {
|
||||
...prevCheckboxes,
|
||||
code: !prevCheckboxes.code,
|
||||
};
|
||||
})
|
||||
}
|
||||
display='none'
|
||||
/>
|
||||
<Icon
|
||||
as={FaCube}
|
||||
w='54px'
|
||||
h='54px'
|
||||
color={checkboxes.code ? '#fff' : iconColor}
|
||||
/>
|
||||
</Flex>
|
||||
</FormLabel>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='md'>
|
||||
Code
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' align='center'>
|
||||
<FormLabel w='150px' h='150px' cursor='pointer' mb='16px'>
|
||||
<Flex
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
justify='center'
|
||||
transition='.5s all ease'
|
||||
border={
|
||||
checkboxes.develop ? 'none' : '1px solid lightgray'
|
||||
}
|
||||
align='center'
|
||||
bg={checkboxes.develop ? 'blue.500' : '#fff'}
|
||||
_hover={{ opacity: '0.8' }}
|
||||
>
|
||||
<Checkbox
|
||||
onChange={() =>
|
||||
setCheckboxes((prevCheckboxes) => {
|
||||
return {
|
||||
...prevCheckboxes,
|
||||
develop: !prevCheckboxes.develop,
|
||||
};
|
||||
})
|
||||
}
|
||||
display='none'
|
||||
/>
|
||||
<Icon
|
||||
as={RocketIcon}
|
||||
w='54px'
|
||||
h='54px'
|
||||
color={checkboxes.develop ? '#fff' : iconColor}
|
||||
/>
|
||||
</Flex>
|
||||
</FormLabel>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='md'>
|
||||
Develop
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
|
||||
<Flex justify='space-between'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg={bgPrevButton}
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w={{ sm: '75px', lg: '100px' }}
|
||||
h='35px'
|
||||
onClick={() => aboutTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
|
||||
PREV
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant='dark'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w={{ sm: '75px', lg: '100px' }}
|
||||
h='35px'
|
||||
onClick={() => addressTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
NEXT
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel w={{ sm: '330px', md: '700px', lg: '850px' }} mx='auto'>
|
||||
<Card>
|
||||
<CardHeader mb='40px'>
|
||||
<Flex
|
||||
direction='column'
|
||||
align='center'
|
||||
justify='center'
|
||||
textAlign='center'
|
||||
w='80%'
|
||||
mx='auto'
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='lg'
|
||||
fontWeight='bold'
|
||||
mb='4px'
|
||||
>
|
||||
Are you living in a nice area?
|
||||
</Text>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
|
||||
One thing I love about the later sunsets is the chance to go
|
||||
for a walk through the neighborhood woods before dinner
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Stack direction='column' spacing='20px'>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='xs'
|
||||
>
|
||||
Address 1
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Street 120'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='xs'
|
||||
>
|
||||
Address 2
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Street 220'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<Grid
|
||||
templateColumns={{ sm: '1fr 1fr', lg: '2fr 1fr 1fr' }}
|
||||
gap='30px'
|
||||
>
|
||||
<FormControl gridColumn={{ sm: '1 / 3', lg: 'auto' }}>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='xs'
|
||||
>
|
||||
City
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Tokyo'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='xs'
|
||||
>
|
||||
State
|
||||
</FormLabel>
|
||||
<Input variant='main' placeholder='...' fontSize='xs' />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='xs'
|
||||
>
|
||||
ZIP
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='7 letters'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Flex justify='space-between'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg={bgPrevButton}
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w={{ sm: '75px', lg: '100px' }}
|
||||
h='35px'
|
||||
onClick={() => accountTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
|
||||
PREV
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant='dark'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w={{ sm: '75px', lg: '100px' }}
|
||||
h='35px'
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
SEND
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Wizard;
|
||||
@@ -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;
|
||||
@@ -1,433 +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 from "react";
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Spacer,
|
||||
Stack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
LightMode,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import productImage1 from "assets/img/product-page-1.png";
|
||||
import { CgShapeCircle } from "react-icons/cg";
|
||||
import { FaPencilAlt } from "react-icons/fa";
|
||||
import { MastercardIcon } from "components/Icons/Icons";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card.js";
|
||||
import CardBody from "components/Card/CardBody.js";
|
||||
import CardHeader from "components/Card/CardHeader.js";
|
||||
import IconBox from "components/Icons/IconBox";
|
||||
import { HSeparator } from "components/Separator/Separator";
|
||||
|
||||
function OrderDetails() {
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const borderColor = useColorModeValue("#dee2e6", "transparent");
|
||||
const bgPayment = useColorModeValue("transparent", "navy.900");
|
||||
const bgColor = useColorModeValue("#F8F9FA", "navy.900");
|
||||
const nameColor = useColorModeValue("gray.500", "white");
|
||||
|
||||
return (
|
||||
<Flex pt={{ sm: "125px", lg: "95px" }} justify="center" mx="auto" mb="50px">
|
||||
<Card maxW={{ lg: "800px" }} pt="10px" pb="50px">
|
||||
<CardHeader>
|
||||
<Flex direction="column" w="100%">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold" mb="22px">
|
||||
Order Details
|
||||
</Text>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
Order no.{" "}
|
||||
<Text as="span" color="blue.500" fontWeight="bold">
|
||||
241342
|
||||
</Text>{" "}
|
||||
from{" "}
|
||||
<Text as="span" color={textColor} fontWeight="bold">
|
||||
23.02.2022
|
||||
</Text>
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
Code:{" "}
|
||||
<Text as="span" color={textColor} fontWeight="bold">
|
||||
KF332
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Button
|
||||
bg={useColorModeValue("#fff", "blue.500")}
|
||||
border={useColorModeValue("1px solid #E2E8F0", "unset")}
|
||||
variant={useColorModeValue("", "dark")}
|
||||
w="125px"
|
||||
h="35px"
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
>
|
||||
INVOICE
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<HSeparator my="22px" />
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
align="center"
|
||||
>
|
||||
<Flex align="center">
|
||||
<Box
|
||||
minW="110px"
|
||||
h="110px"
|
||||
me="30px"
|
||||
alignSelf={{ sm: "flex-start", md: "auto" }}
|
||||
>
|
||||
<Image
|
||||
src={productImage1}
|
||||
w="100%"
|
||||
h="100%"
|
||||
borderRadius="12px"
|
||||
/>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
Modern Luxury Sofa
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
mb="16px"
|
||||
>
|
||||
Order was delivered 2 days ago.
|
||||
</Text>
|
||||
<Badge
|
||||
colorScheme="green"
|
||||
w="95px"
|
||||
h="28px"
|
||||
borderRadius="8px"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
alignSelf={{ sm: "center", md: "auto" }}
|
||||
justifyContent="center"
|
||||
mb={{ sm: "6px", md: "0px" }}
|
||||
>
|
||||
DELIVERED
|
||||
</Badge>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column" align="flex-end">
|
||||
<LightMode>
|
||||
<Button
|
||||
variant="dark"
|
||||
w="125px"
|
||||
h="35px"
|
||||
color="#fff"
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
mb={{ sm: "12px", md: "36px" }}
|
||||
>
|
||||
CONTACT US
|
||||
</Button>
|
||||
</LightMode>
|
||||
<Text color="gray.400" fontSize="xs" fontWeight="normal">
|
||||
Do you like the product? Leave us a review here.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<HSeparator my="22px" />
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: "1fr",
|
||||
md: "1fr 1fr",
|
||||
lg: "1fr 1.7fr 1fr",
|
||||
}}
|
||||
gap={{ sm: "24px", lg: "54px" }}
|
||||
>
|
||||
<Flex direction="column">
|
||||
<Text color={textColor} fontWeight="bold" mb="22px">
|
||||
Track Order
|
||||
</Text>
|
||||
<Flex alignItems="center" minH="70px" justifyContent="start">
|
||||
<Flex direction="column" align="center" h="100%" me="20px">
|
||||
<Icon
|
||||
as={CgShapeCircle}
|
||||
color="blue.500"
|
||||
h={"30px"}
|
||||
w={"30px"}
|
||||
zIndex="1"
|
||||
position="relative"
|
||||
/>
|
||||
<Box w="2px" bg="gray.200" h="100%"></Box>
|
||||
</Flex>
|
||||
<Flex direction="column" justifyContent="flex-start" h="100%">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Order received
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
mb="14px"
|
||||
>
|
||||
22 DEC 7:20 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex alignItems="center" minH="70px" justifyContent="start">
|
||||
<Flex direction="column" align="center" h="100%" me="20px">
|
||||
<Icon
|
||||
as={CgShapeCircle}
|
||||
color="blue.500"
|
||||
h={"30px"}
|
||||
w={"30px"}
|
||||
zIndex="1"
|
||||
position="relative"
|
||||
/>
|
||||
<Box w="2px" bg="gray.200" h="100%"></Box>
|
||||
</Flex>
|
||||
<Flex direction="column" justifyContent="flex-start" h="100%">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Generate order id #1832412
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
mb="14px"
|
||||
>
|
||||
22 DEC 7:21 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex alignItems="center" minH="70px" justifyContent="start">
|
||||
<Flex direction="column" align="center" h="100%" me="20px">
|
||||
<Icon
|
||||
as={CgShapeCircle}
|
||||
color="blue.500"
|
||||
h={"30px"}
|
||||
w={"30px"}
|
||||
zIndex="1"
|
||||
position="relative"
|
||||
/>
|
||||
<Box w="2px" bg="gray.200" h="100%"></Box>
|
||||
</Flex>
|
||||
<Flex direction="column" justifyContent="flex-start" h="100%">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Order transmited to courier
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
mb="14px"
|
||||
>
|
||||
22 DEC 8:10 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex alignItems="center" minH="70px" justifyContent="start">
|
||||
<Flex direction="column" align="center" h="100%" me="20px">
|
||||
<Icon
|
||||
as={CgShapeCircle}
|
||||
color="blue.500"
|
||||
h={"30px"}
|
||||
w={"30px"}
|
||||
zIndex="1"
|
||||
position="relative"
|
||||
/>
|
||||
<Box w="2px" bg="gray.200" h="100%"></Box>
|
||||
</Flex>
|
||||
<Flex direction="column" justifyContent="flex-start" h="100%">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Order delivered
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
mb="14px"
|
||||
>
|
||||
22 DEC 4:54 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Flex direction="column" mb="32px">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
mb="22px"
|
||||
>
|
||||
Payment Details
|
||||
</Text>
|
||||
<Flex
|
||||
p="22px"
|
||||
bg="transparent"
|
||||
borderRadius="8px"
|
||||
width="100%"
|
||||
bg={bgPayment}
|
||||
border="1px solid"
|
||||
borderColor={borderColor}
|
||||
align="center"
|
||||
>
|
||||
<IconBox me="10px" w="25px" h="22px">
|
||||
<MastercardIcon w="100%" h="100%" />
|
||||
</IconBox>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
7812 2139 0823 XXXX
|
||||
</Text>
|
||||
<Spacer />
|
||||
<Button
|
||||
p="0px"
|
||||
bg="transparent"
|
||||
w="16px"
|
||||
h="16px"
|
||||
variant="no-effects"
|
||||
>
|
||||
<Icon as={FaPencilAlt} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
mb="22px"
|
||||
>
|
||||
Billing Information
|
||||
</Text>
|
||||
<Box p="24px" bg={bgColor} borderRadius="12px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
color={nameColor}
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Oliver Liam
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Company Name:{" "}
|
||||
<Text as="span" color="gray.500" fontWeight="bold">
|
||||
Viking Burrito
|
||||
</Text>
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Email Address:{" "}
|
||||
<Text as="span" color="gray.500" fontWeight="bold">
|
||||
oliver@burrito.com
|
||||
</Text>
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
>
|
||||
VAT Number:{" "}
|
||||
<Text as="span" color="gray.500" fontWeight="bold">
|
||||
FRB1235476
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column" gridColumn={{ md: "1 / 3", lg: "auto" }}>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
mb="22px"
|
||||
>
|
||||
Order Summary
|
||||
</Text>
|
||||
<Stack direction="column" spacing="12px">
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
Product Price:
|
||||
</Text>
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
$90
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
Delivery:
|
||||
</Text>
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
$15
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" justify="space-between">
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
Taxes:
|
||||
</Text>
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
$1.95
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Flex align="center" justify="space-between" mt="24px">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="normal">
|
||||
Total:
|
||||
</Text>
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold">
|
||||
$105.95
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Grid>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderDetails;
|
||||
@@ -1,119 +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 from 'react';
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuDivider,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Stack,
|
||||
LightMode,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import { IoIosArrowDown } from 'react-icons/io';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card';
|
||||
import CardBody from 'components/Card/CardBody';
|
||||
import SearchTable2 from 'components/Tables/SearchTable2';
|
||||
import { columnsData2 } from 'variables/columnsData';
|
||||
import tableData2 from 'variables/tableData2.json';
|
||||
|
||||
function OrderList() {
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '125px', md: '75px' }}>
|
||||
<Flex
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
justify='space-between'
|
||||
align='center'
|
||||
w='100%'
|
||||
mb='24px'
|
||||
>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg={useColorModeValue('gray.700', 'white')}
|
||||
w='125px'
|
||||
h='35px'
|
||||
color={useColorModeValue('white', 'gray.700')}
|
||||
fontSize='xs'
|
||||
fontWeight='bold'
|
||||
alignSelf={{ sm: 'flex-start', lg: null }}
|
||||
mb={{ sm: '12px', md: '0px' }}
|
||||
>
|
||||
NEW ORDER
|
||||
</Button>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='10px'
|
||||
alignSelf={{ sm: 'flex-start', lg: 'auto' }}
|
||||
>
|
||||
<Menu>
|
||||
<LightMode>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
variant='light'
|
||||
rightIcon={<IoIosArrowDown />}
|
||||
color='gray.700'
|
||||
w='125px'
|
||||
h='35px'
|
||||
fontSize='xs'
|
||||
>
|
||||
FILTERS
|
||||
</MenuButton>
|
||||
</LightMode>
|
||||
<MenuList bg={useColorModeValue('white', 'navy.800')}>
|
||||
<MenuItem color='gray.500'>Status: Paid</MenuItem>
|
||||
<MenuItem color='gray.500'>Status: Refunded</MenuItem>
|
||||
<MenuItem color='gray.500'>Status: Canceled</MenuItem>
|
||||
<MenuDivider />
|
||||
<MenuItem color='red.300'>Remove filter</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<LightMode>
|
||||
<Button
|
||||
variant='light'
|
||||
bg={useColorModeValue('white', 'blue.500')}
|
||||
color={useColorModeValue('gray.700', 'white')}
|
||||
_hover={useColorModeValue({}, { bg: 'blue.600' })}
|
||||
_active={useColorModeValue({}, { bg: 'blue.400' })}
|
||||
_focus={useColorModeValue({}, { bg: 'blue.500' })}
|
||||
w='125px'
|
||||
h='35px'
|
||||
fontSize='xs'
|
||||
fontWeight='bold'
|
||||
>
|
||||
EXPORT CSV
|
||||
</Button>
|
||||
</LightMode>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Card px='0px'>
|
||||
<CardBody>
|
||||
<SearchTable2 tableData={tableData2} columnsData={columnsData2} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderList;
|
||||
@@ -1,427 +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, { useState } from 'react';
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Grid,
|
||||
Image,
|
||||
Input,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Stack,
|
||||
Tag,
|
||||
TagCloseButton,
|
||||
TagLabel,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import productImage1 from 'assets/img/product-page-1.png';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card';
|
||||
import CardBody from 'components/Card/CardBody';
|
||||
import CardHeader from 'components/Card/CardHeader';
|
||||
import Editor from 'components/Editor/Editor';
|
||||
|
||||
function EditProduct() {
|
||||
const [skills, setSkills] = useState([
|
||||
{
|
||||
name: 'chakra-ui',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'react',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'javascript',
|
||||
id: 3,
|
||||
},
|
||||
]);
|
||||
|
||||
const keyPress = (e) => {
|
||||
if (e.keyCode === 13) {
|
||||
setSkills([
|
||||
...skills,
|
||||
{
|
||||
name: e.target.value,
|
||||
id: skills.length === 0 ? 1 : skills[skills.length - 1].id + 1,
|
||||
},
|
||||
]);
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
||||
<Flex
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
justify='space-between'
|
||||
align={{ lg: 'center' }}
|
||||
w='100%'
|
||||
mb={{ sm: '24px', lg: '55px' }}
|
||||
>
|
||||
<Flex direction='column'>
|
||||
<Text
|
||||
color='white'
|
||||
ms='12px'
|
||||
fontSize={{ sm: 'xl', md: '2xl' }}
|
||||
fontWeight='bold'
|
||||
mb='10px'
|
||||
>
|
||||
Make the changes below
|
||||
</Text>
|
||||
<Text
|
||||
fontSize='sm'
|
||||
color='white'
|
||||
ms='12px'
|
||||
fontWeight='normal'
|
||||
mb={{ sm: '16px', lg: '0px' }}
|
||||
>
|
||||
We’re constantly trying to express ourselves and actualize our
|
||||
dreams. If you have the opportunity to play.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '1fr 1.7fr' }} gap='24px'>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card>
|
||||
<CardHeader mb='42px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Product Image
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Box
|
||||
w={{ sm: '280px', md: '670px', lg: '600px' }}
|
||||
h={{ sm: '185px', md: '450px', lg: '400px' }}
|
||||
maxW={{ sm: '280px', md: '670px', lg: '600px' }}
|
||||
maxH={{ sm: '185px', md: '450px', lg: '400px' }}
|
||||
mb='24px'
|
||||
>
|
||||
<Image src={productImage1} w='100%' h='100%' />
|
||||
</Box>
|
||||
<Flex mt='40px'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg='gray.700'
|
||||
w={{ sm: '75px', md: '100px' }}
|
||||
h='35px'
|
||||
me='12px'
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
EDIT
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg='gray.100'
|
||||
w={{ sm: '75px', md: '100px' }}
|
||||
h='35px'
|
||||
>
|
||||
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
|
||||
REMOVE
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader mb='32px'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Socials
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Shopify Handle
|
||||
</FormLabel>
|
||||
<Input variant='main' placeholder='@Argon' fontSize='xs' />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Facebook Account
|
||||
</FormLabel>
|
||||
<Input variant='main' placeholder='https://' fontSize='xs' />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Instagram Account
|
||||
</FormLabel>
|
||||
<Input variant='main' placeholder='https://' fontSize='xs' />
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Stack>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card>
|
||||
<CardHeader mb='22px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Product Information
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Product Name
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Modern Luxury Sofa'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Weight
|
||||
</FormLabel>
|
||||
<Input variant='main' placeholder='eg. 42' fontSize='xs' />
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<Stack direction={{ sm: 'column', lg: 'row' }} spacing='30px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Description
|
||||
</FormLabel>
|
||||
<Editor />
|
||||
</FormControl>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Category
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
fontSize='xs'
|
||||
defaultValue={0}
|
||||
color='gray.400'
|
||||
>
|
||||
<option>Electronics</option>
|
||||
<option>Clothing</option>
|
||||
<option>Real Estate</option>
|
||||
<option>Others</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Color
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
fontSize='xs'
|
||||
defaultValue={0}
|
||||
color='gray.400'
|
||||
>
|
||||
<option>Red</option>
|
||||
<option>Blue</option>
|
||||
<option>Black</option>
|
||||
<option>White</option>
|
||||
<option>Pink</option>
|
||||
<option>Orange</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Collection
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Summer'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Quantity
|
||||
</FormLabel>
|
||||
<NumberInput
|
||||
variant='main'
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
max={20}
|
||||
color='gray.400'
|
||||
fontSize='xs'
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader mb='32px'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Pricing
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<Stack direction='row' spacing='24px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Price
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. $99.99'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Currency
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
fontSize='xs'
|
||||
defaultValue={0}
|
||||
color='gray.400'
|
||||
>
|
||||
<option>EUR</option>
|
||||
<option>CNY</option>
|
||||
<option>RON</option>
|
||||
<option>GBP</option>
|
||||
<option>INR</option>
|
||||
<option>CZH</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
SKU
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='71283476591'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<FormControl>
|
||||
<FormLabel fontWeight='bold' fontSize='xs' mb='10px'>
|
||||
Tags
|
||||
</FormLabel>
|
||||
<Flex
|
||||
direction='row'
|
||||
p='12px'
|
||||
wrap='wrap'
|
||||
bg={useColorModeValue('none', 'navy.900')}
|
||||
border={useColorModeValue('1px solid #E2E8F0', 'none')}
|
||||
borderRadius='8px'
|
||||
_focus={{ borderColor: 'teal.300' }}
|
||||
minH='40px'
|
||||
cursor='text'
|
||||
>
|
||||
{skills.map((skill, index) => {
|
||||
return (
|
||||
<Tag
|
||||
fontSize='xs'
|
||||
h='25px'
|
||||
mb='6px'
|
||||
me='6px'
|
||||
key={skill.id}
|
||||
borderRadius='12px'
|
||||
variant='solid'
|
||||
bg='gray.700'
|
||||
>
|
||||
<TagLabel w='100%'>{skill.name}</TagLabel>
|
||||
<TagCloseButton
|
||||
justifySelf='flex-end'
|
||||
color='white'
|
||||
onClick={() =>
|
||||
setSkills([
|
||||
...skills.filter(
|
||||
(element) => element.id !== skill.id
|
||||
),
|
||||
])
|
||||
}
|
||||
/>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
<Input
|
||||
variant='main'
|
||||
border='none'
|
||||
_focus={{}}
|
||||
p='0px'
|
||||
onKeyDown={(e) => keyPress(e)}
|
||||
fontSize='xs'
|
||||
/>
|
||||
</Flex>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='22px'>
|
||||
Product Images
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex
|
||||
align='center'
|
||||
justify='center'
|
||||
bg={useColorModeValue('none', 'navy.900')}
|
||||
border={useColorModeValue('1px dashed #E2E8F0', 'none')}
|
||||
borderRadius='15px'
|
||||
w='100%'
|
||||
minH='130px'
|
||||
cursor='pointer'
|
||||
>
|
||||
<Button variant='no-effects'>
|
||||
<Text color='gray.400' fontWeight='normal'>
|
||||
Drop files here to upload
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditProduct;
|
||||
@@ -1,885 +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, useRef, useState } from 'react';
|
||||
// Chakra imports
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Icon,
|
||||
Input,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Stack,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Tag,
|
||||
TagCloseButton,
|
||||
TagLabel,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
LightMode,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import avatar5 from 'assets/img/avatars/avatar5.png';
|
||||
import { BsCircleFill } from 'react-icons/bs';
|
||||
import { FaCube, FaPenFancy } from 'react-icons/fa';
|
||||
import { IoDocumentsSharp } from 'react-icons/io5';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card';
|
||||
import CardBody from 'components/Card/CardBody';
|
||||
import CardHeader from 'components/Card/CardHeader';
|
||||
import Editor from 'components/Editor/Editor';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
|
||||
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 NewProduct() {
|
||||
const [skills, setSkills] = useState([
|
||||
{
|
||||
name: 'chakra-ui',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'react',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'javascript',
|
||||
id: 3,
|
||||
},
|
||||
]);
|
||||
|
||||
const [state, dispatch] = useReducer(reducer, {
|
||||
overview: true,
|
||||
teams: false,
|
||||
projects: false,
|
||||
});
|
||||
|
||||
const [activeBullets, setActiveBullets] = useState({
|
||||
productInfo: true,
|
||||
media: false,
|
||||
socials: false,
|
||||
pricing: false,
|
||||
});
|
||||
|
||||
const productInfoTab = useRef();
|
||||
const mediaTab = useRef();
|
||||
const socialsTab = useRef();
|
||||
const pricingTab = useRef();
|
||||
|
||||
const { getRootProps, getInputProps } = useDropzone();
|
||||
|
||||
const keyPress = (e) => {
|
||||
if (e.keyCode === 13) {
|
||||
setSkills([
|
||||
...skills,
|
||||
{
|
||||
name: e.target.value,
|
||||
id: skills.length === 0 ? 1 : skills[skills.length - 1].id + 1,
|
||||
},
|
||||
]);
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
// 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 bgPrevButton = 'gray.100';
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ base: '120px', md: '75px', lg: '100px' }}>
|
||||
<Flex
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
mb='24px'
|
||||
maxH='330px'
|
||||
justifyContent={{ sm: 'center', md: 'space-between' }}
|
||||
align='center'
|
||||
backdropFilter='blur(21px)'
|
||||
boxShadow='0px 2px 5.5px rgba(0, 0, 0, 0.02)'
|
||||
border='1.5px solid'
|
||||
borderColor={borderProfileColor}
|
||||
bg={bgProfile}
|
||||
p='24px'
|
||||
borderRadius='20px'
|
||||
>
|
||||
<Flex
|
||||
align='center'
|
||||
mb={{ sm: '10px', md: '0px' }}
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
w={{ sm: '100%' }}
|
||||
textAlign={{ sm: 'center', md: 'start' }}
|
||||
>
|
||||
<Avatar
|
||||
me={{ md: '22px' }}
|
||||
src={avatar5}
|
||||
w='80px'
|
||||
h='80px'
|
||||
borderRadius='15px'
|
||||
/>
|
||||
<Flex direction='column' maxWidth='100%' my={{ sm: '14px' }}>
|
||||
<Text
|
||||
fontSize={{ sm: 'lg', lg: 'xl' }}
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
ms={{ sm: '8px', md: '0px' }}
|
||||
>
|
||||
Alec Thompson
|
||||
</Text>
|
||||
<Text fontSize={{ sm: 'sm', md: 'md' }} color='gray.400'>
|
||||
alec@simmmple.com
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
w={{ sm: '100%', md: '50%', lg: 'auto' }}
|
||||
>
|
||||
<Button p='0px' bg='transparent' variant='no-effects'>
|
||||
<Flex
|
||||
align='center'
|
||||
w={{ sm: '100%', lg: '135px' }}
|
||||
bg={
|
||||
state.overview
|
||||
? colorMode === 'dark'
|
||||
? 'navy.900'
|
||||
: '#fff'
|
||||
: null
|
||||
}
|
||||
borderRadius='8px'
|
||||
justifyContent='center'
|
||||
py='10px'
|
||||
boxShadow={
|
||||
state.overview ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null
|
||||
}
|
||||
cursor='pointer'
|
||||
transition='all .5s ease'
|
||||
onClick={() =>
|
||||
dispatch({ type: 'SWITCH_ACTIVE', payload: 'overview' })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={FaCube} me='6px' />
|
||||
<Text fontSize='xs' color={textColor} fontWeight='bold'>
|
||||
OVERVIEW
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p='0px' bg='transparent' variant='no-effects'>
|
||||
<Flex
|
||||
align='center'
|
||||
w={{ lg: '135px' }}
|
||||
borderRadius='8px'
|
||||
justifyContent='center'
|
||||
py='10px'
|
||||
mx={{ lg: '1rem' }}
|
||||
cursor='pointer'
|
||||
boxShadow={
|
||||
state.teams ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null
|
||||
}
|
||||
bg={
|
||||
state.teams
|
||||
? colorMode === 'dark'
|
||||
? 'navy.900'
|
||||
: '#fff'
|
||||
: null
|
||||
}
|
||||
transition='all .5s ease'
|
||||
onClick={() =>
|
||||
dispatch({ type: 'SWITCH_ACTIVE', payload: 'teams' })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={IoDocumentsSharp} me='6px' />
|
||||
<Text fontSize='xs' color={textColor} fontWeight='bold'>
|
||||
TEAMS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p='0px' bg='transparent' variant='no-effects'>
|
||||
<Flex
|
||||
align='center'
|
||||
w={{ lg: '135px' }}
|
||||
borderRadius='8px'
|
||||
justifyContent='center'
|
||||
py='10px'
|
||||
cursor='pointer'
|
||||
boxShadow={
|
||||
state.projects ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null
|
||||
}
|
||||
bg={
|
||||
state.projects
|
||||
? colorMode === 'dark'
|
||||
? 'navy.900'
|
||||
: '#fff'
|
||||
: null
|
||||
}
|
||||
transition='all .5s ease'
|
||||
onClick={() =>
|
||||
dispatch({ type: 'SWITCH_ACTIVE', payload: 'projects' })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={FaPenFancy} me='6px' />
|
||||
<Text fontSize='xs' color={textColor} fontWeight='bold'>
|
||||
PROJECTS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Tabs variant='unstyled' mt='24px' alignSelf='center'>
|
||||
<TabList display='flex' align='center'>
|
||||
<Tab
|
||||
ref={productInfoTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '80px', md: '200px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
productInfo: true,
|
||||
media: false,
|
||||
socials: false,
|
||||
pricing: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
position='relative'
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: '80px', md: '200px' },
|
||||
height: '3px',
|
||||
bg: activeBullets.media ? 'white' : 'blue.300',
|
||||
left: { sm: '12px', md: '52px' },
|
||||
top: {
|
||||
sm: activeBullets.productInfo ? '6px' : '4px',
|
||||
md: null,
|
||||
},
|
||||
position: 'absolute',
|
||||
bottom: activeBullets.productInfo ? '40px' : '38px',
|
||||
|
||||
transition: 'all .3s ease',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.productInfo ? 'white' : 'blue.300'}
|
||||
w={activeBullets.productInfo ? '16px' : '12px'}
|
||||
h={activeBullets.productInfo ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.productInfo ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.productInfo ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
1. Product Info
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={mediaTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '80px', md: '200px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
productInfo: true,
|
||||
media: true,
|
||||
socials: false,
|
||||
pricing: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
position='relative'
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: '80px', md: '200px' },
|
||||
height: '3px',
|
||||
bg: activeBullets.socials ? 'white' : 'blue.300',
|
||||
left: { sm: '12px', md: '32px' },
|
||||
top: {
|
||||
sm: activeBullets.media ? '6px' : '4px',
|
||||
md: null,
|
||||
},
|
||||
position: 'absolute',
|
||||
bottom: activeBullets.media ? '40px' : '38px',
|
||||
|
||||
transition: 'all .3s ease',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.media ? 'white' : 'blue.300'}
|
||||
w={activeBullets.media ? '16px' : '12px'}
|
||||
h={activeBullets.media ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.media ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.media ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
2. Media
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={socialsTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '80px', md: '200px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
productInfo: true,
|
||||
media: true,
|
||||
socials: true,
|
||||
pricing: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
justify='center'
|
||||
align='center'
|
||||
position='relative'
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: '80px', md: '200px' },
|
||||
height: '3px',
|
||||
bg: activeBullets.pricing ? 'white' : 'blue.300',
|
||||
left: { sm: '12px', md: '32px' },
|
||||
top: {
|
||||
sm: activeBullets.socials ? '6px' : '4px',
|
||||
md: null,
|
||||
},
|
||||
position: 'absolute',
|
||||
bottom: activeBullets.socials ? '40px' : '38px',
|
||||
|
||||
transition: 'all .3s ease',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.socials ? 'white' : 'blue.300'}
|
||||
w={activeBullets.socials ? '16px' : '12px'}
|
||||
h={activeBullets.socials ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.socials ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.socials ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
3. Socials
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={pricingTab}
|
||||
_focus={{}}
|
||||
w={{ sm: '80px', md: '200px' }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
productInfo: true,
|
||||
media: true,
|
||||
socials: true,
|
||||
pricing: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex direction='column' justify='center' align='center'>
|
||||
<Icon
|
||||
zIndex='1'
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.pricing ? 'white' : 'blue.300'}
|
||||
w={activeBullets.pricing ? '16px' : '12px'}
|
||||
h={activeBullets.pricing ? '16px' : '12px'}
|
||||
mb='8px'
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.pricing ? 'white' : 'gray.300'}
|
||||
fontWeight={activeBullets.pricing ? 'bold' : 'normal'}
|
||||
display={{ sm: 'none', md: 'block' }}
|
||||
>
|
||||
4. Pricing
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels mt='24px' maxW={{ md: '90%', lg: '100%' }} mx='auto'>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb='22px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Product Information
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Product Name
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Modern Luxury Sofa'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Weight
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. 42'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<Stack direction={{ sm: 'column', lg: 'row' }} spacing='30px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Description
|
||||
</FormLabel>
|
||||
<Editor />
|
||||
</FormControl>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Category
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
fontSize='xs'
|
||||
placeholder='Furniture'
|
||||
color='gray.400'
|
||||
defaultValue={0}
|
||||
>
|
||||
<option>Electronics</option>
|
||||
<option>Clothing</option>
|
||||
<option>Real Estate</option>
|
||||
<option>Others</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Color
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
fontSize='xs'
|
||||
placeholder='Green'
|
||||
color='gray.400'
|
||||
defaultValue={0}
|
||||
>
|
||||
<option>Red</option>
|
||||
<option>Blue</option>
|
||||
<option>Black</option>
|
||||
<option>White</option>
|
||||
<option>Pink</option>
|
||||
<option>Orange</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction={{ sm: 'column', md: 'row' }} spacing='30px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Collection
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. Summer'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Quantity
|
||||
</FormLabel>
|
||||
<NumberInput
|
||||
variant='main'
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
max={20}
|
||||
color='gray.400'
|
||||
>
|
||||
<NumberInputField fontSize='xs' />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<LightMode>
|
||||
<Button
|
||||
variant='dark'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
onClick={() => mediaTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
NEXT
|
||||
</Text>
|
||||
</Button>
|
||||
</LightMode>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb='40px'>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='xl'
|
||||
fontWeight='bold'
|
||||
mb='3px'
|
||||
>
|
||||
Media
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='sm'
|
||||
fontWeight='bold'
|
||||
mb='12px'
|
||||
>
|
||||
Product images
|
||||
</Text>
|
||||
<Flex
|
||||
align='center'
|
||||
justify='center'
|
||||
bg={useColorModeValue('none', 'navy.900')}
|
||||
border={useColorModeValue('1px dashed #E2E8F0', 'none')}
|
||||
w='100%'
|
||||
minH='130px'
|
||||
cursor='pointer'
|
||||
{...getRootProps({ className: 'dropzone' })}
|
||||
>
|
||||
<Input variant='main' {...getInputProps()} />
|
||||
<Button variant='no-effects'>
|
||||
<Text color='gray.400' fontWeight='normal'>
|
||||
Drop files here to upload
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justify='space-between'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg={bgPrevButton}
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
onClick={() => productInfoTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
|
||||
PREV
|
||||
</Text>
|
||||
</Button>
|
||||
<LightMode>
|
||||
<Button
|
||||
variant='DARK'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
onClick={() => socialsTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
NEXT
|
||||
</Text>
|
||||
</Button>
|
||||
</LightMode>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb='32px'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Socials
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Shopify Handle
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='@Argon'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Facebook Account
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='https://'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Instagram Account
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='https://'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<Flex justify='space-between'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg={bgPrevButton}
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
onClick={() => mediaTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
|
||||
PREV
|
||||
</Text>
|
||||
</Button>
|
||||
<LightMode>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg='dark'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
onClick={() => pricingTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
NEXT
|
||||
</Text>
|
||||
</Button>
|
||||
</LightMode>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel maxW='800px'>
|
||||
<Card>
|
||||
<CardHeader mb='32px'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Pricing
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Stack direction='column' spacing='20px' w='100%'>
|
||||
<Stack direction='row' spacing='24px'>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Price
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='eg. $99.99'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
Currency
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
fontSize='xs'
|
||||
placeholder='USD'
|
||||
color='gray.400'
|
||||
defaultValue={0}
|
||||
>
|
||||
<option>EUR</option>
|
||||
<option>CNY</option>
|
||||
<option>RON</option>
|
||||
<option>GBP</option>
|
||||
<option>INR</option>
|
||||
<option>CZH</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontSize='xs' fontWeight='bold' mb='10px'>
|
||||
SKU
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='71283476591'
|
||||
fontSize='xs'
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<FormControl>
|
||||
<FormLabel fontWeight='bold' fontSize='xs' mb='10px'>
|
||||
Tags
|
||||
</FormLabel>
|
||||
<Flex
|
||||
borderRadius='8px'
|
||||
direction='row'
|
||||
p='12px'
|
||||
wrap='wrap'
|
||||
bg={useColorModeValue('none', 'navy.900')}
|
||||
border={useColorModeValue('1px solid #E2E8F0', 'none')}
|
||||
_focus={{ borderColor: 'teal.300' }}
|
||||
minH='40px'
|
||||
cursor='text'
|
||||
>
|
||||
{skills.map((skill) => {
|
||||
return (
|
||||
<Tag
|
||||
fontSize='xs'
|
||||
h='25px'
|
||||
mb='6px'
|
||||
me='6px'
|
||||
key={skill.id}
|
||||
borderRadius='12px'
|
||||
variant='solid'
|
||||
bg='gray.700'
|
||||
>
|
||||
<TagLabel w='100%'>{skill.name}</TagLabel>
|
||||
<TagCloseButton
|
||||
justifySelf='flex-end'
|
||||
onClick={() =>
|
||||
setSkills([
|
||||
...skills.filter(
|
||||
(element) => element.id !== skill.id
|
||||
),
|
||||
])
|
||||
}
|
||||
/>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
<Input
|
||||
variant='main'
|
||||
border='none'
|
||||
_focus={{}}
|
||||
p='0px'
|
||||
onKeyDown={(e) => keyPress(e)}
|
||||
fontSize='xs'
|
||||
/>
|
||||
</Flex>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<Flex justify='space-between'>
|
||||
<Button
|
||||
variant='no-effects'
|
||||
bg={bgPrevButton}
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
onClick={() => socialsTab.current.click()}
|
||||
>
|
||||
<Text fontSize='xs' color='gray.700' fontWeight='bold'>
|
||||
PREV
|
||||
</Text>
|
||||
</Button>
|
||||
<LightMode>
|
||||
<Button
|
||||
variant='dark'
|
||||
alignSelf='flex-end'
|
||||
mt='24px'
|
||||
w='100px'
|
||||
h='35px'
|
||||
>
|
||||
<Text fontSize='xs' color='#fff' fontWeight='bold'>
|
||||
SEND
|
||||
</Text>
|
||||
</Button>
|
||||
</LightMode>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewProduct;
|
||||
@@ -1,597 +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 {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Icon,
|
||||
Image,
|
||||
ListItem,
|
||||
Progress,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
UnorderedList,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import productPage1 from 'assets/img/product-page-1.png';
|
||||
import productPage2 from 'assets/img/product-page-2.png';
|
||||
import productPage3 from 'assets/img/product-page-3.png';
|
||||
import productPage4 from 'assets/img/product-page-4.png';
|
||||
import productPage5 from 'assets/img/product-page-5.png';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card';
|
||||
import CardBody from 'components/Card/CardBody';
|
||||
import CardHeader from 'components/Card/CardHeader';
|
||||
import React, { useState } from 'react';
|
||||
import { BsStarFill, BsStarHalf } from 'react-icons/bs';
|
||||
|
||||
function ProductPage() {
|
||||
const [currentImage, setCurrentImage] = useState(productPage1);
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const starFill = useColorModeValue('gray.800', 'white');
|
||||
|
||||
return (
|
||||
<Card mt={{ sm: '125px', md: '75px' }}>
|
||||
<CardHeader mb='42px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Product Details
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
mb={{ sm: '42px', lg: '84px' }}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
me={{ lg: '70px', xl: '120px' }}
|
||||
mb={{ sm: '24px', lg: '0px' }}
|
||||
>
|
||||
<Box
|
||||
w={{ sm: '275px', md: '670px', lg: '450px', xl: '600px' }}
|
||||
h={{ sm: '200px', md: '500px', lg: '330px', xl: '500px' }}
|
||||
mb='26px'
|
||||
mx={{ sm: 'auto', lg: '0px' }}
|
||||
>
|
||||
<Image
|
||||
src={currentImage}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
/>
|
||||
</Box>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing={{ sm: '20px', md: '35px', lg: '20px' }}
|
||||
mx='auto'
|
||||
mb={{ sm: '24px', lg: '0px' }}
|
||||
>
|
||||
<Box
|
||||
w={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
h={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
>
|
||||
<Image
|
||||
src={productPage1}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
cursor='pointer'
|
||||
onClick={(e) => setCurrentImage(e.target.src)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
w={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
h={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
>
|
||||
<Image
|
||||
src={productPage3}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
cursor='pointer'
|
||||
onClick={(e) => setCurrentImage(e.target.src)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
w={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
h={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
>
|
||||
<Image
|
||||
src={productPage4}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
cursor='pointer'
|
||||
onClick={(e) => setCurrentImage(e.target.src)}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
w={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
h={{ sm: '36px', md: '90px', lg: '60px' }}
|
||||
>
|
||||
<Image
|
||||
src={productPage5}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='8px'
|
||||
cursor='pointer'
|
||||
onClick={(e) => setCurrentImage(e.target.src)}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize='3xl'
|
||||
fontWeight='bold'
|
||||
mb='12px'
|
||||
>
|
||||
Modern Luxury Sofa
|
||||
</Text>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='12px'
|
||||
color='orange.300'
|
||||
mb='30px'
|
||||
>
|
||||
<Icon as={BsStarFill} w='26px' h='26px' />
|
||||
<Icon as={BsStarFill} w='26px' h='26px' />
|
||||
<Icon as={BsStarFill} w='26px' h='26px' />
|
||||
<Icon as={BsStarFill} w='26px' h='26px' />
|
||||
<Icon as={BsStarHalf} w='26px' h='26px' />
|
||||
</Stack>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
|
||||
Price
|
||||
</Text>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='3xl'
|
||||
mb='12px'
|
||||
>
|
||||
$2,599.00
|
||||
</Text>
|
||||
<Badge
|
||||
colorScheme='green'
|
||||
w='95px'
|
||||
h='28px'
|
||||
mb='40px'
|
||||
borderRadius='8px'
|
||||
display='flex'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
>
|
||||
IN STOCK
|
||||
</Badge>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal' mb='8px'>
|
||||
Description
|
||||
</Text>
|
||||
<UnorderedList spacing='8px' mb='40px'>
|
||||
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
|
||||
The most beautiful curves of this swivel stool adds an elegant
|
||||
touch to any environment
|
||||
</ListItem>
|
||||
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
|
||||
Memory swivel seat returns to original seat position
|
||||
</ListItem>
|
||||
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
|
||||
Comfortable integrated layered chair seat cushion design
|
||||
</ListItem>
|
||||
<ListItem fontSize='md' color={textColor} fontWeight='normal'>
|
||||
Fully assembled! No assembly required
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Stack
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
spacing='24px'
|
||||
mb='40px'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel fontWeight='bold' fontSize='xs' color={textColor}>
|
||||
Frame Material
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
placeholder='Wood'
|
||||
fontSize='xs'
|
||||
cursor='pointer'
|
||||
color='gray.400'
|
||||
>
|
||||
<option>Aluminium</option>
|
||||
<option>Carbon</option>
|
||||
<option>Steel</option>
|
||||
<option>Brasil</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontWeight='bold' fontSize='xs' color={textColor}>
|
||||
Color
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
placeholder='White'
|
||||
fontSize='xs'
|
||||
cursor='pointer'
|
||||
color='gray.400'
|
||||
>
|
||||
<option>Blue</option>
|
||||
<option>Gray</option>
|
||||
<option>Pink</option>
|
||||
<option>Red</option>
|
||||
<option>Green</option>
|
||||
<option>Black</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel fontWeight='bold' fontSize='xs' color={textColor}>
|
||||
Quantity
|
||||
</FormLabel>
|
||||
<Select
|
||||
variant='main'
|
||||
placeholder='1'
|
||||
fontSize='xs'
|
||||
cursor='pointer'
|
||||
color='gray.400'
|
||||
maxW={{ lg: '75px' }}
|
||||
>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
<option>9</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<Button
|
||||
variant='dark'
|
||||
w={{ sm: '240px', md: '100%', lg: '240px' }}
|
||||
h='50px'
|
||||
mx={{ sm: 'auto', md: '0px' }}
|
||||
color='#fff'
|
||||
fontSize='xs'
|
||||
fontWeight='bold'
|
||||
>
|
||||
ADD TO CART
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box w='100%' overflowX={{ sm: 'scroll', lg: 'hidden' }}>
|
||||
<Table variant='simple' w='100%'>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th color='gray.400' fontSize='xs'>
|
||||
Name
|
||||
</Th>
|
||||
<Th color='gray.400' fontSize='xs'>
|
||||
Price
|
||||
</Th>
|
||||
<Th color='gray.400' fontSize='xs'>
|
||||
Review
|
||||
</Th>
|
||||
<Th color='gray.400' fontSize='xs'>
|
||||
Availability
|
||||
</Th>
|
||||
<Th color='gray.400' fontSize='xs'>
|
||||
id
|
||||
</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td minW='300px'>
|
||||
<Flex align='center'>
|
||||
<Box w='40px' h='40px' me='14px'>
|
||||
<Image
|
||||
src={productPage2}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Box>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Christopher Knight Home
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
|
||||
$89.53
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Stack direction='row' color='gray.700' spacing='2px'>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarHalf}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
</Stack>
|
||||
</Td>
|
||||
<Td>
|
||||
<Progress
|
||||
size='xs'
|
||||
colorScheme='blue'
|
||||
value={70}
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
|
||||
230019
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td>
|
||||
<Flex align='center'>
|
||||
<Box w='40px' h='40px' me='14px'>
|
||||
<Image
|
||||
src={productPage3}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Box>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Bar Height Swivel Barstool
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
|
||||
$89.53
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Stack direction='row' color='gray.700' spacing='2px'>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
</Stack>
|
||||
</Td>
|
||||
<Td>
|
||||
<Progress
|
||||
size='xs'
|
||||
colorScheme='blue'
|
||||
value={90}
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
|
||||
230019
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td>
|
||||
<Flex align='center'>
|
||||
<Box w='40px' h='40px' me='14px'>
|
||||
<Image
|
||||
src={productPage4}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Box>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Signature Design by Ashley
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
|
||||
$89.53
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Stack direction='row' color='gray.700' spacing='2px'>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
</Stack>
|
||||
</Td>
|
||||
<Td>
|
||||
<Progress
|
||||
size='xs'
|
||||
colorScheme='red'
|
||||
value={40}
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
|
||||
230019
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td border='none'>
|
||||
<Flex align='center'>
|
||||
<Box w='40px' h='40px' me='14px'>
|
||||
<Image
|
||||
src={productPage5}
|
||||
w='100%'
|
||||
h='100%'
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Box>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Modern Square
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td border='none'>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='bold'>
|
||||
$89.53
|
||||
</Text>
|
||||
</Td>
|
||||
<Td border='none'>
|
||||
<Stack direction='row' color='gray.700' spacing='2px'>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarFill}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
<Icon
|
||||
color={starFill}
|
||||
as={BsStarHalf}
|
||||
w='10px'
|
||||
h='10px'
|
||||
/>
|
||||
</Stack>
|
||||
</Td>
|
||||
<Td border='none'>
|
||||
<Progress
|
||||
size='xs'
|
||||
colorScheme='red'
|
||||
value={15}
|
||||
borderRadius='12px'
|
||||
/>
|
||||
</Td>
|
||||
<Td border='none'>
|
||||
<Text color='gray.500' fontSize='sm' fontWeight='normal'>
|
||||
230019
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductPage;
|
||||
Reference in New Issue
Block a user