feat: 删除无用组件
This commit is contained in:
zdl
@@ -5,7 +5,13 @@
|
||||
"Bash(xargs ls:*)",
|
||||
"Bash(awk:*)",
|
||||
"Bash(npm start)",
|
||||
"Bash(python3:*)"
|
||||
"Bash(python3:*)",
|
||||
"Bash(rm -rf /Users/qiye/Desktop/jzqy/vf_react/src/views/Applications)",
|
||||
"Bash(rm -rf /Users/qiye/Desktop/jzqy/vf_react/src/views/Ecommerce)",
|
||||
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/Automotive.js)",
|
||||
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/CRM.js)",
|
||||
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/SmartHome.js)",
|
||||
"Bash(rm /Users/qiye/Desktop/jzqy/vf_react/src/views/Dashboard/Landing.js)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
||||
14
src/App.js
14
src/App.js
@@ -23,7 +23,6 @@ import theme from "theme/theme.js";
|
||||
import PageLoader from "components/Loading/PageLoader";
|
||||
|
||||
// Layouts - 保持同步导入（需要立即加载）
|
||||
import Admin from "layouts/Admin";
|
||||
import Auth from "layouts/Auth";
|
||||
import HomeLayout from "layouts/Home";
|
||||
import MainLayout from "layouts/MainLayout";
|
||||
@@ -143,19 +142,6 @@ function AppContent() {
|
||||
<Route path="market-data" element={<MarketDataView />} />
|
||||
</Route>
|
||||
|
||||
{/* 管理后台路由 - 需要登录，不使用 MainLayout */}
|
||||
{/* 这些路由有自己的加载状态处理 */}
|
||||
<Route
|
||||
path="admin/*"
|
||||
element={
|
||||
<Suspense fallback={<PageLoader message="加载中..." />}>
|
||||
<ProtectedRoute>
|
||||
<Admin />
|
||||
</ProtectedRoute>
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 认证页面路由 - 不使用 MainLayout */}
|
||||
<Route path="auth/*" element={<Auth />} />
|
||||
|
||||
|
||||
@@ -1,222 +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,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
Flex,
|
||||
Link,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import { SidebarContext } from "contexts/SidebarContext";
|
||||
import PropTypes from "prop-types";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import AdminNavbarLinks from "./AdminNavbarLinks";
|
||||
import { HamburgerIcon } from "@chakra-ui/icons";
|
||||
|
||||
export default function AdminNavbar(props) {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
const {
|
||||
sidebarWidth,
|
||||
setSidebarWidth,
|
||||
toggleSidebar,
|
||||
setToggleSidebar,
|
||||
} = useContext(SidebarContext);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeNavbar);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeNavbar);
|
||||
};
|
||||
});
|
||||
|
||||
const {
|
||||
variant,
|
||||
children,
|
||||
fixed,
|
||||
secondary,
|
||||
brandText,
|
||||
onOpen,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
// Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
|
||||
let mainText =
|
||||
fixed && scrolled
|
||||
? useColorModeValue("gray.700", "gray.200")
|
||||
: useColorModeValue("white", "gray.200");
|
||||
let secondaryText =
|
||||
fixed && scrolled
|
||||
? useColorModeValue("gray.700", "gray.200")
|
||||
: useColorModeValue("white", "gray.200");
|
||||
let navbarPosition = "absolute";
|
||||
let navbarFilter = "none";
|
||||
let navbarBackdrop = "blur(20px)";
|
||||
let navbarShadow = "none";
|
||||
let navbarBg = "none";
|
||||
let navbarBorder = "transparent";
|
||||
let secondaryMargin = "0px";
|
||||
let paddingX = "15px";
|
||||
if (props.fixed === true)
|
||||
if (scrolled === true) {
|
||||
navbarPosition = "fixed";
|
||||
navbarShadow = useColorModeValue(
|
||||
"0px 7px 23px rgba(0, 0, 0, 0.05)",
|
||||
"none"
|
||||
);
|
||||
navbarBg = useColorModeValue(
|
||||
"linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)",
|
||||
"linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
|
||||
);
|
||||
navbarBorder = useColorModeValue("#FFFFFF", "rgba(255, 255, 255, 0.31)");
|
||||
navbarFilter = useColorModeValue(
|
||||
"none",
|
||||
"drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
|
||||
);
|
||||
}
|
||||
if (props.secondary) {
|
||||
navbarBackdrop = "none";
|
||||
navbarPosition = "absolute";
|
||||
mainText = "white";
|
||||
secondaryText = "white";
|
||||
secondaryMargin = "22px";
|
||||
paddingX = "30px";
|
||||
}
|
||||
const changeNavbar = () => {
|
||||
if (window.scrollY > 1) {
|
||||
setScrolled(true);
|
||||
} else {
|
||||
setScrolled(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
position={navbarPosition}
|
||||
boxShadow={navbarShadow}
|
||||
bg={navbarBg}
|
||||
borderColor={navbarBorder}
|
||||
filter={navbarFilter}
|
||||
backdropFilter={navbarBackdrop}
|
||||
borderWidth="1.5px"
|
||||
borderStyle="solid"
|
||||
transitionDelay="0s, 0s, 0s, 0s"
|
||||
transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
|
||||
transition-property="box-shadow, background-color, filter, border"
|
||||
transitionTimingFunction="linear, linear, linear, linear"
|
||||
alignItems={{ xl: "center" }}
|
||||
borderRadius="16px"
|
||||
display="flex"
|
||||
minH="75px"
|
||||
justifyContent={{ xl: "center" }}
|
||||
lineHeight="25.6px"
|
||||
mx="auto"
|
||||
mt={secondaryMargin}
|
||||
pb="8px"
|
||||
left={document.documentElement.dir === "rtl" ? "30px" : ""}
|
||||
right={document.documentElement.dir === "rtl" ? "" : "30px"}
|
||||
px={{
|
||||
sm: paddingX,
|
||||
md: "30px",
|
||||
}}
|
||||
ps={{
|
||||
xl: "12px",
|
||||
}}
|
||||
pt="8px"
|
||||
top="18px"
|
||||
w={{ sm: "calc(100vw - 30px)", xl: "calc(100vw - 75px - 275px)" }}
|
||||
>
|
||||
<Flex
|
||||
w="100%"
|
||||
flexDirection={{
|
||||
sm: "column",
|
||||
md: "row",
|
||||
}}
|
||||
alignItems={{ xl: "center" }}
|
||||
>
|
||||
<Box mb={{ sm: "8px", md: "0px" }}>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem color={mainText}>
|
||||
<BreadcrumbLink href="#" color={secondaryText}>
|
||||
Pages
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
|
||||
<BreadcrumbItem color={mainText}>
|
||||
<BreadcrumbLink href="#" color={mainText}>
|
||||
{brandText}
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
{/* Here we create navbar brand, based on route name */}
|
||||
<Link
|
||||
color={mainText}
|
||||
href="#"
|
||||
bg="inherit"
|
||||
borderRadius="inherit"
|
||||
fontWeight="bold"
|
||||
_hover={{ color: { mainText } }}
|
||||
_active={{
|
||||
bg: "inherit",
|
||||
transform: "none",
|
||||
borderColor: "transparent",
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
{brandText}
|
||||
</Link>
|
||||
</Box>
|
||||
<HamburgerIcon
|
||||
w="100px"
|
||||
h="20px"
|
||||
ms="20px"
|
||||
color="#fff"
|
||||
cursor="pointer"
|
||||
display={{ sm: "none", xl: "block" }}
|
||||
onClick={() => {
|
||||
setSidebarWidth(sidebarWidth === 275 ? 120 : 275);
|
||||
setToggleSidebar(!toggleSidebar);
|
||||
}}
|
||||
/>
|
||||
<Box ms="auto" w={{ sm: "100%", md: "unset" }}>
|
||||
<AdminNavbarLinks
|
||||
onOpen={props.onOpen}
|
||||
logoText={props.logoText}
|
||||
secondary={props.secondary}
|
||||
fixed={props.fixed}
|
||||
scrolled={scrolled}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
AdminNavbar.propTypes = {
|
||||
brandText: PropTypes.string,
|
||||
variant: PropTypes.string,
|
||||
secondary: PropTypes.bool,
|
||||
fixed: PropTypes.bool,
|
||||
onOpen: PropTypes.func,
|
||||
};
|
||||
@@ -1,335 +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 Icons
|
||||
import { BellIcon } from "@chakra-ui/icons";
|
||||
// Chakra Imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Text,
|
||||
Stack,
|
||||
Box,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
Avatar,
|
||||
HStack,
|
||||
Divider,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import avatar1 from "assets/img/avatars/avatar1.png";
|
||||
import avatar2 from "assets/img/avatars/avatar2.png";
|
||||
import avatar3 from "assets/img/avatars/avatar3.png";
|
||||
// Custom Icons
|
||||
import { ProfileIcon, SettingsIcon } from "components/Icons/Icons";
|
||||
// Custom Components
|
||||
import { ItemContent } from "components/Menu/ItemContent";
|
||||
import { SearchBar } from "components/Navbars/SearchBar/SearchBar";
|
||||
import { SidebarResponsive } from "components/Sidebar/Sidebar";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import routes from "routes.js";
|
||||
import {
|
||||
ArgonLogoDark,
|
||||
ChakraLogoDark,
|
||||
ArgonLogoLight,
|
||||
ChakraLogoLight,
|
||||
} from "components/Icons/Icons";
|
||||
import { useAuth } from "contexts/AuthContext";
|
||||
import SubscriptionBadge from "components/Subscription/SubscriptionBadge";
|
||||
import SubscriptionModal from "components/Subscription/SubscriptionModal";
|
||||
|
||||
export default function HeaderLinks(props) {
|
||||
console.log('🚀 [AdminNavbarLinks] 组件已加载');
|
||||
|
||||
const {
|
||||
variant,
|
||||
children,
|
||||
fixed,
|
||||
scrolled,
|
||||
secondary,
|
||||
onOpen,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
const { user, isAuthenticated, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
console.log('👤 [AdminNavbarLinks] 用户状态:', { user, isAuthenticated });
|
||||
|
||||
// 订阅信息状态
|
||||
const [subscriptionInfo, setSubscriptionInfo] = React.useState({
|
||||
type: 'free',
|
||||
status: 'active',
|
||||
days_left: 0,
|
||||
is_active: true
|
||||
});
|
||||
const [isSubscriptionModalOpen, setIsSubscriptionModalOpen] = React.useState(false);
|
||||
|
||||
// 加载订阅信息
|
||||
React.useEffect(() => {
|
||||
console.log('🔍 [AdminNavbarLinks] 订阅徽章 - 认证状态:', isAuthenticated, 'userId:', user?.id);
|
||||
|
||||
if (isAuthenticated && user) {
|
||||
const loadSubscriptionInfo = async () => {
|
||||
try {
|
||||
const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
|
||||
console.log('🌐 [AdminNavbarLinks] 订阅徽章 - API:', base + '/api/subscription/current');
|
||||
const response = await fetch(base + '/api/subscription/current', {
|
||||
credentials: 'include',
|
||||
});
|
||||
console.log('📡 [AdminNavbarLinks] 订阅徽章 - 响应:', response.status);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('✅ [AdminNavbarLinks] 订阅徽章 - 完整响应数据:', data);
|
||||
console.log('🔍 [AdminNavbarLinks] 订阅徽章 - data.data:', data.data);
|
||||
console.log('🔍 [AdminNavbarLinks] 订阅徽章 - type值:', data.data?.type, '类型:', typeof data.data?.type);
|
||||
|
||||
if (data.success && data.data) {
|
||||
// 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
|
||||
const normalizedData = {
|
||||
type: (data.data.type || data.data.subscription_type || 'free').toLowerCase(),
|
||||
status: data.data.status || 'active',
|
||||
days_left: data.data.days_left || 0,
|
||||
is_active: data.data.is_active !== false,
|
||||
end_date: data.data.end_date || null
|
||||
};
|
||||
console.log('✨ [AdminNavbarLinks] 订阅徽章 - 标准化后:', normalizedData);
|
||||
setSubscriptionInfo(normalizedData);
|
||||
}
|
||||
} else {
|
||||
console.warn('⚠️ [AdminNavbarLinks] 订阅徽章 - API 失败，使用默认值');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ [AdminNavbarLinks] 订阅徽章 - 错误:', error);
|
||||
}
|
||||
};
|
||||
loadSubscriptionInfo();
|
||||
} else {
|
||||
// 用户未登录时,重置为免费版
|
||||
console.warn('🚫 [AdminNavbarLinks] 订阅徽章 - 用户未登录,重置为免费版');
|
||||
setSubscriptionInfo({
|
||||
type: 'free',
|
||||
status: 'active',
|
||||
days_left: 0,
|
||||
is_active: true
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated, user?.id]); // 只依赖 user.id 而不是整个 user 对象
|
||||
|
||||
// Chakra Color Mode
|
||||
let navbarIcon =
|
||||
fixed && scrolled
|
||||
? useColorModeValue("gray.700", "gray.200")
|
||||
: useColorModeValue("white", "gray.200");
|
||||
let menuBg = useColorModeValue("white", "navy.800");
|
||||
if (secondary) {
|
||||
navbarIcon = "white";
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate("/auth/signin");
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
pe={{ sm: "0px", md: "16px" }}
|
||||
w={{ sm: "100%", md: "auto" }}
|
||||
alignItems="center"
|
||||
flexDirection="row"
|
||||
>
|
||||
<SearchBar me="18px" />
|
||||
|
||||
{/* 订阅状态徽章 - 仅登录用户可见 */}
|
||||
{console.log('🎨 [订阅徽章] 渲染:', { isAuthenticated, subscriptionInfo })}
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<SubscriptionBadge
|
||||
subscriptionInfo={subscriptionInfo}
|
||||
onClick={() => setIsSubscriptionModalOpen(true)}
|
||||
/>
|
||||
<SubscriptionModal
|
||||
isOpen={isSubscriptionModalOpen}
|
||||
onClose={() => setIsSubscriptionModalOpen(false)}
|
||||
subscriptionInfo={subscriptionInfo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 用户认证状态 */}
|
||||
{isAuthenticated ? (
|
||||
// 已登录用户 - 显示用户菜单
|
||||
<Menu>
|
||||
<MenuButton>
|
||||
<HStack spacing={2} cursor="pointer">
|
||||
<Avatar
|
||||
size="sm"
|
||||
name={user?.name}
|
||||
src={user?.avatar}
|
||||
bg="blue.500"
|
||||
/>
|
||||
<Text
|
||||
display={{ sm: "none", md: "flex" }}
|
||||
color={navbarIcon}
|
||||
fontSize="sm"
|
||||
fontWeight="medium"
|
||||
>
|
||||
{user?.name || user?.email}
|
||||
</Text>
|
||||
</HStack>
|
||||
</MenuButton>
|
||||
<MenuList p="16px 8px" bg={menuBg}>
|
||||
<Flex flexDirection="column">
|
||||
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
|
||||
<HStack spacing={3}>
|
||||
<Avatar size="sm" name={user?.name} src={user?.avatar} />
|
||||
<Box>
|
||||
<Text fontWeight="bold" fontSize="sm">{user?.name}</Text>
|
||||
<Text fontSize="xs" color="gray.500">{user?.email}</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
</MenuItem>
|
||||
<Divider my={2} />
|
||||
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/profile")}>
|
||||
<Text>个人资料</Text>
|
||||
</MenuItem>
|
||||
<MenuItem borderRadius="8px" mb="10px" onClick={() => navigate("/admin/settings")}>
|
||||
<Text>设置</Text>
|
||||
</MenuItem>
|
||||
<Divider my={2} />
|
||||
<MenuItem borderRadius="8px" onClick={handleLogout}>
|
||||
<Text color="red.500">退出登录</Text>
|
||||
</MenuItem>
|
||||
</Flex>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
) : (
|
||||
// 未登录用户 - 显示登录按钮
|
||||
<NavLink to="/auth/signin">
|
||||
<Button
|
||||
ms="0px"
|
||||
px="0px"
|
||||
me={{ sm: "2px", md: "16px" }}
|
||||
color={navbarIcon}
|
||||
variant="no-effects"
|
||||
rightIcon={
|
||||
document.documentElement.dir ? (
|
||||
""
|
||||
) : (
|
||||
<ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
|
||||
)
|
||||
}
|
||||
leftIcon={
|
||||
document.documentElement.dir ? (
|
||||
<ProfileIcon color={navbarIcon} w="22px" h="22px" me="0px" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
>
|
||||
<Text display={{ sm: "none", md: "flex" }}>登录</Text>
|
||||
</Button>
|
||||
</NavLink>
|
||||
)}
|
||||
|
||||
<SidebarResponsive
|
||||
logo={
|
||||
<Stack direction="row" spacing="12px" align="center" justify="center">
|
||||
{colorMode === "dark" ? (
|
||||
<ArgonLogoLight w="74px" h="27px" />
|
||||
) : (
|
||||
<ArgonLogoDark w="74px" h="27px" />
|
||||
)}
|
||||
<Box
|
||||
w="1px"
|
||||
h="20px"
|
||||
bg={colorMode === "dark" ? "white" : "gray.700"}
|
||||
/>
|
||||
{colorMode === "dark" ? (
|
||||
<ChakraLogoLight w="82px" h="21px" />
|
||||
) : (
|
||||
<ChakraLogoDark w="82px" h="21px" />
|
||||
)}
|
||||
</Stack>
|
||||
}
|
||||
colorMode={colorMode}
|
||||
secondary={props.secondary}
|
||||
routes={routes}
|
||||
{...rest}
|
||||
/>
|
||||
<SettingsIcon
|
||||
cursor="pointer"
|
||||
ms={{ base: "16px", xl: "0px" }}
|
||||
me="16px"
|
||||
onClick={props.onOpen}
|
||||
color={navbarIcon}
|
||||
w="18px"
|
||||
h="18px"
|
||||
/>
|
||||
<Menu>
|
||||
<MenuButton>
|
||||
<BellIcon color={navbarIcon} w="18px" h="18px" />
|
||||
</MenuButton>
|
||||
<MenuList p="16px 8px" bg={menuBg}>
|
||||
<Flex flexDirection="column">
|
||||
<MenuItem borderRadius="8px" mb="10px">
|
||||
<ItemContent
|
||||
time="13 minutes ago"
|
||||
info="from Alicia"
|
||||
boldInfo="New Message"
|
||||
aName="Alicia"
|
||||
aSrc={avatar1}
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem borderRadius="8px" mb="10px">
|
||||
<ItemContent
|
||||
time="2 days ago"
|
||||
info="by Josh Henry"
|
||||
boldInfo="New Album"
|
||||
aName="Josh Henry"
|
||||
aSrc={avatar2}
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem borderRadius="8px">
|
||||
<ItemContent
|
||||
time="3 days ago"
|
||||
info="Payment succesfully completed!"
|
||||
boldInfo=""
|
||||
aName="Kara"
|
||||
aSrc={avatar3}
|
||||
/>
|
||||
</MenuItem>
|
||||
</Flex>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
HeaderLinks.propTypes = {
|
||||
variant: PropTypes.string,
|
||||
fixed: PropTypes.bool,
|
||||
secondary: PropTypes.bool,
|
||||
onOpen: PropTypes.func,
|
||||
};
|
||||
@@ -626,23 +626,15 @@ export default function HomeNavbar() {
|
||||
|
||||
// 加载订阅信息
|
||||
React.useEffect(() => {
|
||||
console.log('🔍 [HomeNavbar] 订阅徽章 - 认证状态:', isAuthenticated, 'userId:', user?.id);
|
||||
|
||||
if (isAuthenticated && user) {
|
||||
const loadSubscriptionInfo = async () => {
|
||||
try {
|
||||
const base = getApiBase();
|
||||
console.log('🌐 [HomeNavbar] 订阅徽章 - API:', base + '/api/subscription/current');
|
||||
const response = await fetch(base + '/api/subscription/current', {
|
||||
credentials: 'include',
|
||||
});
|
||||
console.log('📡 [HomeNavbar] 订阅徽章 - 响应:', response.status);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('✅ [HomeNavbar] 订阅徽章 - 完整响应数据:', data);
|
||||
console.log('🔍 [HomeNavbar] 订阅徽章 - data.data:', data.data);
|
||||
console.log('🔍 [HomeNavbar] 订阅徽章 - type值:', data.data?.type, '类型:', typeof data.data?.type);
|
||||
|
||||
if (data.success && data.data) {
|
||||
// 数据标准化处理：确保type字段是小写的 'free', 'pro', 或 'max'
|
||||
const normalizedData = {
|
||||
@@ -652,20 +644,16 @@ export default function HomeNavbar() {
|
||||
is_active: data.data.is_active !== false,
|
||||
end_date: data.data.end_date || null
|
||||
};
|
||||
console.log('✨ [HomeNavbar] 订阅徽章 - 标准化后:', normalizedData);
|
||||
setSubscriptionInfo(normalizedData);
|
||||
}
|
||||
} else {
|
||||
console.warn('⚠️ [HomeNavbar] 订阅徽章 - API 失败，使用默认值');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ [HomeNavbar] 订阅徽章 - 错误:', error);
|
||||
logger.error('HomeNavbar', '加载订阅信息失败', error);
|
||||
}
|
||||
};
|
||||
loadSubscriptionInfo();
|
||||
} else {
|
||||
// 用户未登录时,重置为免费版
|
||||
console.warn('🚫 [HomeNavbar] 订阅徽章 - 用户未登录,重置为免费版');
|
||||
setSubscriptionInfo({
|
||||
type: 'free',
|
||||
status: 'active',
|
||||
@@ -775,7 +763,6 @@ export default function HomeNavbar() {
|
||||
/>
|
||||
|
||||
{/* 订阅状态徽章 - 仅登录用户可见 */}
|
||||
{console.log('🎨 [HomeNavbar] 订阅徽章 - 渲染:', { isAuthenticated, user: !!user, subscriptionInfo })}
|
||||
{isAuthenticated && user && (
|
||||
<>
|
||||
<SubscriptionBadge
|
||||
|
||||
@@ -1,719 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/*!
|
||||
=========================================================
|
||||
* 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 { HamburgerIcon } from '@chakra-ui/icons';
|
||||
// chakra imports
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionIcon,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Box,
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerOverlay,
|
||||
Flex,
|
||||
HStack,
|
||||
Icon,
|
||||
List,
|
||||
ListItem,
|
||||
Stack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
useDisclosure
|
||||
} from '@chakra-ui/react';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import {
|
||||
renderThumbDark,
|
||||
renderThumbLight,
|
||||
renderTrack,
|
||||
renderTrackRTL,
|
||||
renderView,
|
||||
renderViewRTL
|
||||
} from 'components/Scrollbar/Scrollbar';
|
||||
import { HSeparator } from 'components/Separator/Separator';
|
||||
import { SidebarContext } from 'contexts/SidebarContext';
|
||||
import React from 'react';
|
||||
import { Scrollbars } from 'react-custom-scrollbars-2';
|
||||
import { FaCircle } from 'react-icons/fa';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import SidebarDocs from './SidebarDocs';
|
||||
|
||||
// FUNCTIONS
|
||||
|
||||
function Sidebar(props) {
|
||||
// to check for active links and opened collapses
|
||||
let location = useLocation();
|
||||
|
||||
const { routes, landing } = props;
|
||||
|
||||
// this is for the rest of the collapses
|
||||
const { sidebarWidth, setSidebarWidth, toggleSidebar } = React.useContext(SidebarContext);
|
||||
|
||||
let variantChange = '0.2s linear';
|
||||
// verifies if routeName is the one active (in browser input)
|
||||
const activeRoute = (routeName) => {
|
||||
return location.pathname.includes(routeName);
|
||||
};
|
||||
// this function creates the links and collapses that appear in the sidebar (left menu)
|
||||
const createLinks = (routes) => {
|
||||
// Chakra Color Mode
|
||||
let activeBg = 'blue.500';
|
||||
let inactiveBg = useColorModeValue('transparent', 'navy.700');
|
||||
let activeColor = useColorModeValue('gray.700', 'white');
|
||||
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
|
||||
let sidebarActiveShadow = '0px 7px 11px rgba(0, 0, 0, 0.04)';
|
||||
let activeAccordionBg = useColorModeValue('white', 'navy.700');
|
||||
let activeColorIcon = 'white';
|
||||
let inactiveColorIcon = 'blue.500';
|
||||
|
||||
if (landing) {
|
||||
activeBg = 'white';
|
||||
inactiveBg = 'transparent';
|
||||
activeColor = 'white';
|
||||
inactiveColor = 'white';
|
||||
sidebarActiveShadow = '0px 7px 11px rgba(0, 0, 0, 0.04)';
|
||||
activeAccordionBg = 'rgba(255, 255, 255, 0.11)';
|
||||
activeColorIcon = 'blue.500';
|
||||
inactiveColorIcon = 'white';
|
||||
}
|
||||
|
||||
return routes.map((prop, key) => {
|
||||
if (prop.category) {
|
||||
return (
|
||||
<Box key={key}>
|
||||
<Text
|
||||
fontSize={sidebarWidth === 275 ? 'md' : 'xs'}
|
||||
color={activeColor}
|
||||
fontWeight='bold'
|
||||
mx='auto'
|
||||
ps={{
|
||||
sm: '10px',
|
||||
xl: '16px'
|
||||
}}
|
||||
pt='18px'
|
||||
pb='12px'
|
||||
key={key}>
|
||||
{prop.name}
|
||||
</Text>
|
||||
{createLinks(prop.items)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
if (prop.collapse) {
|
||||
return (
|
||||
<Accordion key={key} allowToggle>
|
||||
<AccordionItem border='none'>
|
||||
<AccordionButton
|
||||
display='flex'
|
||||
align='center'
|
||||
justify='center'
|
||||
boxShadow={activeRoute(prop.path) && prop.icon ? sidebarActiveShadow : null}
|
||||
_hover={{
|
||||
boxShadow: activeRoute(prop.path) && prop.icon ? sidebarActiveShadow : null
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
borderRadius='8px'
|
||||
w={{
|
||||
sm: sidebarWidth === 275 ? '100%' : '77%',
|
||||
xl: sidebarWidth === 275 ? '90%' : '70%',
|
||||
'2xl': sidebarWidth === 275 ? '95%' : '77%'
|
||||
}}
|
||||
px={prop.icon ? null : '0px'}
|
||||
py={prop.icon ? '12px' : null}
|
||||
bg={activeRoute(prop.path) && prop.icon ? activeAccordionBg : 'transparent'}
|
||||
ms={sidebarWidth !== 275 ? !prop.icon ? '12px' : '8px' : null}>
|
||||
{activeRoute(prop.path) ? (
|
||||
<Flex
|
||||
fontWeight='bold'
|
||||
boxSize='initial'
|
||||
justifyContent='flex-start'
|
||||
alignItems='center'
|
||||
bg='transparent'
|
||||
transition={variantChange}
|
||||
mx={{
|
||||
xl: 'auto'
|
||||
}}
|
||||
px='0px'
|
||||
borderRadius='8px'
|
||||
w='100%'
|
||||
_hover={{}}
|
||||
_active={{
|
||||
bg: 'inherit',
|
||||
transform: 'none',
|
||||
borderColor: 'transparent',
|
||||
border: 'none'
|
||||
}}
|
||||
_focus={{
|
||||
transform: 'none',
|
||||
borderColor: 'transparent',
|
||||
border: 'none'
|
||||
}}>
|
||||
{prop.icon ? (
|
||||
<Flex justify={sidebarWidth === 275 ? 'flex-start' : 'center'}>
|
||||
<IconBox
|
||||
bg={activeBg}
|
||||
color={activeColorIcon}
|
||||
h='30px'
|
||||
w='30px'
|
||||
me={sidebarWidth === 275 ? '12px' : '0px'}
|
||||
transition={variantChange}>
|
||||
{prop.icon}
|
||||
</IconBox>
|
||||
<Text
|
||||
color={activeColor}
|
||||
my='auto'
|
||||
fontSize='sm'
|
||||
display={sidebarWidth === 275 ? 'block' : 'none'}>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<HStack
|
||||
spacing={sidebarWidth === 275 ? '22px' : '0px'}
|
||||
ps={sidebarWidth === 275 ? '10px' : '0px'}
|
||||
ms={sidebarWidth === 275 ? '0px' : '8px'}>
|
||||
<Icon
|
||||
as={FaCircle}
|
||||
w='10px'
|
||||
color='blue.500'
|
||||
display={sidebarWidth === 275 ? 'block' : 'none'}
|
||||
/>
|
||||
<Text color={activeColor} my='auto' fontSize='sm'>
|
||||
{sidebarWidth === 275 ? prop.name : prop.name[0]}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</Flex>
|
||||
) : (
|
||||
<Flex
|
||||
fontWeight='bold'
|
||||
boxSize='initial'
|
||||
justifyContent='flex-start'
|
||||
alignItems='center'
|
||||
bg='transparent'
|
||||
mx={{
|
||||
xl: 'auto'
|
||||
}}
|
||||
px='0px'
|
||||
borderRadius='8px'
|
||||
w='100%'
|
||||
_hover={{}}
|
||||
_active={{
|
||||
bg: 'inherit',
|
||||
transform: 'none',
|
||||
borderColor: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
borderColor: 'transparent',
|
||||
boxShadow: 'none'
|
||||
}}>
|
||||
{prop.icon ? (
|
||||
<Flex justify={sidebarWidth === 275 ? 'flex-start' : 'center'}>
|
||||
<IconBox
|
||||
bg={inactiveBg}
|
||||
color={inactiveColorIcon}
|
||||
h='30px'
|
||||
w='30px'
|
||||
me={sidebarWidth === 275 ? '12px' : '0px'}
|
||||
transition={variantChange}>
|
||||
{prop.icon}
|
||||
</IconBox>
|
||||
<Text
|
||||
color={inactiveColor}
|
||||
my='auto'
|
||||
fontSize='sm'
|
||||
display={sidebarWidth === 275 ? 'block' : 'none'}>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<HStack
|
||||
spacing={sidebarWidth === 275 ? '26px' : '0px'}
|
||||
ps={sidebarWidth === 275 ? '10px' : '0px'}
|
||||
ms={sidebarWidth === 275 ? '0px' : '8px'}>
|
||||
<Icon
|
||||
as={FaCircle}
|
||||
w='6px'
|
||||
color={landing ? 'white' : 'blue.500'}
|
||||
display={sidebarWidth === 275 ? 'block' : 'none'}
|
||||
/>
|
||||
<Text color={inactiveColor} my='auto' fontSize='md' fontWeight='normal'>
|
||||
{sidebarWidth === 275 ? prop.name : prop.name[0]}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</Flex>
|
||||
)}
|
||||
<AccordionIcon
|
||||
color={landing ? 'white' : 'gray.400'}
|
||||
display={
|
||||
prop.icon ? sidebarWidth === 275 ? (
|
||||
'block'
|
||||
) : (
|
||||
'none'
|
||||
) : sidebarWidth === 275 ? (
|
||||
'block'
|
||||
) : (
|
||||
'none'
|
||||
)
|
||||
}
|
||||
transform={prop.icon ? null : sidebarWidth === 275 ? null : 'translateX(-70%)'}
|
||||
/>
|
||||
</AccordionButton>
|
||||
<AccordionPanel
|
||||
pe={prop.icon ? null : '0px'}
|
||||
pb='8px'
|
||||
ps={prop.icon ? null : sidebarWidth === 275 ? null : '8px'}>
|
||||
<List>
|
||||
{prop.icon ? (
|
||||
createLinks(prop.items) // for bullet accordion links
|
||||
) : (
|
||||
createAccordionLinks(prop.items)
|
||||
) // for non-bullet accordion links
|
||||
}
|
||||
</List>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<NavLink key={key} to={prop.layout + prop.path}>
|
||||
{prop.icon ? (
|
||||
<Box>
|
||||
<HStack spacing='14px' py='15px' px='15px'>
|
||||
<IconBox bg='blue.500' color='white' h='30px' w='30px' transition={variantChange}>
|
||||
{prop.icon}
|
||||
</IconBox>
|
||||
<Text
|
||||
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
|
||||
fontWeight={activeRoute(prop.name) ? 'bold' : 'normal'}
|
||||
fontSize='sm'>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
) : (
|
||||
<ListItem key={key} ms={sidebarWidth === 275 ? null : '10px'}>
|
||||
<HStack
|
||||
spacing={
|
||||
sidebarWidth === 275 ? activeRoute(prop.path.toLowerCase()) ? (
|
||||
'22px'
|
||||
) : (
|
||||
'26px'
|
||||
) : (
|
||||
'8px'
|
||||
)
|
||||
}
|
||||
py='5px'
|
||||
px={sidebarWidth === 275 ? '10px' : '0px'}>
|
||||
<Icon
|
||||
as={FaCircle}
|
||||
w={activeRoute(prop.path.toLowerCase()) ? '10px' : '6px'}
|
||||
color={landing ? 'white' : 'blue.500'}
|
||||
display={sidebarWidth === 275 ? 'block' : 'none'}
|
||||
/>
|
||||
<Text
|
||||
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
|
||||
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}>
|
||||
{sidebarWidth === 275 ? prop.name : prop.name[0]}
|
||||
</Text>
|
||||
</HStack>
|
||||
</ListItem>
|
||||
)}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createAccordionLinks = (routes) => {
|
||||
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
|
||||
let activeColor = useColorModeValue('gray.700', 'white');
|
||||
|
||||
if (landing) {
|
||||
inactiveColor = 'white';
|
||||
activeColor = 'white';
|
||||
}
|
||||
|
||||
return routes.map((prop, key) => {
|
||||
return (
|
||||
<NavLink key={key} to={prop.layout + prop.path}>
|
||||
<ListItem key={key} pt='5px' ms={sidebarWidth === 275 ? '26px' : '12px'}>
|
||||
<Text
|
||||
mb='4px'
|
||||
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
|
||||
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}
|
||||
fontSize='sm'>
|
||||
{sidebarWidth === 275 ? prop.name : prop.name[0]}
|
||||
</Text>
|
||||
</ListItem>
|
||||
</NavLink>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
let isWindows = navigator.platform.startsWith('Win');
|
||||
let links = <Box>{createLinks(routes)}</Box>;
|
||||
// BRAND
|
||||
// Chakra Color Mode
|
||||
let sidebarBg = useColorModeValue('white', 'navy.800');
|
||||
let sidebarRadius = '20px';
|
||||
let sidebarMargins = '0px';
|
||||
var brand = (
|
||||
<Flex align='center' direction='column' pt={'25px'}>
|
||||
{props.logo}
|
||||
<HSeparator my='20px' />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
let sidebarContent = (
|
||||
<Box>
|
||||
<Box>{brand}</Box>
|
||||
<Stack direction='column' mb='40px'>
|
||||
<Box>{links}</Box>
|
||||
</Stack>
|
||||
<SidebarDocs landing={landing} />
|
||||
</Box>
|
||||
);
|
||||
|
||||
// SIDEBAR
|
||||
return (
|
||||
<Box
|
||||
onMouseEnter={toggleSidebar ? () => setSidebarWidth(sidebarWidth === 120 ? 275 : 120) : null}
|
||||
onMouseLeave={toggleSidebar ? () => setSidebarWidth(sidebarWidth === 275 ? 120 : 275) : null}>
|
||||
<Box display={{ sm: 'none', xl: 'block' }} position='fixed'>
|
||||
<Box
|
||||
bg={landing ? 'transparent' : sidebarBg}
|
||||
transition={variantChange}
|
||||
w={`${sidebarWidth}px`}
|
||||
ms={{
|
||||
sm: '16px'
|
||||
}}
|
||||
my={{
|
||||
sm: '16px'
|
||||
}}
|
||||
h='calc(100vh - 32px)'
|
||||
ps='20px'
|
||||
pe='20px'
|
||||
m={sidebarMargins}
|
||||
borderRadius={sidebarRadius}>
|
||||
<Scrollbars
|
||||
autoHide
|
||||
renderTrackVertical={document.documentElement.dir === 'rtl' ? renderTrackRTL : renderTrack}
|
||||
renderThumbVertical={useColorModeValue(renderThumbLight, renderThumbDark)}
|
||||
renderView={document.documentElement.dir === 'rtl' ? renderViewRTL : renderView}>
|
||||
{sidebarContent}
|
||||
</Scrollbars>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// FUNCTIONS
|
||||
|
||||
export function SidebarResponsive(props) {
|
||||
// to check for active links and opened collapses
|
||||
let location = useLocation();
|
||||
|
||||
let variantChange = '0.2s linear';
|
||||
// verifies if routeName is the one active (in browser input)
|
||||
const activeRoute = (routeName) => {
|
||||
return location.pathname.includes(routeName);
|
||||
};
|
||||
|
||||
// Chakra Color Mode
|
||||
let activeBg = 'blue.500';
|
||||
let inactiveBg = useColorModeValue('transparent', 'navy.700');
|
||||
let activeColor = useColorModeValue('gray.700', 'white');
|
||||
let inactiveColor = useColorModeValue('gray.400', 'gray.400');
|
||||
let activeAccordionBg = useColorModeValue('white', 'navy.700');
|
||||
let sidebarActiveShadow = useColorModeValue('0px 7px 11px rgba(0, 0, 0, 0.04)', 'none');
|
||||
let activeColorIcon = 'white';
|
||||
let inactiveColorIcon = 'blue.500';
|
||||
let sidebarBackgroundColor = useColorModeValue('white', 'navy.900');
|
||||
|
||||
// this function creates the links and collapses that appear in the sidebar (left menu)
|
||||
const createLinks = (routes) => {
|
||||
return routes.map((prop, key) => {
|
||||
if (prop.category) {
|
||||
return (
|
||||
<Box key={key}>
|
||||
<Text
|
||||
fontSize={'md'}
|
||||
color={activeColor}
|
||||
fontWeight='bold'
|
||||
mx='auto'
|
||||
ps={{
|
||||
sm: '10px',
|
||||
xl: '16px'
|
||||
}}
|
||||
py='12px'
|
||||
key={key}>
|
||||
{prop.name}
|
||||
</Text>
|
||||
{createLinks(prop.items)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
if (prop.collapse) {
|
||||
return (
|
||||
<Accordion key={key} allowToggle>
|
||||
<AccordionItem border='none'>
|
||||
<AccordionButton
|
||||
as='div'
|
||||
display='flex'
|
||||
align='center'
|
||||
justify='center'
|
||||
key={key}
|
||||
borderRadius='8px'
|
||||
px={prop.icon ? null : '0px'}
|
||||
py={prop.icon ? '12px' : null}
|
||||
boxShadow={activeRoute(prop.path) && prop.icon ? sidebarActiveShadow : 'none'}
|
||||
bg={activeRoute(prop.path) && prop.icon ? activeAccordionBg : 'transparent'}>
|
||||
{activeRoute(prop.path) ? (
|
||||
<Flex
|
||||
fontWeight='bold'
|
||||
boxSize='initial'
|
||||
justifyContent='flex-start'
|
||||
alignItems='center'
|
||||
bg='transparent'
|
||||
transition={variantChange}
|
||||
mx={{
|
||||
xl: 'auto'
|
||||
}}
|
||||
px='0px'
|
||||
borderRadius='8px'
|
||||
_hover={{}}
|
||||
w='100%'
|
||||
_active={{
|
||||
bg: 'inherit',
|
||||
transform: 'none',
|
||||
borderColor: 'transparent'
|
||||
}}>
|
||||
{prop.icon ? (
|
||||
<Flex>
|
||||
<IconBox
|
||||
bg={activeBg}
|
||||
color={activeColorIcon}
|
||||
h='30px'
|
||||
w='30px'
|
||||
me='12px'
|
||||
transition={variantChange}>
|
||||
{prop.icon}
|
||||
</IconBox>
|
||||
<Text color={activeColor} my='auto' fontSize='sm' display={'block'}>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<HStack spacing={'22px'} ps='10px' ms='0px'>
|
||||
<Icon as={FaCircle} w='10px' color='blue.500' />
|
||||
<Text as='span' color={activeColor} my='auto' fontSize='sm'>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</Flex>
|
||||
) : (
|
||||
<Text
|
||||
as='span'
|
||||
fontWeight='bold'
|
||||
boxSize='initial'
|
||||
justifyContent='flex-start'
|
||||
alignItems='center'
|
||||
bg='transparent'
|
||||
mx={{
|
||||
xl: 'auto'
|
||||
}}
|
||||
px='0px'
|
||||
borderRadius='8px'
|
||||
_hover={{}}
|
||||
w='100%'
|
||||
_active={{
|
||||
bg: 'inherit',
|
||||
transform: 'none',
|
||||
borderColor: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
boxShadow: 'none'
|
||||
}}>
|
||||
{prop.icon ? (
|
||||
<Flex>
|
||||
<IconBox
|
||||
bg={inactiveBg}
|
||||
color={inactiveColorIcon}
|
||||
h='30px'
|
||||
w='30px'
|
||||
me='12px'
|
||||
transition={variantChange}>
|
||||
{prop.icon}
|
||||
</IconBox>
|
||||
<Text color={inactiveColor} my='auto' fontSize='sm'>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<HStack spacing={'26px'} ps={'10px'} ms={'0px'}>
|
||||
<Icon as={FaCircle} w='6px' color='blue.500' />
|
||||
<Text color={inactiveColor} my='auto' fontSize='sm' fontWeight='normal'>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
<AccordionIcon color='gray.400' />
|
||||
</AccordionButton>
|
||||
<AccordionPanel pe={prop.icon ? null : '0px'} pb='8px'>
|
||||
<List>
|
||||
{prop.icon ? (
|
||||
createLinks(prop.items) // for bullet accordion links
|
||||
) : (
|
||||
createAccordionLinks(prop.items)
|
||||
) // for non-bullet accordion links
|
||||
}
|
||||
</List>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<NavLink key={key} to={prop.layout + prop.path}>
|
||||
{prop.icon ? (
|
||||
<Box>
|
||||
<HStack spacing='14px' py='15px' px='15px'>
|
||||
<IconBox bg='blue.500' color='white' h='30px' w='30px' transition={variantChange}>
|
||||
{prop.icon}
|
||||
</IconBox>
|
||||
<Text
|
||||
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
|
||||
fontWeight={activeRoute(prop.name) ? 'bold' : 'normal'}
|
||||
fontSize='sm'>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
) : (
|
||||
<ListItem>
|
||||
<HStack spacing='22px' py='5px' px='10px'>
|
||||
<Icon
|
||||
as={FaCircle}
|
||||
w={activeRoute(prop.path.toLowerCase()) ? '10px' : '6px'}
|
||||
color='blue.500'
|
||||
/>
|
||||
<Text
|
||||
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
|
||||
fontSize='sm'
|
||||
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
</ListItem>
|
||||
)}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const createAccordionLinks = (routes) => {
|
||||
return routes.map((prop, key) => {
|
||||
return (
|
||||
<NavLink key={key} to={prop.layout + prop.path}>
|
||||
<ListItem pt='5px' ms='26px' key={key}>
|
||||
<Text
|
||||
color={activeRoute(prop.path.toLowerCase()) ? activeColor : inactiveColor}
|
||||
fontWeight={activeRoute(prop.path.toLowerCase()) ? 'bold' : 'normal'}
|
||||
fontSize='sm'>
|
||||
{prop.name}
|
||||
</Text>
|
||||
</ListItem>
|
||||
</NavLink>
|
||||
);
|
||||
});
|
||||
};
|
||||
const { logo, display, routes } = props;
|
||||
|
||||
let links = <Box>{createLinks(routes)}</Box>;
|
||||
// BRAND
|
||||
// Chakra Color Mode
|
||||
let hamburgerColor = 'white';
|
||||
|
||||
var brand = (
|
||||
<Box pt={'25px'} mb='12px'>
|
||||
{logo}
|
||||
<HSeparator my='26px' />
|
||||
</Box>
|
||||
);
|
||||
|
||||
// SIDEBAR
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const btnRef = React.useRef();
|
||||
// Color variables
|
||||
return (
|
||||
<Box display={display}>
|
||||
<Box display={{ sm: 'flex', xl: 'none' }} ms='8px'>
|
||||
<HamburgerIcon
|
||||
color={hamburgerColor}
|
||||
w='18px'
|
||||
h='18px'
|
||||
me='16px'
|
||||
ref={btnRef}
|
||||
cursor='pointer'
|
||||
onClick={onOpen}
|
||||
/>
|
||||
<Drawer
|
||||
placement={document.documentElement.dir === 'rtl' ? 'right' : 'left'}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
finalFocusRef={btnRef}>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent
|
||||
w='250px'
|
||||
bg={sidebarBackgroundColor}
|
||||
maxW='250px'
|
||||
ms={{
|
||||
sm: '16px'
|
||||
}}
|
||||
my={{
|
||||
sm: '16px'
|
||||
}}
|
||||
borderRadius='16px'>
|
||||
<DrawerCloseButton _focus={{ boxShadow: 'none' }} _hover={{ boxShadow: 'none' }} />
|
||||
<DrawerBody maxW='250px' px='1rem'>
|
||||
<Box maxW='100%' h='100vh'>
|
||||
<Box mb='20px'>{brand}</Box>
|
||||
<Stack direction='column' mb='40px'>
|
||||
<Box>{links}</Box>
|
||||
</Stack>
|
||||
<SidebarDocs />
|
||||
</Box>
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
// PROPS
|
||||
|
||||
export default Sidebar;
|
||||
@@ -1,45 +0,0 @@
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Image,
|
||||
Link,
|
||||
Stack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import SidebarHelpImage from "assets/img/SidebarHelpImage.png";
|
||||
import { SidebarContext } from "contexts/SidebarContext";
|
||||
import React, { useContext } from "react";
|
||||
|
||||
export default function SidebarDocs({ landing }) {
|
||||
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
|
||||
const { sidebarWidth } = useContext(SidebarContext);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
justify='center'
|
||||
direction='column'
|
||||
align='center'
|
||||
|
||||
|
||||
display={sidebarWidth !== 275 && "none"}
|
||||
>
|
||||
<Image src={SidebarHelpImage} w='165px' ms="24px" />
|
||||
<Flex direction='column' align="center" textAlign='center' mb="12px" me="24px">
|
||||
<Text fontSize='14px' color={landing ? "white" : textColor} fontWeight='bold'>
|
||||
Need help?
|
||||
</Text>
|
||||
<Text fontSize='12px' color={landing ? "white" : 'gray.500'}>
|
||||
Please check our docs.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Link href='#' >
|
||||
<Button variant={landing ? "light" : 'primary'} mb={{ sm: "12px", xl: "16px" }} color={landing && "blue.500"} fontWeight="bold" minW="185px" ms="24px">
|
||||
DOCUMENTATION
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -4,16 +4,9 @@ import { Box, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
|
||||
// 🔍 调试：输出接收到的 props
|
||||
console.log('🎯 [SubscriptionBadge] 接收到的 subscriptionInfo:', subscriptionInfo);
|
||||
console.log('🎯 [SubscriptionBadge] subscriptionInfo.type:', subscriptionInfo?.type, '类型:', typeof subscriptionInfo?.type);
|
||||
|
||||
// 根据订阅类型返回样式配置
|
||||
const getBadgeStyles = () => {
|
||||
console.log('🔧 [SubscriptionBadge] getBadgeStyles 执行, type:', subscriptionInfo.type);
|
||||
|
||||
if (subscriptionInfo.type === 'max') {
|
||||
console.log('✅ [SubscriptionBadge] 匹配到 MAX');
|
||||
return {
|
||||
bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: 'white',
|
||||
@@ -24,7 +17,6 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
|
||||
};
|
||||
}
|
||||
if (subscriptionInfo.type === 'pro') {
|
||||
console.log('✅ [SubscriptionBadge] 匹配到 PRO');
|
||||
return {
|
||||
bg: 'linear-gradient(135deg, #667eea 0%, #3182CE 100%)',
|
||||
color: 'white',
|
||||
@@ -35,7 +27,6 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
|
||||
};
|
||||
}
|
||||
// 基础版
|
||||
console.log('⚠️ [SubscriptionBadge] 使用默认基础版');
|
||||
return {
|
||||
bg: 'transparent',
|
||||
color: useColorModeValue('gray.600', 'gray.400'),
|
||||
@@ -49,7 +40,6 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
|
||||
};
|
||||
|
||||
const styles = getBadgeStyles();
|
||||
console.log('🎨 [SubscriptionBadge] styles 对象:', styles);
|
||||
|
||||
// 智能动态 Tooltip 文本
|
||||
const getTooltipText = () => {
|
||||
@@ -118,10 +108,7 @@ export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
|
||||
}}
|
||||
>
|
||||
{styles.icon && <span style={{ marginRight: '4px' }}>{styles.icon}</span>}
|
||||
{(() => {
|
||||
console.log('📝 [SubscriptionBadge] 渲染文本:', styles.label);
|
||||
return styles.label;
|
||||
})()}
|
||||
{styles.label}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -1,222 +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 { Portal, Box, useColorMode, Stack, useDisclosure, useColorModeValue } from '@chakra-ui/react';
|
||||
import Configurator from 'components/Configurator/Configurator';
|
||||
import FixedPlugin from 'components/FixedPlugin/FixedPlugin';
|
||||
import Footer from 'components/Footer/Footer.js';
|
||||
// Custom components
|
||||
import MainPanel from 'components/Layout/MainPanel';
|
||||
import PanelContainer from 'components/Layout/PanelContainer';
|
||||
import PanelContent from 'components/Layout/PanelContent';
|
||||
// Layout components
|
||||
import AdminNavbar from 'components/Navbars/AdminNavbar.js';
|
||||
import Sidebar from 'components/Sidebar/Sidebar.js';
|
||||
import { SidebarContext } from 'contexts/SidebarContext';
|
||||
import React, { useState, Suspense } from 'react';
|
||||
import 'react-quill/dist/quill.snow.css'; // ES6
|
||||
|
||||
import { Route, Routes, Navigate } from "react-router-dom";
|
||||
import routes from 'routes.js';
|
||||
import PageLoader from 'components/Loading/PageLoader';
|
||||
|
||||
import {
|
||||
ArgonLogoDark,
|
||||
ArgonLogoLight,
|
||||
ChakraLogoDark,
|
||||
ChakraLogoLight,
|
||||
ArgonLogoMinifiedDark,
|
||||
ArgonLogoMinifiedLight
|
||||
} from 'components/Icons/Icons';
|
||||
// Custom Chakra theme
|
||||
export default function Dashboard(props) {
|
||||
const { ...rest } = props;
|
||||
// states and functions
|
||||
const [ fixed, setFixed ] = useState(false);
|
||||
const [ toggleSidebar, setToggleSidebar ] = useState(false);
|
||||
const [ sidebarWidth, setSidebarWidth ] = useState(275);
|
||||
// functions for changing the states from components
|
||||
const getRoute = () => {
|
||||
return window.location.pathname !== '/admin/full-screen-maps';
|
||||
};
|
||||
const getActiveRoute = (routes) => {
|
||||
let activeRoute = 'Default Brand Text';
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
if (routes[i].collapse) {
|
||||
let collapseActiveRoute = getActiveRoute(routes[i].items);
|
||||
if (collapseActiveRoute !== activeRoute) {
|
||||
return collapseActiveRoute;
|
||||
}
|
||||
} else if (routes[i].category) {
|
||||
let categoryActiveRoute = getActiveRoute(routes[i].items);
|
||||
if (categoryActiveRoute !== activeRoute) {
|
||||
return categoryActiveRoute;
|
||||
}
|
||||
} else {
|
||||
if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
|
||||
return routes[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return activeRoute;
|
||||
};
|
||||
const getActiveNavbar = (routes) => {
|
||||
let activeNavbar = false;
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
if (routes[i].collapse) {
|
||||
let collapseActiveNavbar = getActiveNavbar(routes[i].items);
|
||||
if (collapseActiveNavbar !== activeNavbar) {
|
||||
return collapseActiveNavbar;
|
||||
}
|
||||
} else if (routes[i].category) {
|
||||
let categoryActiveNavbar = getActiveNavbar(routes[i].items);
|
||||
if (categoryActiveNavbar !== activeNavbar) {
|
||||
return categoryActiveNavbar;
|
||||
}
|
||||
} else {
|
||||
if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
|
||||
return routes[i].secondaryNavbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
return activeNavbar;
|
||||
};
|
||||
const getRoutes = (routes) => {
|
||||
return routes.map((route, key) => {
|
||||
if (route.layout === '/admin') {
|
||||
// ⚡ 懒加载组件需要包裹在 Suspense 中
|
||||
const Component = route.component;
|
||||
return (
|
||||
<Route
|
||||
path={route.path}
|
||||
element={
|
||||
<Suspense fallback={<PageLoader message="加载中..." />}>
|
||||
<Component />
|
||||
</Suspense>
|
||||
}
|
||||
key={key}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (route.collapse) {
|
||||
return getRoutes(route.items);
|
||||
}
|
||||
if (route.category) {
|
||||
return getRoutes(route.items);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
let bgBoxHeight = '40vh';
|
||||
let bgBoxColor = useColorModeValue('blue.500', 'navy.900');
|
||||
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const { colorMode } = useColorMode();
|
||||
document.documentElement.dir = 'ltr';
|
||||
document.documentElement.layout = 'admin';
|
||||
// Chakra Color Mode
|
||||
return (
|
||||
<Box>
|
||||
<SidebarContext.Provider
|
||||
value={{
|
||||
sidebarWidth,
|
||||
setSidebarWidth,
|
||||
toggleSidebar,
|
||||
setToggleSidebar
|
||||
}}>
|
||||
<Box minH={bgBoxHeight} h='100% !important' w='100%' position='absolute' bg={bgBoxColor} top='0' />
|
||||
<Sidebar
|
||||
routes={routes}
|
||||
logo={
|
||||
sidebarWidth === 275 ? (
|
||||
<Stack direction='row' spacing='12px' align='center' justify='center'>
|
||||
{colorMode === 'dark' ? (
|
||||
<ArgonLogoLight w='74px' h='27px' />
|
||||
) : (
|
||||
<ArgonLogoDark w='74px' h='27px' />
|
||||
)}
|
||||
<Box w='1px' h='20px' bg={colorMode === 'dark' ? 'white' : 'gray.700'} />
|
||||
{colorMode === 'dark' ? (
|
||||
<ChakraLogoLight w='82px' h='21px' />
|
||||
) : (
|
||||
<ChakraLogoDark w='82px' h='21px' />
|
||||
)}
|
||||
</Stack>
|
||||
) : colorMode === 'light' ? (
|
||||
<ArgonLogoMinifiedDark w='36px' h='36px' />
|
||||
) : (
|
||||
<ArgonLogoMinifiedLight w='36px' h='36px' />
|
||||
)
|
||||
}
|
||||
display='none'
|
||||
{...rest}
|
||||
/>
|
||||
<MainPanel
|
||||
w={{
|
||||
base: '100%',
|
||||
xl: `calc(100% - ${sidebarWidth}px)`
|
||||
}}>
|
||||
<Portal>
|
||||
<Box>
|
||||
<AdminNavbar
|
||||
onOpen={onOpen}
|
||||
logoText={'Argon Dashboard Chakra PRO'}
|
||||
brandText={getActiveRoute(routes)}
|
||||
secondary={getActiveNavbar(routes)}
|
||||
fixed={fixed}
|
||||
{...rest}
|
||||
/>
|
||||
</Box>
|
||||
</Portal>
|
||||
|
||||
{getRoute() ? (
|
||||
<PanelContent>
|
||||
<PanelContainer>
|
||||
<Routes>
|
||||
{getRoutes(routes)}
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to="/admin/dashboard/default" replace />}
|
||||
/>
|
||||
</Routes>
|
||||
</PanelContainer>
|
||||
</PanelContent>
|
||||
) : null}
|
||||
<Box>
|
||||
<Footer />
|
||||
</Box>
|
||||
<Portal>
|
||||
<Box>
|
||||
<FixedPlugin fixed={fixed} onOpen={onOpen} />
|
||||
</Box>
|
||||
</Portal>
|
||||
<Configurator
|
||||
secondary={getActiveNavbar(routes)}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
isChecked={fixed}
|
||||
onSwitch={(value) => {
|
||||
setFixed(value);
|
||||
}}
|
||||
/>
|
||||
</MainPanel>
|
||||
</SidebarContext.Provider>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,257 +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 {
|
||||
Portal,
|
||||
Box,
|
||||
useColorMode,
|
||||
Stack,
|
||||
useDisclosure,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import Configurator from "components/Configurator/Configurator";
|
||||
import FixedPlugin from "components/FixedPlugin/FixedPlugin";
|
||||
import Footer from "components/Footer/Footer.js";
|
||||
// Custom components
|
||||
import MainPanel from "components/Layout/MainPanel";
|
||||
import PanelContainer from "components/Layout/PanelContainer";
|
||||
import PanelContent from "components/Layout/PanelContent";
|
||||
// Layout components
|
||||
import AdminNavbar from "components/Navbars/AdminNavbar.js";
|
||||
import Sidebar from "components/Sidebar/Sidebar.js";
|
||||
import { SidebarContext } from "contexts/SidebarContext";
|
||||
import React, { useState, Suspense } from "react";
|
||||
import "react-quill/dist/quill.snow.css"; // ES6
|
||||
|
||||
import { Route, Routes, Navigate } from "react-router-dom";
|
||||
import routes from "routes.js";
|
||||
import PageLoader from "components/Loading/PageLoader";
|
||||
|
||||
import {
|
||||
ArgonLogoDark,
|
||||
ArgonLogoLight,
|
||||
ChakraLogoDark,
|
||||
ChakraLogoLight,
|
||||
ArgonLogoMinifiedDark,
|
||||
ArgonLogoMinifiedLight,
|
||||
} from "components/Icons/Icons";
|
||||
|
||||
import { RtlProvider } from "components/RTLProvider/RTLProvider";
|
||||
export default function Dashboard(props) {
|
||||
const { ...rest } = props;
|
||||
// states and functions
|
||||
const [sidebarVariant, setSidebarVariant] = useState("transparent");
|
||||
const [fixed, setFixed] = useState(false);
|
||||
const [toggleSidebar, setToggleSidebar] = useState(false);
|
||||
const [sidebarWidth, setSidebarWidth] = useState(275);
|
||||
// ref for main panel div
|
||||
const mainPanel = React.createRef();
|
||||
const { colorMode } = useColorMode();
|
||||
// functions for changing the states from components
|
||||
const getRoute = () => {
|
||||
return window.location.pathname !== "/rtl/full-screen-maps";
|
||||
};
|
||||
const getActiveRoute = (routes) => {
|
||||
let activeRoute = "Default Brand Text";
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
if (routes[i].collapse) {
|
||||
let collapseActiveRoute = getActiveRoute(routes[i].items);
|
||||
if (collapseActiveRoute !== activeRoute) {
|
||||
return collapseActiveRoute;
|
||||
}
|
||||
} else if (routes[i].category) {
|
||||
let categoryActiveRoute = getActiveRoute(routes[i].items);
|
||||
if (categoryActiveRoute !== activeRoute) {
|
||||
return categoryActiveRoute;
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
|
||||
) {
|
||||
return routes[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return activeRoute;
|
||||
};
|
||||
// This changes navbar state(fixed or not)
|
||||
const getActiveNavbar = (routes) => {
|
||||
let activeNavbar = false;
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
if (routes[i].category) {
|
||||
let categoryActiveNavbar = getActiveNavbar(routes[i].items);
|
||||
if (categoryActiveNavbar !== activeNavbar) {
|
||||
return categoryActiveNavbar;
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
|
||||
) {
|
||||
if (routes[i].secondaryNavbar) {
|
||||
return routes[i].secondaryNavbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return activeNavbar;
|
||||
};
|
||||
const getRoutes = (routes) => {
|
||||
return routes.map((route, key) => {
|
||||
if (route.layout === "/rtl") {
|
||||
const Component = route.component;
|
||||
return (
|
||||
<Route
|
||||
path={route.path}
|
||||
element={
|
||||
<Suspense fallback={<PageLoader message="加载中..." />}>
|
||||
<Component />
|
||||
</Suspense>
|
||||
}
|
||||
key={key}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (route.collapse) {
|
||||
return getRoutes(route.items);
|
||||
}
|
||||
if (route.category) {
|
||||
return getRoutes(route.items);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
document.body.style.backgroundColor = useColorModeValue(
|
||||
"gray.50",
|
||||
"gray.800"
|
||||
);
|
||||
document.documentElement.dir = "rtl";
|
||||
document.documentElement.layout = "rtl";
|
||||
let bgBoxHeight = "40vh";
|
||||
let bgBoxColor = useColorModeValue("blue.500", "navy.900");
|
||||
|
||||
// Chakra Color Mode
|
||||
return (
|
||||
<>
|
||||
<RtlProvider>
|
||||
<SidebarContext.Provider
|
||||
value={{
|
||||
sidebarWidth,
|
||||
setSidebarWidth,
|
||||
toggleSidebar,
|
||||
setToggleSidebar,
|
||||
}}>
|
||||
<Box
|
||||
minH={bgBoxHeight}
|
||||
h='100% !important'
|
||||
w='100%'
|
||||
position='absolute'
|
||||
bg={bgBoxColor}
|
||||
top='0'
|
||||
/>
|
||||
<Sidebar
|
||||
routes={routes}
|
||||
logo={
|
||||
sidebarWidth === 275 ? (
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing='12px'
|
||||
align='center'
|
||||
justify='center'>
|
||||
{colorMode === "dark" ? (
|
||||
<ArgonLogoLight w='74px' h='27px' />
|
||||
) : (
|
||||
<ArgonLogoDark w='74px' h='27px' />
|
||||
)}
|
||||
<Box
|
||||
w='1px'
|
||||
h='20px'
|
||||
bg={colorMode === "dark" ? "white" : "gray.700"}
|
||||
/>
|
||||
{colorMode === "dark" ? (
|
||||
<ChakraLogoLight w='82px' h='21px' />
|
||||
) : (
|
||||
<ChakraLogoDark w='82px' h='21px' />
|
||||
)}
|
||||
</Stack>
|
||||
) : colorMode === "light" ? (
|
||||
<ArgonLogoMinifiedDark w='36px' h='36px' />
|
||||
) : (
|
||||
<ArgonLogoMinifiedLight w='36px' h='36px' />
|
||||
)
|
||||
}
|
||||
display='none'
|
||||
{...rest}
|
||||
/>
|
||||
<MainPanel
|
||||
ref={mainPanel}
|
||||
w={{
|
||||
base: "100%",
|
||||
xl: `calc(100% - ${sidebarWidth}px)`,
|
||||
}}
|
||||
variant='rtl'>
|
||||
<Portal>
|
||||
<Box>
|
||||
<AdminNavbar
|
||||
onOpen={onOpen}
|
||||
logoText={"Argon Dashboard Chakra PRO"}
|
||||
brandText={getActiveRoute(routes)}
|
||||
secondary={getActiveNavbar(routes)}
|
||||
fixed={fixed}
|
||||
{...rest}
|
||||
/>
|
||||
</Box>
|
||||
</Portal>
|
||||
|
||||
{getRoute() ? (
|
||||
<PanelContent>
|
||||
<PanelContainer>
|
||||
<Routes>
|
||||
{getRoutes(routes)}
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to="/admin/dashboard/default" replace />}
|
||||
/>
|
||||
</Routes>
|
||||
</PanelContainer>
|
||||
</PanelContent>
|
||||
) : null}
|
||||
<Box>
|
||||
<Footer />
|
||||
</Box>
|
||||
<Portal>
|
||||
<Box>
|
||||
<FixedPlugin fixed={fixed} onOpen={onOpen} />
|
||||
</Box>
|
||||
</Portal>
|
||||
<Configurator
|
||||
secondary={getActiveNavbar(routes)}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
isChecked={fixed}
|
||||
onSwitch={(value) => {
|
||||
setFixed(value);
|
||||
}}
|
||||
/>
|
||||
</MainPanel>
|
||||
</SidebarContext.Provider>
|
||||
</RtlProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
606
src/routes.js
606
src/routes.js
@@ -15,609 +15,13 @@
|
||||
|
||||
*/
|
||||
|
||||
// ⚡ 使用 React.lazy() 实现路由懒加载
|
||||
// 按需加载组件，大幅减少初始 JS 包大小
|
||||
import React from "react";
|
||||
import {
|
||||
CartIcon,
|
||||
DocumentIcon,
|
||||
HomeIcon,
|
||||
PersonIcon,
|
||||
StatsIcon,
|
||||
} from "components/Icons/Icons";
|
||||
|
||||
// ⚡ 懒加载所有页面组件
|
||||
const Calendar = React.lazy(() => import("views/Applications/Calendar"));
|
||||
const DataTables = React.lazy(() => import("views/Applications/DataTables"));
|
||||
const Kanban = React.lazy(() => import("views/Applications/Kanban.js"));
|
||||
const Wizard = React.lazy(() => import("views/Applications/Wizard.js"));
|
||||
const SignInBasic = React.lazy(() => import("views/Authentication/SignIn/SignInBasic.js"));
|
||||
const SignInCover = React.lazy(() => import("views/Authentication/SignIn/SignInCover.js"));
|
||||
const SignInIllustration = React.lazy(() => import("views/Authentication/SignIn/SignInIllustration.js"));
|
||||
const LockBasic = React.lazy(() => import("views/Authentication/Lock/LockBasic.js"));
|
||||
const LockCover = React.lazy(() => import("views/Authentication/Lock/LockCover.js"));
|
||||
const LockIllustration = React.lazy(() => import("views/Authentication/Lock/LockIllustration.js"));
|
||||
const ResetBasic = React.lazy(() => import("views/Authentication/Reset/ResetBasic.js"));
|
||||
const ResetCover = React.lazy(() => import("views/Authentication/Reset/ResetCover.js"));
|
||||
const ResetIllustration = React.lazy(() => import("views/Authentication/Reset/ResetIllustration.js"));
|
||||
const VerificationBasic = React.lazy(() => import("views/Authentication/Verification/VerificationBasic.js"));
|
||||
const VerificationCover = React.lazy(() => import("views/Authentication/Verification/VerificationCover.js"));
|
||||
const VerificationIllustration = React.lazy(() => import("views/Authentication/Verification/VerificationIllustration.js"));
|
||||
const SignUpBasic = React.lazy(() => import("views/Authentication/SignUp/SignUpBasic.js"));
|
||||
const SignUpCover = React.lazy(() => import("views/Authentication/SignUp/SignUpCover.js"));
|
||||
const SignUpIllustration = React.lazy(() => import("views/Authentication/SignUp/SignUpIllustration.js"));
|
||||
const Automotive = React.lazy(() => import("views/Dashboard/Automotive"));
|
||||
const CRM = React.lazy(() => import("views/Dashboard/CRM.js"));
|
||||
const Default = React.lazy(() => import("views/Dashboard/Default.js"));
|
||||
const Landing = React.lazy(() => import("views/Dashboard/Landing.js"));
|
||||
const OrderDetails = React.lazy(() => import("views/Ecommerce/Orders/OrderDetails"));
|
||||
const OrderList = React.lazy(() => import("views/Ecommerce/Orders/OrderList"));
|
||||
const EditProduct = React.lazy(() => import("views/Ecommerce/Products/EditProduct"));
|
||||
const NewProduct = React.lazy(() => import("views/Ecommerce/Products/NewProduct"));
|
||||
const ProductPage = React.lazy(() => import("views/Ecommerce/Products/ProductPage"));
|
||||
const Billing = React.lazy(() => import("views/Pages/Account/Billing.js"));
|
||||
const Subscription = React.lazy(() => import("views/Pages/Account/Subscription.js"));
|
||||
const Invoice = React.lazy(() => import("views/Pages/Account/Invoice.js"));
|
||||
const Settings = React.lazy(() => import("views/Pages/Account/Settings.js"));
|
||||
const Alerts = React.lazy(() => import("views/Pages/Alerts"));
|
||||
const Charts = React.lazy(() => import("views/Pages/Charts.js"));
|
||||
const Pricing = React.lazy(() => import("views/Pages/Pricing.js"));
|
||||
const Overview = React.lazy(() => import("views/Pages/Profile/Overview.js"));
|
||||
const Projects = React.lazy(() => import("views/Pages/Profile/Projects.js"));
|
||||
const Teams = React.lazy(() => import("views/Pages/Profile/Teams.js"));
|
||||
const General = React.lazy(() => import("views/Pages/Projects/General.js"));
|
||||
const Timeline = React.lazy(() => import("views/Pages/Projects/Timeline.js"));
|
||||
const RTLPage = React.lazy(() => import("views/Pages/RTLPage.js"));
|
||||
const NewUser = React.lazy(() => import("views/Pages/Users/NewUser.js"));
|
||||
const Reports = React.lazy(() => import("views/Pages/Users/Reports.js"));
|
||||
const Widgets = React.lazy(() => import("views/Pages/Widgets.js"));
|
||||
const SmartHome = React.lazy(() => import("views/Dashboard/SmartHome"));
|
||||
const ConceptCenter = React.lazy(() => import("views/Concept"));
|
||||
const ProfilePage = React.lazy(() => import("views/Profile/ProfilePage"));
|
||||
const SettingsPage = React.lazy(() => import("views/Settings/SettingsPage"));
|
||||
const LimitAnalyse = React.lazy(() => import("views/LimitAnalyse"));
|
||||
const Community = React.lazy(() => import("views/Community"));
|
||||
const ForecastReport = React.lazy(() => import("views/Company/ForecastReport"));
|
||||
const FinancialPanorama = React.lazy(() => import("views/Company/FinancialPanorama"));
|
||||
const CompanyIndex = React.lazy(() => import("views/Company"));
|
||||
const MarketDataView = React.lazy(() => import("views/Company/MarketDataView"));
|
||||
const StockOverview = React.lazy(() => import("views/StockOverview"));
|
||||
const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
|
||||
const PrivacyPolicy = React.lazy(() => import("views/Pages/PrivacyPolicy"));
|
||||
const UserAgreement = React.lazy(() => import("views/Pages/UserAgreement"));
|
||||
const WechatCallback = React.lazy(() => import("views/Pages/WechatCallback"));
|
||||
const dashRoutes = [
|
||||
{
|
||||
name: "Dashboard",
|
||||
path: "/dashboard",
|
||||
icon: <HomeIcon color="inherit" />,
|
||||
authIcon: <HomeIcon color="inherit" />,
|
||||
collapse: true,
|
||||
items: [
|
||||
{
|
||||
name: "Landing Page",
|
||||
path: "/dashboard/landing",
|
||||
component: Landing,
|
||||
layout: "/landing",
|
||||
},
|
||||
{
|
||||
name: "Default",
|
||||
path: "/dashboard/default",
|
||||
component: Default,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Automotive",
|
||||
path: "/dashboard/automotive",
|
||||
component: Automotive,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Smart Home",
|
||||
path: "/dashboard/smart-home",
|
||||
component: SmartHome,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "CRM",
|
||||
path: "/dashboard/crm",
|
||||
component: CRM,
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "股票分析",
|
||||
path: "/stock-analysis",
|
||||
icon: <StatsIcon color="inherit" />,
|
||||
authIcon: <StatsIcon color="inherit" />,
|
||||
collapse: true,
|
||||
items: [
|
||||
{
|
||||
name: "股票概览",
|
||||
path: "/stock-analysis/overview",
|
||||
component: StockOverview,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "个股信息",
|
||||
path: "/stock-analysis/company",
|
||||
component: CompanyIndex,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "股票行情",
|
||||
path: "/stock-analysis/market-data",
|
||||
component: MarketDataView,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "涨停分析",
|
||||
path: "/stock-analysis/limit-analyse",
|
||||
component: LimitAnalyse,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "盈利预测报表",
|
||||
path: "/stock-analysis/forecast-report",
|
||||
component: ForecastReport,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "盈利预测报表",
|
||||
path: "/stock-analysis/Financial-report",
|
||||
component: FinancialPanorama,
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "概念中心",
|
||||
path: "/concepts",
|
||||
icon: <StatsIcon color="inherit" />, // 或者使用其他图标
|
||||
authIcon: <StatsIcon color="inherit" />,
|
||||
collapse: false,
|
||||
component: ConceptCenter,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "事件社区",
|
||||
path: "/community",
|
||||
icon: <StatsIcon color="inherit" />,
|
||||
authIcon: <StatsIcon color="inherit" />,
|
||||
collapse: false,
|
||||
component: Community,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "模拟盘交易",
|
||||
path: "/trading-simulation",
|
||||
icon: <CartIcon color="inherit" />,
|
||||
authIcon: <CartIcon color="inherit" />,
|
||||
collapse: false,
|
||||
component: TradingSimulation,
|
||||
layout: "/home",
|
||||
},
|
||||
{
|
||||
name: "个人资料",
|
||||
path: "/profile",
|
||||
icon: <PersonIcon color="inherit" />,
|
||||
component: ProfilePage,
|
||||
layout: "/admin",
|
||||
invisible: true, // 不在侧边栏显示
|
||||
},
|
||||
{
|
||||
name: "账户设置",
|
||||
path: "/settings",
|
||||
icon: <StatsIcon color="inherit" />,
|
||||
component: SettingsPage,
|
||||
layout: "/admin",
|
||||
invisible: true, // 不在侧边栏显示
|
||||
},
|
||||
{
|
||||
name: "隐私政策",
|
||||
path: "/privacy-policy",
|
||||
icon: <DocumentIcon color="inherit" />,
|
||||
component: PrivacyPolicy,
|
||||
layout: "/home",
|
||||
invisible: true, // 不在侧边栏显示
|
||||
},
|
||||
{
|
||||
name: "用户协议",
|
||||
path: "/user-agreement",
|
||||
icon: <DocumentIcon color="inherit" />,
|
||||
component: UserAgreement,
|
||||
layout: "/home",
|
||||
invisible: true, // 不在侧边栏显示
|
||||
},
|
||||
{
|
||||
name: "微信授权回调",
|
||||
path: "/wechat-callback",
|
||||
icon: <DocumentIcon color="inherit" />,
|
||||
component: WechatCallback,
|
||||
layout: "/home",
|
||||
invisible: true, // 不在侧边栏显示
|
||||
},
|
||||
{
|
||||
name: "PAGES",
|
||||
category: "pages",
|
||||
items: [
|
||||
{
|
||||
name: "Pages",
|
||||
path: "/pages",
|
||||
collapse: true,
|
||||
icon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Profile",
|
||||
path: "/profile",
|
||||
collapse: true,
|
||||
authIcon: <HomeIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Profile Overview",
|
||||
secondaryNavbar: true,
|
||||
path: "/pages/profile/overview",
|
||||
component: Overview,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Teams",
|
||||
secondaryNavbar: true,
|
||||
path: "/pages/profile/teams",
|
||||
component: Teams,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "All Projects",
|
||||
secondaryNavbar: true,
|
||||
path: "/pages/profile/profile-projects",
|
||||
component: Projects,
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Users",
|
||||
path: "/users",
|
||||
collapse: true,
|
||||
authIcon: <PersonIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Reports",
|
||||
path: "/pages/users/reports",
|
||||
component: Reports,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "New User",
|
||||
path: "/pages/users/new-user",
|
||||
component: NewUser,
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Account",
|
||||
path: "/account",
|
||||
collapse: true,
|
||||
authIcon: <PersonIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Settings",
|
||||
path: "/pages/account/settings",
|
||||
component: Settings,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Billing",
|
||||
component: Billing,
|
||||
path: "/pages/account/billing",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Subscription",
|
||||
component: Subscription,
|
||||
path: "/pages/account/subscription",
|
||||
layout: "/home",
|
||||
},
|
||||
{
|
||||
name: "Invoice",
|
||||
component: Invoice,
|
||||
path: "/pages/account/invoice",
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
path: "/projects",
|
||||
collapse: true,
|
||||
authIcon: <StatsIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "General",
|
||||
path: "/pages/projects/general",
|
||||
component: General,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Timeline",
|
||||
path: "/pages/projects/timeline",
|
||||
component: Timeline,
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Pricing Page",
|
||||
component: Pricing,
|
||||
path: "/pages/pricing-page",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "RTL",
|
||||
component: RTLPage,
|
||||
path: "/pages/rtl-support-page",
|
||||
layout: "/rtl",
|
||||
},
|
||||
{
|
||||
name: "Widgets",
|
||||
component: Widgets,
|
||||
path: "/pages/widgets",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Charts",
|
||||
component: Charts,
|
||||
path: "/pages/charts",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Alerts",
|
||||
path: "/pages/alerts",
|
||||
component: Alerts,
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Applications",
|
||||
path: "/applications",
|
||||
icon: <StatsIcon color="inherit" />,
|
||||
collapse: true,
|
||||
items: [
|
||||
{
|
||||
name: "Kanban",
|
||||
component: Kanban,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
path: "/applications/kanban",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Wizard",
|
||||
component: Wizard,
|
||||
authIcon: <CartIcon color="inherit" />,
|
||||
path: "/applications/wizard",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Data Tables",
|
||||
path: "/applications/data-tables",
|
||||
authIcon: <PersonIcon color="inherit" />,
|
||||
component: DataTables,
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Calendar",
|
||||
component: Calendar,
|
||||
authIcon: <StatsIcon color="inherit" />,
|
||||
path: "/applications/calendar",
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Ecommerce",
|
||||
path: "/ecommerce",
|
||||
icon: <CartIcon color="inherit" />,
|
||||
collapse: true,
|
||||
items: [
|
||||
{
|
||||
name: "Products",
|
||||
path: "/products",
|
||||
collapse: true,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "New Product",
|
||||
component: NewProduct,
|
||||
secondaryNavbar: true,
|
||||
path: "/ecommerce/products/new-product",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Edit Product",
|
||||
component: EditProduct,
|
||||
path: "/ecommerce/products/edit-product",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Product Page",
|
||||
component: ProductPage,
|
||||
path: "/ecommerce/products/product-page",
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Orders",
|
||||
path: "/orders",
|
||||
collapse: true,
|
||||
authIcon: <StatsIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Order List",
|
||||
component: OrderList,
|
||||
path: "/ecommerce/orders/order-list",
|
||||
layout: "/admin",
|
||||
},
|
||||
{
|
||||
name: "Order Details",
|
||||
component: OrderDetails,
|
||||
path: "/ecommerce/orders/order-details",
|
||||
layout: "/admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Authentication",
|
||||
path: "/authentication",
|
||||
icon: <PersonIcon color="inherit" />,
|
||||
collapse: true,
|
||||
items: [
|
||||
{
|
||||
name: "Sign In",
|
||||
path: "/authentication/sign-in",
|
||||
collapse: true,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Basic",
|
||||
component: SignInBasic,
|
||||
path: "/authentication/sign-in/basic",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
component: SignInCover,
|
||||
path: "/authentication/sign-in/cover",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
component: SignInIllustration,
|
||||
secondaryNavbar: true,
|
||||
path: "/authentication/sign-in/illustration",
|
||||
layout: "/auth",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Sign Up",
|
||||
path: "/authentication/sign-up",
|
||||
collapse: true,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Basic",
|
||||
component: SignUpBasic,
|
||||
path: "/authentication/sign-up/basic",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
component: SignUpCover,
|
||||
path: "/authentication/sign-up/cover",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
secondaryNavbar: true,
|
||||
component: SignUpIllustration,
|
||||
path: "/authentication/sign-up/illustration",
|
||||
layout: "/auth",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Reset password",
|
||||
path: "/authentication/reset",
|
||||
collapse: true,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Basic",
|
||||
component: ResetBasic,
|
||||
path: "/authentication/reset/basic",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
component: ResetCover,
|
||||
path: "/authentication/reset/cover",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
secondaryNavbar: true,
|
||||
component: ResetIllustration,
|
||||
path: "/authentication/reset/illustration",
|
||||
layout: "/auth",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Lock",
|
||||
path: "/authentication/lock",
|
||||
collapse: true,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Basic",
|
||||
component: LockBasic,
|
||||
path: "/authentication/lock/basic",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
component: LockCover,
|
||||
path: "/authentication/lock/cover",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
secondaryNavbar: true,
|
||||
component: LockIllustration,
|
||||
path: "/authentication/lock/illustration",
|
||||
layout: "/auth",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "2-Step Verification",
|
||||
path: "/authentication/verification",
|
||||
collapse: true,
|
||||
authIcon: <DocumentIcon color="inherit" />,
|
||||
items: [
|
||||
{
|
||||
name: "Basic",
|
||||
component: VerificationBasic,
|
||||
path: "/authentication/verification/basic",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
component: VerificationCover,
|
||||
path: "/authentication/verification/cover",
|
||||
layout: "/auth",
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
secondaryNavbar: true,
|
||||
component: VerificationIllustration,
|
||||
path: "/authentication/verification/illustration",
|
||||
layout: "/auth",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// ⚠️ Admin 布局已移除
|
||||
// 实际路由配置现在在 /src/App.js 中
|
||||
// 此文件保留仅为兼容可能的旧引用
|
||||
|
||||
];
|
||||
// 导出空数组以保持向后兼容
|
||||
const dashRoutes = [];
|
||||
|
||||
export default dashRoutes;
|
||||
|
||||
@@ -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