├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── README_zh.MD ├── app └── next │ ├── .gitignore │ ├── README.md │ ├── components │ ├── alert.tsx │ ├── box.tsx │ ├── divider │ │ └── index.tsx │ ├── flex.tsx │ ├── form │ │ └── index.tsx │ ├── index.tsx │ ├── spotlight │ │ └── index.tsx │ └── toast │ │ ├── index.tsx │ │ ├── provider.tsx │ │ ├── toast.tsx │ │ └── useToast.tsx │ ├── constant │ ├── routes │ │ ├── components.tsx │ │ ├── e-commerce.tsx │ │ ├── index.tsx │ │ └── site.tsx │ └── theme.tsx │ ├── icons │ ├── close.tsx │ ├── facebook.tsx │ ├── github.tsx │ ├── google.tsx │ ├── index.tsx │ ├── moon.tsx │ ├── sun.tsx │ └── twitter.tsx │ ├── layout │ ├── avatar-bar │ │ ├── icon.tsx │ │ ├── index.tsx │ │ ├── mode.tsx │ │ ├── notification.tsx │ │ └── user.tsx │ ├── index.tsx │ ├── layout │ │ ├── index.tsx │ │ └── upgrade-manage.tsx │ ├── navbar │ │ ├── brand.tsx │ │ ├── category.tsx │ │ ├── collapse.tsx │ │ ├── index.tsx │ │ ├── logo.tsx │ │ └── menu.tsx │ └── settings │ │ └── index.tsx │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── 404 │ │ └── index.tsx │ ├── _app.tsx │ ├── _document.tsx │ ├── api │ │ └── hello.ts │ ├── changelog │ │ └── index.tsx │ ├── components │ │ └── pro-table │ │ │ └── index.tsx │ ├── dashboard │ │ └── index.tsx │ ├── index.tsx │ └── login │ │ └── index.tsx │ ├── public │ ├── favicon.ico │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg │ ├── styles │ └── global.css │ ├── tsconfig.json │ └── views │ ├── 404 │ ├── index.tsx │ └── result.tsx │ ├── dashboard │ ├── charts │ │ ├── config.ts │ │ ├── fill-line.tsx │ │ ├── group-line.tsx │ │ ├── line.tsx │ │ ├── pie.tsx │ │ ├── polar-area.tsx │ │ ├── radar.tsx │ │ └── vertical-bar.tsx │ ├── data-card.tsx │ ├── data-table.tsx │ ├── index.tsx │ ├── profile.tsx │ ├── quick-entry.tsx │ └── swiper.tsx │ ├── home │ └── index.tsx │ ├── login │ ├── description.tsx │ ├── form.tsx │ ├── index.tsx │ ├── other.tsx │ └── switch.tsx │ ├── pro-card │ ├── base-card.tsx │ └── index.tsx │ ├── pro-table │ ├── index.tsx │ ├── search.tsx │ └── toolbox.tsx │ └── theme │ └── index.tsx ├── package.json └── pnpm-workspace.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | # node package download 2 | **/node_modules 3 | 4 | # macos 5 | .DS_Store 6 | 7 | # production 8 | **/dist 9 | 10 | # ssr production 11 | **/dist-ssr 12 | **/.next 13 | **/.umi 14 | **/.umi-production 15 | 16 | # local env 17 | *.local 18 | 19 | 20 | # pnpm package npmrc 21 | pnpm-lock.yaml 22 | .pnpm-debug.log 23 | 24 | # config 25 | **/moyu.config.js 26 | 27 | # eslint 28 | .eslintcache 29 | .vscode/settings.json 30 | 31 | # turbo 32 | **/.turbo 33 | 34 | # env 35 | **/*.env -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangly19/nextui-design-pro/e8a4fc583430f6756c470a5144e675bb6c51cf94/.npmrc -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Wang Fanghua 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 | Logo 7 | 8 | 9 |

NextUI Design Pro

10 | The best practices for React NextUI + Formik + zustand 🚀
11 | Build comfortable web applications 12 |

13 |
14 | Demo » 15 | 16 |

17 | image 18 |
19 |
20 | image 21 |
22 | 23 | ## Features 24 | 25 | - **Charts:** react-chartjs-2 & chartjs 26 | 27 | 28 | ...edit 29 | 30 | 31 |

(BackTop)

32 | 33 | ## Install 34 | 35 | 36 | ```ts 37 | // git repo 38 | git clone https://github.com/wangly19/nextui-design-pro.git 39 | 40 | // go to projectDir 41 | cd nextui-design-pro/app/next 42 | 43 | // install package.json 44 | pnpm install or pnpm i 45 | 46 | // run 47 | pnpm run dev 48 | 49 | // build 50 | pnpm run build 51 | ``` 52 | 53 | next version edit... 54 | -------------------------------------------------------------------------------- /README_zh.MD: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 | Logo 7 | 8 | 9 |

NextUI Design Pro

10 | React NextUI + Formik + zustand 的最佳实践🚀
11 | 构建舒适的 Web 应用程序 12 |

13 |
14 | ShowCase » 15 | 16 |

17 | iShot2023-01-11_16 31 16 18 | 19 |
20 | iShot2023-01-11_16 39 18 21 |
22 | 23 | ## 特性 24 | 25 | - 可用于商业的进阶组件 26 | 27 | ...edit 28 | 29 |

(BackTop)

30 | 31 | ## 安装 32 | 33 | ```ts 34 | // git repo 35 | git clone https://github.com/wangly19/nextui-design-pro.git 36 | 37 | // go to projectDir 38 | cd nextui-design-pro/app/next 39 | 40 | // install package.json 41 | pnpm install or pnpm i 42 | 43 | // run 44 | pnpm run dev 45 | 46 | // build 47 | pnpm run build 48 | ``` 49 | 50 | next version edit... 51 | -------------------------------------------------------------------------------- /app/next/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /app/next/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /app/next/components/alert.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Flex, FlexBox } from "@/components"; 3 | import { Avatar, Button } from "@nextui-org/react"; 4 | import { ShieldDone, Delete } from "react-iconly"; 5 | import { useBoolean } from "react-use"; 6 | import { Close } from "icons"; 7 | 8 | export interface AlertProps { 9 | type?: keyof typeof typeCssMap; 10 | showClose?: boolean; 11 | visible?: boolean; 12 | onVisibleChange?: (newState: boolean) => void; 13 | children?: React.ReactNode; 14 | } 15 | 16 | const typeCssMap = { 17 | success: "$green300", 18 | primary: "$blue300", 19 | warning: "$yellow300", 20 | error: "$red300", 21 | }; 22 | 23 | export const Alert: React.FC = ({ 24 | type = "primary", 25 | visible, 26 | onVisibleChange, 27 | children, 28 | }) => { 29 | const [show, toggle] = useBoolean(true); 30 | 31 | /** close alert. */ 32 | const handleCloseAlert = () => { 33 | onVisibleChange && onVisibleChange(false); 34 | setTimeout(() => toggle(false), 200); 35 | }; 36 | 37 | // init alert open state. 38 | React.useEffect(() => { 39 | if (typeof visible === "boolean") { 40 | toggle(visible); 41 | } 42 | }, [visible]); 43 | 44 | if (!show) { 45 | return null; 46 | } 47 | 48 | return ( 49 | 57 | 67 | } 68 | /> 69 | 70 | {children || undefined} 71 | 72 | 75 | 76 | ); 77 | }; 78 | -------------------------------------------------------------------------------- /app/next/components/box.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from "@nextui-org/react"; 2 | 3 | export const Box = styled('div') -------------------------------------------------------------------------------- /app/next/components/divider/index.tsx: -------------------------------------------------------------------------------- 1 | import { Row, styled, Text } from "@nextui-org/react"; 2 | import React from "react"; 3 | 4 | export const Divider = styled("hr", { 5 | height: 0, 6 | opacity: 1, 7 | borderImage: "initial", 8 | borderWidth: "0px 0px 1px", 9 | width: "100%", 10 | borderStyle: "solid", 11 | borderColor: "$accents3", 12 | }); 13 | 14 | export const TextDivider: React.FC<{ 15 | text: string; 16 | }> = ({ text }) => { 17 | return ( 18 | 26 | 27 | 33 | {text} 34 | 35 | 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /app/next/components/flex.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { styled } from "@nextui-org/react"; 3 | 4 | export const Flex = styled("div", { 5 | display: "flex", 6 | justifyContent: "flex-start", 7 | alignItems: "center", 8 | }); 9 | 10 | export const FlexBox: React.FC< 11 | { 12 | children?: React.ReactNode; 13 | css?: React.ComponentProps["css"] 14 | } & React.ComponentProps["css"] 15 | > = ({ children, css, ...styledProps }) => { 16 | return {children}; 20 | }; 21 | -------------------------------------------------------------------------------- /app/next/components/form/index.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from "@nextui-org/react"; 2 | 3 | export const Form = styled('form', { 4 | width: '100%' 5 | }) -------------------------------------------------------------------------------- /app/next/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './box' 2 | export * from './flex' 3 | export * from './spotlight' 4 | export * from './toast' 5 | export * from './divider' 6 | export * from './alert' 7 | export * from './form' -------------------------------------------------------------------------------- /app/next/components/spotlight/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Modal, Input, Button } from "@nextui-org/react"; 3 | import { useBoolean } from "react-use"; 4 | 5 | export interface SpotlightInstance { 6 | open: () => void; 7 | } 8 | 9 | export const Spotlight = React.forwardRef( 10 | (props, ref) => { 11 | const [isOpen, toggle] = useBoolean(false); 12 | 13 | React.useImperativeHandle(ref, () => ({ 14 | open: () => toggle(true), 15 | })); 16 | 17 | return ( 18 | 27 | 28 | 30 | 31 | 32 | ); 33 | } 34 | ); 35 | -------------------------------------------------------------------------------- /app/next/components/toast/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './provider' 2 | export * from './useToast' 3 | export * from './toast' -------------------------------------------------------------------------------- /app/next/components/toast/provider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Grid } from "@nextui-org/react"; 3 | import { Toast, ToastWrapper, ToastProps } from "./toast"; 4 | 5 | export interface ToastType extends ToastProps { 6 | uid?: React.Key; 7 | } 8 | 9 | export interface ToastProviderProps { 10 | children: React.ReactNode; 11 | } 12 | 13 | interface ToastContextTypes { 14 | add: (toast: ToastProps) => void | null; 15 | toast: (toast: ToastProps) => void | null; 16 | } 17 | 18 | const onProviderWarn = (_: ToastProps) => { 19 | console.warn(`Warn: You must use useToast in the ToastProvider context.`); 20 | return void 0; 21 | } 22 | 23 | export const ToastContext = React.createContext({ 24 | add: onProviderWarn, 25 | toast: onProviderWarn 26 | }); 27 | 28 | export const ToastProvider: React.FC = (props) => { 29 | const executionQueueRef = React.useRef[]>([]) 30 | const [toasts, setToasts] = React.useState([]); 31 | 32 | const addToastContent = React.useCallback( 33 | (toast: ToastType) => { 34 | const uid = new Date().getTime(); 35 | setToasts((toasts) => [ 36 | ...toasts, 37 | { 38 | ...toast, 39 | uid, 40 | }, 41 | ]); 42 | 43 | const clearFun = setTimeout( 44 | () => setToasts((toasts) => toasts.filter((v) => v.uid !== uid)), 45 | 2500 46 | ); 47 | 48 | /** setTimeout queues */ 49 | executionQueueRef.current.push({ 50 | uid: clearFun 51 | }) 52 | }, 53 | [setToasts] 54 | ); 55 | 56 | const handleClearOpenToast = () => { 57 | 58 | } 59 | 60 | return ( 61 | 62 | {props.children} 63 | {toasts?.length > 0 ? ( 64 | 65 | 66 | {toasts.map(({ uid, ...toastProps }) => ( 67 | 68 | 69 | 70 | ))} 71 | 72 | 73 | ) : null} 74 | 75 | ); 76 | }; 77 | -------------------------------------------------------------------------------- /app/next/components/toast/toast.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Card, styled, Text, useTheme, BadgeProps } from "@nextui-org/react"; 3 | import { Flex } from "components/flex"; 4 | import { Send } from "react-iconly"; 5 | import { useSpring, animated } from "@react-spring/web"; 6 | 7 | export interface ToastProps { 8 | title: string; 9 | description?: string; 10 | type?: 'primary' | 'error' | 'warning'; 11 | /** @default 2000 */ 12 | duration?: number; 13 | icon?: React.ReactNode; 14 | } 15 | 16 | export const ToastWrapper = styled("div", { 17 | dflex: "center", 18 | position: "fixed", 19 | width: "350px", 20 | top: "$15", 21 | right: "$12", 22 | zIndex: "$max", 23 | }); 24 | 25 | export const Toast: React.FC< 26 | ToastProps & { 27 | onClear?: (uid: React.Key) => void; 28 | } 29 | > = (props) => { 30 | const { theme } = useTheme(); 31 | 32 | const springs = useSpring({ 33 | from: { 34 | opacity: 0, 35 | }, 36 | to: { 37 | opacity: 1, 38 | }, 39 | }); 40 | 41 | return ( 42 | 48 | 49 | 50 | 57 | {props.icon ? ( 58 | props.icon 59 | ) : ( 60 | 64 | )} 65 | {props.title} 66 | 67 | {props.description ? ( 68 | 69 | {props.description} 70 | 71 | ) : null} 72 | 73 | 74 | 75 | ); 76 | }; 77 | -------------------------------------------------------------------------------- /app/next/components/toast/useToast.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { ToastContext } from './provider' 3 | 4 | export const useToast = () => { 5 | 6 | const toastContext = React.useContext(ToastContext) 7 | 8 | return ( 9 | toastContext 10 | ) 11 | } -------------------------------------------------------------------------------- /app/next/constant/routes/components.tsx: -------------------------------------------------------------------------------- 1 | import { Home } from "react-iconly"; 2 | 3 | export const componentsRoute = { 4 | path: "/components", 5 | name: "Components", 6 | meta: { 7 | title: "Components", 8 | icon: 9 | }, 10 | children: [ 11 | { 12 | path: "/pro-table", 13 | name: "ProTable", 14 | meta: { 15 | title: "ProTable", 16 | description: 'Standardized form example.', 17 | icon: 18 | }, 19 | }, 20 | { 21 | path: 'https://github.com/wangly19/nextui-design-pro/releases', 22 | name: 'Release', 23 | meta: { 24 | title: 'Release' 25 | } 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /app/next/constant/routes/e-commerce.tsx: -------------------------------------------------------------------------------- 1 | export {} -------------------------------------------------------------------------------- /app/next/constant/routes/index.tsx: -------------------------------------------------------------------------------- 1 | import { Home } from 'react-iconly' 2 | import { componentsRoute } from './components' 3 | 4 | export interface Route { 5 | /** @description routePath */ 6 | path: string; 7 | 8 | /** @description routeKey */ 9 | name: string; 10 | meta?: { 11 | /** @description showTitle */ 12 | title?: string; 13 | 14 | /** @description showIcon */ 15 | icon?: React.ReactNode; 16 | description?: string; 17 | }; 18 | children?: Route[]; 19 | } 20 | 21 | /** NavigationBar MenuData */ 22 | export const navMenuRoutes: Route[] = [ 23 | { 24 | path: "/", 25 | name: "Home", 26 | meta: { 27 | title: "Home", 28 | icon: 29 | }, 30 | }, 31 | { 32 | path: "/dashboard", 33 | name: "Dashboard", 34 | meta: { 35 | title: "Dashboard", 36 | icon: 37 | }, 38 | }, 39 | componentsRoute, 40 | { 41 | path: "https://github.com/wangly19/nextui-design-pro/releases", 42 | name: "Changelog", 43 | meta: { 44 | title: "Changelog", 45 | icon: 46 | }, 47 | }, 48 | ]; 49 | -------------------------------------------------------------------------------- /app/next/constant/routes/site.tsx: -------------------------------------------------------------------------------- 1 | export {} -------------------------------------------------------------------------------- /app/next/constant/theme.tsx: -------------------------------------------------------------------------------- 1 | // 1. Import `createTheme` 2 | import { createTheme } from "@nextui-org/react" 3 | 4 | export const lightTheme = createTheme({ 5 | type: 'light', 6 | }) 7 | 8 | export const darkTheme = createTheme({ 9 | type: 'dark', 10 | }) -------------------------------------------------------------------------------- /app/next/icons/close.tsx: -------------------------------------------------------------------------------- 1 | export const Close = ({ height, width, size, ...props }: any) => { 2 | return ( 3 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /app/next/icons/facebook.tsx: -------------------------------------------------------------------------------- 1 | export const FaceBook = ({ height, width, size }: any) => { 2 | return ( 3 | 10 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /app/next/icons/github.tsx: -------------------------------------------------------------------------------- 1 | export const Github = ({ height, width, size }: any) => { 2 | return ( 3 | 8 | 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /app/next/icons/google.tsx: -------------------------------------------------------------------------------- 1 | export const Google = ({ 2 | height, 3 | width, 4 | size 5 | }: any) => { 6 | return ( 7 | 14 | 19 | 24 | 29 | 34 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /app/next/icons/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './google' 2 | export * from './moon' 3 | export * from './sun' 4 | export * from './github' 5 | export * from './twitter' 6 | export * from './facebook' 7 | export * from './close' -------------------------------------------------------------------------------- /app/next/icons/moon.tsx: -------------------------------------------------------------------------------- 1 | export const MoonIcon = ({ 2 | fill = "currentColor", 3 | filled, 4 | size, 5 | height, 6 | width, 7 | label, 8 | ...props 9 | }: any) => { 10 | if (filled) { 11 | return ( 12 | 18 | 22 | 23 | ); 24 | } 25 | return ( 26 | 33 | 37 | 38 | ); 39 | }; -------------------------------------------------------------------------------- /app/next/icons/sun.tsx: -------------------------------------------------------------------------------- 1 | export const SunIcon = ({ 2 | fill = "currentColor", 3 | filled, 4 | size, 5 | height, 6 | width, 7 | label, 8 | ...props 9 | }: any) => { 10 | if (filled) { 11 | return ( 12 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | return ( 26 | 33 | 37 | 42 | 47 | 52 | 57 | 58 | ); 59 | }; -------------------------------------------------------------------------------- /app/next/icons/twitter.tsx: -------------------------------------------------------------------------------- 1 | export const Twitter = ({ height, width, size }: any) => { 2 | return ( 3 | 10 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /app/next/layout/avatar-bar/icon.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '@nextui-org/react' 2 | 3 | 4 | export const Icon = styled('span', { 5 | color: '$accents6', 6 | cursor: 'pointer', 7 | transition: '0.8s', 8 | '&:hover': { 9 | opacity: '0.5' 10 | } 11 | }) -------------------------------------------------------------------------------- /app/next/layout/avatar-bar/index.tsx: -------------------------------------------------------------------------------- 1 | import { Navbar, Text, Avatar, Input } from "@nextui-org/react"; 2 | import { Icon } from "./icon"; 3 | import { Setting, ShieldDone, Chart, Search } from "react-iconly"; 4 | import { NotificationDown } from "./notification"; 5 | import { Spotlight, SpotlightInstance } from "@/components/spotlight"; 6 | import { useRef } from "react"; 7 | import { useToast } from "components/toast"; 8 | import { LightMode } from "./mode"; 9 | import { UserPopover } from "./user"; 10 | 11 | export const AvatarBar = () => { 12 | const spotlightRef = useRef(null); 13 | const { toast } = useToast(); 14 | 15 | return ( 16 | 25 | 26 | 34 | ⌘/} 36 | contentLeft={ 37 | 44 | } 45 | contentLeftStyling={false} 46 | css={{ 47 | w: "100%", 48 | "@xsMax": { 49 | mw: "300px", 50 | }, 51 | "& .nextui-input-content--left": { 52 | h: "100%", 53 | ml: "$4", 54 | dflex: "center", 55 | }, 56 | }} 57 | placeholder="Search..." 58 | /> 59 | 60 | 61 | 62 | 63 | 65 | toast({ 66 | type: "primary", 67 | title: "title", 68 | description: "description", 69 | }) 70 | } 71 | > 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | ); 84 | }; 85 | -------------------------------------------------------------------------------- /app/next/layout/avatar-bar/mode.tsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "@nextui-org/react"; 2 | import { MoonIcon } from "icons/moon"; 3 | import { SunIcon } from "icons/sun"; 4 | import { Icon } from "./icon"; 5 | import { useTheme as useNextTheme } from "next-themes"; 6 | 7 | export const LightMode = () => { 8 | const { setTheme } = useNextTheme(); 9 | const { isDark, type } = useTheme(); 10 | 11 | const IconComponent = isDark ? SunIcon : MoonIcon; 12 | 13 | return ( 14 |
setTheme(type === "dark" ? "light" : "dark")}> 15 | 16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /app/next/layout/avatar-bar/notification.tsx: -------------------------------------------------------------------------------- 1 | import { Badge, Dropdown, Navbar, Avatar } from "@nextui-org/react"; 2 | import { Notification, Delete } from "react-iconly"; 3 | import { Icon } from "./icon"; 4 | 5 | const mockMessageData = [ 6 | { 7 | key: "1", 8 | name: "Tom", 9 | description: 10 | "ACME scales apps to meet user demand, automagically, based on load.", 11 | avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", 12 | }, 13 | { 14 | key: "2", 15 | name: "Jack", 16 | description: 17 | "ACME scales apps to meet user demand, automagically, based on load.", 18 | avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", 19 | }, 20 | ]; 21 | 22 | export const NotificationDown = () => { 23 | return ( 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | {mockMessageData.map((record) => ( 35 | } 42 | > 43 | {record.name} 44 | 45 | ))} 46 | 47 | 48 | } 53 | > 54 | ClearNotification 55 | 56 | 57 | 58 | 59 | ); 60 | }; 61 | -------------------------------------------------------------------------------- /app/next/layout/avatar-bar/user.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Popover, 3 | User, 4 | Row, 5 | Col, 6 | Text, 7 | Button, 8 | Spacer, 9 | Grid, 10 | Navbar, 11 | Avatar, 12 | } from "@nextui-org/react"; 13 | import { Logout } from "react-iconly"; 14 | import { useRouter } from 'next/router' 15 | import { useToast } from "@/components/toast"; 16 | 17 | export const UserPopover = () => { 18 | 19 | const router = useRouter() 20 | const { toast } = useToast() 21 | 22 | /** @desc handle user logout event. */ 23 | const handleUserLogoutClick = () => { 24 | toast({ 25 | title: 'Logout', 26 | description: 'Looking forward to the next meeting.' 27 | }) 28 | router.replace('/login') 29 | 30 | } 31 | 32 | /** @desc handle user follow event. */ 33 | const handleUserFollowClick = () => { 34 | } 35 | 36 | return ( 37 | 38 | 39 | 40 | 49 | 50 | 51 | 52 | 60 | 61 | 62 | 68 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 78 | 79 | 85 | Full-stack developer, @getnextui lover she/her 🎉 86 | 87 | 88 | 89 | 90 | 95 | 96 | 102 | 4 103 | 104 | Following 105 | 106 | 107 | 108 | 114 | 97.1K 115 | 116 | Followers 117 | 118 | 119 | 120 | 124 | 125 | 126 | 127 | 128 | ); 129 | }; 130 | -------------------------------------------------------------------------------- /app/next/layout/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as RootLayout } from './layout' -------------------------------------------------------------------------------- /app/next/layout/layout/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Container, styled } from "@nextui-org/react"; 3 | import { default as NavBar } from "../navbar"; 4 | import { Alert } from "components"; 5 | 6 | interface RootLayoutProps { 7 | children?: React.ReactNode; 8 | isLayout?: boolean; 9 | } 10 | 11 | const Box = styled("div", { 12 | display: "grid", 13 | gridTemplateRows: "auto 1fr", 14 | minHeight: "100vh", 15 | height: "auto", 16 | }); 17 | 18 | export default function ({ 19 | children, 20 | isLayout = true, 21 | }: RootLayoutProps): React.ReactElement { 22 | if (!isLayout) return <>{children}; 23 | 24 | return ( 25 | 26 | 27 | 34 | 35 | You seem to have a new version update that year, please refresh the 36 | page when you are free. 37 | 38 | {children} 39 | 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /app/next/layout/layout/upgrade-manage.tsx: -------------------------------------------------------------------------------- 1 | export const UpgradeManage = () => { 2 | return ( 3 |
1
4 | ) 5 | } -------------------------------------------------------------------------------- /app/next/layout/navbar/brand.tsx: -------------------------------------------------------------------------------- 1 | import { Logo } from "./logo"; 2 | import { Row, Text, RowProps } from "@nextui-org/react"; 3 | 4 | export const Brand: React.FC = (props) => { 5 | return ( 6 | 7 | 8 | 9 | NextUI Pro 10 | 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /app/next/layout/navbar/category.tsx: -------------------------------------------------------------------------------- 1 | import { Dropdown } from '@nextui-org/react' 2 | import { Category } from 'react-iconly' 3 | 4 | export const CategoryDown = () => { 5 | return ( 6 | 7 | } light > 8 | 9 | New file 10 | Copy link 11 | Edit file 12 | 13 | Delete file 14 | 15 | 16 | 17 | ) 18 | } -------------------------------------------------------------------------------- /app/next/layout/navbar/collapse.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Avatar, Dropdown } from "@nextui-org/react"; 3 | import { Route } from "constant/routes"; 4 | import { useRouter } from "next/router"; 5 | 6 | export interface CollapseNavLinkProps { 7 | route: Route; 8 | } 9 | 10 | export const CollapseNavLink: React.FC = (props) => { 11 | const router = useRouter(); 12 | 13 | const { pathname } = router; 14 | const { children = [], meta, path } = props.route; 15 | 16 | const handleRouteAction = (v: React.Key) => { 17 | if (typeof v !== "string") { 18 | console.warn(`Current route path is not a string.`); 19 | return void 0; 20 | } 21 | /** has url? */ 22 | if (/^(http|https)/.test(v)) { 23 | window.open(v); 24 | } else { 25 | router.push(v); 26 | } 27 | }; 28 | 29 | return ( 30 | 31 | 40 | {meta?.title} 41 | 42 | 50 | {children.map((route) => { 51 | const iKey = /^(http|https)/.test(route.path) 52 | ? route.path 53 | : path + route.path; 54 | return ( 55 | 62 | ) : null 63 | } 64 | > 65 | {route.meta?.title} 66 | 67 | ); 68 | })} 69 | 70 | 71 | ); 72 | }; 73 | -------------------------------------------------------------------------------- /app/next/layout/navbar/index.tsx: -------------------------------------------------------------------------------- 1 | import { Navbar, Text } from "@nextui-org/react"; 2 | import { AvatarBar } from "../avatar-bar"; 3 | import { NavBarMenu } from "./menu"; 4 | import { Brand } from './brand' 5 | 6 | export default function () { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /app/next/layout/navbar/logo.tsx: -------------------------------------------------------------------------------- 1 | export const Logo = () => ( 2 | 9 | 10 | 16 | 17 | ); -------------------------------------------------------------------------------- /app/next/layout/navbar/menu.tsx: -------------------------------------------------------------------------------- 1 | import { Navbar } from "@nextui-org/react"; 2 | import { navMenuRoutes } from "constant/routes"; 3 | import { CollapseNavLink } from "./collapse"; 4 | import { useRouter } from "next/router"; 5 | 6 | export const NavBarMenu = () => { 7 | const router = useRouter(); 8 | 9 | return ( 10 | 11 | {navMenuRoutes.map((route) => { 12 | if (route.children && route.children?.length > 0) { 13 | return ; 14 | } else { 15 | return ( 16 | 21 | {route.meta?.title} 22 | 23 | ); 24 | } 25 | })} 26 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /app/next/layout/settings/index.tsx: -------------------------------------------------------------------------------- 1 | export {} -------------------------------------------------------------------------------- /app/next/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /app/next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev -p 10020", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@next/font": "13.1.1", 13 | "@nextui-org/react": "1.0.0-beta.12", 14 | "@react-spring/web": "^9.6.1", 15 | "chart.js": "^4.1.2", 16 | "formik": "^2.2.9", 17 | "next": "13.1.1", 18 | "next-themes": "^0.2.1", 19 | "react-aria": "^3.22.0", 20 | "react-bootstrap-icons": "^1.10.2", 21 | "react-chartjs-2": "^5.2.0", 22 | "react-feather": "^2.0.10", 23 | "react-iconly": "^2.2.5", 24 | "zustand": "^4.2.0" 25 | } 26 | } -------------------------------------------------------------------------------- /app/next/pages/404/index.tsx: -------------------------------------------------------------------------------- 1 | import { NotFoundError } from '@/views/404' 2 | export default NotFoundError -------------------------------------------------------------------------------- /app/next/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import type { AppProps } from "next/app"; 2 | import { NextUIProvider } from "@nextui-org/react"; 3 | import { RootLayout } from "../layout"; 4 | import { NextPage } from "next"; 5 | import { ToastProvider } from "components/toast/provider"; 6 | import { SSRProvider } from "react-aria"; 7 | import { ThemeProvider } from "next-themes"; 8 | import { lightTheme, darkTheme } from "constant/theme"; 9 | import Head from "next/head"; 10 | 11 | export type NextPageWithLayout

= NextPage & { 12 | isFluid?: boolean; 13 | }; 14 | 15 | type AppPropsWithLayout = AppProps & { 16 | Component: NextPageWithLayout; 17 | }; 18 | 19 | export default function App({ Component, pageProps }: AppPropsWithLayout) { 20 | return ( 21 | <> 22 | 23 | NextUI Pro 24 | 25 | 26 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /app/next/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | import { CssBaseline } from "@nextui-org/react"; 3 | 4 | export default function Document() { 5 | return ( 6 | 7 | 8 | {CssBaseline.flush()} 9 | 10 | 11 |

12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /app/next/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /app/next/pages/changelog/index.tsx: -------------------------------------------------------------------------------- 1 | export default () => { 2 | return ( 3 |
change log
4 | ) 5 | } -------------------------------------------------------------------------------- /app/next/pages/components/pro-table/index.tsx: -------------------------------------------------------------------------------- 1 | import { ProTablePage } from '@/views/pro-table' 2 | 3 | export default ProTablePage -------------------------------------------------------------------------------- /app/next/pages/dashboard/index.tsx: -------------------------------------------------------------------------------- 1 | import { DashboardPage } from '@/views/dashboard' 2 | 3 | export default DashboardPage -------------------------------------------------------------------------------- /app/next/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { HomePageView } from '@/views/home' 2 | 3 | export default function Home() { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /app/next/pages/login/index.tsx: -------------------------------------------------------------------------------- 1 | import { LoginPage } from '@/views/login' 2 | 3 | export default LoginPage -------------------------------------------------------------------------------- /app/next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangly19/nextui-design-pro/e8a4fc583430f6756c470a5144e675bb6c51cf94/app/next/public/favicon.ico -------------------------------------------------------------------------------- /app/next/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/next/public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/next/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/next/styles/global.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 6px; 3 | height: 6px; 4 | } 5 | ::-webkit-scrollbar-track { 6 | border-radius: 10px; 7 | background: rgba(0,0,0,0.1); 8 | } 9 | ::-webkit-scrollbar-thumb{ 10 | border-radius: 10px; 11 | background: rgba(0,0,0,0.2); 12 | } 13 | ::-webkit-scrollbar-thumb:hover{ 14 | background: rgba(0,0,0,0.4); 15 | } 16 | ::-webkit-scrollbar-thumb:active{ 17 | background: rgba(0,0,0,.9); 18 | } -------------------------------------------------------------------------------- /app/next/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve", 20 | "incremental": true, 21 | "baseUrl": ".", 22 | "paths": { 23 | "constant/*": [ 24 | "./constant/*" 25 | ], 26 | "icons/*": [ 27 | "./icons/*" 28 | ], 29 | "@/*": [ 30 | "./*" 31 | ] 32 | } 33 | }, 34 | "include": [ 35 | "next-env.d.ts", 36 | "**/*.ts", 37 | "**/*.tsx" 38 | ], 39 | "exclude": [ 40 | "node_modules" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /app/next/views/404/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Button } from "@nextui-org/react"; 3 | import { Result } from "./result"; 4 | import { Flex } from "components/flex"; 5 | import { useRouter } from "next/router"; 6 | 7 | export const NotFoundError = () => { 8 | const router = useRouter(); 9 | 10 | return ( 11 | 18 | 22 | 27 | 30 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | NotFoundError.isFluid = false; 40 | -------------------------------------------------------------------------------- /app/next/views/404/result.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Spacer, styled, Text } from "@nextui-org/react"; 3 | import { Box } from "components/box"; 4 | import { ShieldDone } from "react-iconly"; 5 | 6 | export interface ResultProps { 7 | title: string; 8 | children?: React.ReactNode, 9 | description?: string; 10 | } 11 | 12 | const SendIcon = styled(ShieldDone); 13 | 14 | export const Result: React.FC = (props) => { 15 | return ( 16 | 23 | 34 | 41 | 42 | {props.title} 43 | 44 | {props.description ? 45 | {props.description} 46 | : null} 47 | 48 | {props.children ? props.children : null} 49 | 50 | ); 51 | }; 52 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/config.ts: -------------------------------------------------------------------------------- 1 | export const setLegendSpacingPlugin = [ 2 | { 3 | id: "increase-legend-spacing", 4 | beforeInit(chart: any) { 5 | const originalFit = chart.legend.fit; 6 | chart.legend.fit = function fit() { 7 | originalFit.bind(chart.legend)(); 8 | this.height += 12; 9 | }; 10 | }, 11 | }, 12 | ] 13 | 14 | 15 | export const setLegendStyle = { 16 | position: "top" as const, 17 | align: "start" as const, 18 | labels: { 19 | boxHeight: 12, 20 | boxWidth: 12, 21 | useBorderRadius: true, 22 | pointStyle: "rectRounded", 23 | borderRadius: 3 24 | } as const, 25 | } -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/fill-line.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Card, useTheme, Text, Badge, Row } from "@nextui-org/react"; 3 | import { 4 | Chart as ChartJS, 5 | CategoryScale, 6 | LinearScale, 7 | PointElement, 8 | LineElement, 9 | Title, 10 | Tooltip, 11 | Filler, 12 | Legend, 13 | ChartData, 14 | } from "chart.js"; 15 | import { Line } from "react-chartjs-2"; 16 | import { faker } from "@faker-js/faker"; 17 | import { Box, FlexBox } from "@/components"; 18 | 19 | ChartJS.register( 20 | CategoryScale, 21 | LinearScale, 22 | PointElement, 23 | LineElement, 24 | Title, 25 | Tooltip, 26 | Filler, 27 | Legend 28 | ); 29 | 30 | const labels = ["January", "February", "March", "April", "May", "June", "July"]; 31 | 32 | const data: ChartData<"line", number[], string> = { 33 | labels, 34 | datasets: [ 35 | { 36 | fill: true, 37 | label: "Dataset 1", 38 | data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), 39 | borderColor: "#33A6FF", 40 | backgroundColor: "#33A6FF", 41 | pointStyle: false, 42 | }, 43 | { 44 | fill: true, 45 | label: "Dataset 2", 46 | data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), 47 | borderColor: "#1FCCAD", 48 | backgroundColor: "#1FCCAD", 49 | pointStyle: false, 50 | }, 51 | ], 52 | }; 53 | 54 | export const FillLineCharts = () => { 55 | const { theme } = useTheme(); 56 | 57 | return ( 58 | 59 | 68 | 69 | {data.datasets?.map((line) => ( 70 | 71 | 79 | {line.label} 80 | 81 | ))} 82 | 83 | 84 | 112 | 113 | 114 | 115 | ); 116 | }; 117 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/group-line.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Chart as ChartJS, 4 | CategoryScale, 5 | LinearScale, 6 | BarElement, 7 | Title, 8 | Tooltip, 9 | Legend, 10 | ChartData 11 | } from "chart.js"; 12 | import { Card, Text, useTheme } from "@nextui-org/react"; 13 | import { Bar } from "react-chartjs-2"; 14 | import { setLegendSpacingPlugin, setLegendStyle } from './config' 15 | import { faker } from "@faker-js/faker"; 16 | 17 | ChartJS.register( 18 | CategoryScale, 19 | LinearScale, 20 | BarElement, 21 | Title, 22 | Tooltip, 23 | Legend 24 | ); 25 | 26 | 27 | const defineConfig = { 28 | borderWidth: 2, 29 | borderRadius: 5, 30 | borderSkipped: false, 31 | } 32 | 33 | const labels = ["January", "February", "March", "April", "May", "June", "July"]; 34 | 35 | const showCase = [''] 36 | 37 | export const data: ChartData<'bar', number[], string> = { 38 | labels, 39 | datasets: [ 40 | { 41 | label: "Dataset 1", 42 | data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), 43 | backgroundColor: "#F7BA1E", 44 | borderColor: "#F7BA1E", 45 | stack: "Stack 0", 46 | ...defineConfig, 47 | }, 48 | { 49 | label: "Dataset 2", 50 | data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), 51 | backgroundColor: "#14C9C9", 52 | borderColor: "#14C9C9", 53 | stack: "Stack 0", 54 | ...defineConfig, 55 | }, 56 | { 57 | label: "Dataset 3", 58 | data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), 59 | backgroundColor: "#165DFF", 60 | borderColor: "#165DFF", 61 | stack: "Stack 1", 62 | ...defineConfig, 63 | }, 64 | ], 65 | }; 66 | 67 | export const GroupLineCharts = () => { 68 | 69 | const { theme } = useTheme() 70 | 71 | return ( 72 | 73 | 74 | GMV 75 | 76 | 81 | 128 | 129 | 130 | ); 131 | }; 132 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/line.tsx: -------------------------------------------------------------------------------- 1 | import { Card, useTheme, Text } from "@nextui-org/react"; 2 | import { 3 | Chart as ChartJS, 4 | CategoryScale, 5 | LinearScale, 6 | PointElement, 7 | LineElement, 8 | Title, 9 | Tooltip, 10 | Legend, 11 | ChartData, 12 | } from "chart.js"; 13 | import { Box } from "components"; 14 | import { Line } from "react-chartjs-2"; 15 | import { faker } from "@faker-js/faker"; 16 | import { setLegendSpacingPlugin } from "./config"; 17 | 18 | ChartJS.register( 19 | CategoryScale, 20 | LinearScale, 21 | PointElement, 22 | LineElement, 23 | Title, 24 | Tooltip, 25 | Legend 26 | ); 27 | 28 | const labels = [ 29 | "Jan", 30 | "Feb", 31 | "Mar", 32 | "Apr", 33 | "May", 34 | "Jun", 35 | "Jul", 36 | "Aug", 37 | "Oct", 38 | "Nov", 39 | "Dec", 40 | ]; 41 | 42 | const defaultLineDataSet = { 43 | pointStyle: "rectRounded", 44 | pointBorderWidth: 5, 45 | }; 46 | 47 | export const data: ChartData<"line", number[], string> = { 48 | labels, 49 | datasets: [ 50 | { 51 | label: "2020", 52 | data: labels.map(() => faker.datatype.number({ min: 100, max: 500 })), 53 | borderColor: "#0072F5", 54 | backgroundColor: "#0072F5", 55 | ...defaultLineDataSet, 56 | }, 57 | { 58 | label: "2021", 59 | data: labels.map(() => faker.datatype.number({ min: 100, max: 500 })), 60 | borderColor: "#F31260", 61 | backgroundColor: "#F31260", 62 | ...defaultLineDataSet, 63 | }, 64 | { 65 | label: "2022", 66 | data: labels.map(() => faker.datatype.number({ min: 100, max: 500 })), 67 | borderColor: "#7828C8", 68 | backgroundColor: "#7828C8", 69 | ...defaultLineDataSet, 70 | }, 71 | { 72 | label: "2023", 73 | data: [1, 2].map(() => faker.datatype.number({ min: 100, max: 500 })), 74 | borderColor: "#F5A524", 75 | backgroundColor: "#F5A524", 76 | ...defaultLineDataSet, 77 | }, 78 | ], 79 | }; 80 | 81 | export const LineCharts = () => { 82 | const { theme } = useTheme(); 83 | return ( 84 | 85 | 86 | GMV 87 | 88 | 93 | 101 | v + ' W' 120 | }, 121 | title: { 122 | display: true, 123 | text: "Unit(W)", 124 | color: theme?.colors.primary.value, 125 | font: { 126 | weight: "bold", 127 | }, 128 | }, 129 | border: { 130 | dash: [10, 10], 131 | width: 0, 132 | color: "red", 133 | }, 134 | grid: { 135 | color: theme?.colors.neutralBorder.value, 136 | lineWidth: 1.5, 137 | }, 138 | }, 139 | x: { 140 | border: { 141 | display: false, 142 | }, 143 | grid: { 144 | display: false, 145 | }, 146 | }, 147 | }, 148 | plugins: { 149 | legend: { 150 | position: "top", 151 | align: "start", 152 | labels: { 153 | boxHeight: 12, 154 | boxWidth: 12, 155 | color: theme?.colors.text.value, 156 | useBorderRadius: true, 157 | borderRadius: 3, 158 | }, 159 | }, 160 | tooltip: { 161 | mode: "index" 162 | }, 163 | }, 164 | }} 165 | data={data} 166 | /> 167 | 168 | 169 | 170 | ); 171 | }; 172 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/pie.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Card } from "@nextui-org/react"; 3 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; 4 | import { Pie } from "react-chartjs-2"; 5 | import { setLegendSpacingPlugin, setLegendStyle } from "./config"; 6 | import { faker } from '@faker-js/faker' 7 | 8 | ChartJS.register(ArcElement, Tooltip, Legend); 9 | 10 | const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] 11 | 12 | const colors = ["#165DFF", "#14C9C9", "#F7BA1E", "#722ED1", "#3491FA", "#9FDB1D"] 13 | 14 | export const data = { 15 | labels, 16 | datasets: [ 17 | { 18 | label: "2022", 19 | data: labels.map(() => faker.datatype.number({ min: 100, max: 500 })), 20 | backgroundColor:colors, 21 | borderColor: colors, 22 | }, 23 | ], 24 | }; 25 | 26 | export const PieCharts = () => { 27 | return ( 28 | 29 | 34 | 54 | 55 | 56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/polar-area.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Chart as ChartJS, 4 | RadialLinearScale, 5 | ArcElement, 6 | Tooltip, 7 | Legend, 8 | ChartData 9 | } from 'chart.js'; 10 | import { PolarArea } from 'react-chartjs-2'; 11 | import { Card, Text, useTheme } from "@nextui-org/react"; 12 | import { setLegendSpacingPlugin, setLegendStyle } from "./config"; 13 | 14 | 15 | ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend); 16 | 17 | const colors = ["#165DFF", "#14C9C9", "#F7BA1E", "#722ED1", "#3491FA", "#9FDB1D"] 18 | 19 | export const data: ChartData<"polarArea", number[], string> = { 20 | labels: ["#L1", "#L2", "#L3", "#L4", "#L5", "#L6"], 21 | datasets: [ 22 | { 23 | label: '# of Votes', 24 | data: [12, 19, 3, 5, 2, 3], 25 | backgroundColor: colors, 26 | borderColor: colors, 27 | borderWidth: 1, 28 | }, 29 | ], 30 | }; 31 | 32 | export const PolarAreaCharts = () => { 33 | const { theme } = useTheme(); 34 | return ( 35 | 36 | 41 | 62 | 63 | 64 | ); 65 | }; 66 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/radar.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Chart as ChartJS, 4 | RadialLinearScale, 5 | PointElement, 6 | LineElement, 7 | Filler, 8 | Tooltip, 9 | Legend, 10 | ChartData, 11 | } from "chart.js"; 12 | import { Radar } from "react-chartjs-2"; 13 | import { faker } from '@faker-js/faker' 14 | import { Card, Text, useTheme } from "@nextui-org/react"; 15 | import { setLegendSpacingPlugin, setLegendStyle } from "./config"; 16 | 17 | ChartJS.register( 18 | RadialLinearScale, 19 | PointElement, 20 | LineElement, 21 | Filler, 22 | Tooltip, 23 | Legend 24 | ); 25 | 26 | const labels = ['KDA', 'DPM', 'GD@10', 'DMG%', 'XPD@10'] 27 | 28 | export const data: ChartData<"radar", number[], string> = { 29 | labels: labels, 30 | datasets: [ 31 | { 32 | label: "standard", 33 | data: labels.map(() => 50), 34 | backgroundColor: 'rgba(22, 93, 255, 0.7)', 35 | }, 36 | { 37 | label: "#2", 38 | data: labels.map(() => faker.datatype.number({ min: 10, max: 90 })), 39 | backgroundColor: 'rgba(247,186, 30, 0.7)', 40 | }, 41 | ], 42 | }; 43 | 44 | export const RadarCharts = () => { 45 | const { theme } = useTheme(); 46 | return ( 47 | 48 | 53 | 83 | 84 | 85 | ); 86 | }; 87 | -------------------------------------------------------------------------------- /app/next/views/dashboard/charts/vertical-bar.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Card, Text } from "@nextui-org/react"; 3 | import { 4 | Chart as ChartJS, 5 | CategoryScale, 6 | LinearScale, 7 | BarElement, 8 | Title, 9 | Tooltip, 10 | Legend, 11 | ChartData, 12 | } from "chart.js"; 13 | import { Bar } from "react-chartjs-2"; 14 | import { faker } from "@faker-js/faker"; 15 | import { setLegendSpacingPlugin, setLegendStyle } from './config' 16 | import { FlexBox } from "@/components"; 17 | 18 | ChartJS.register( 19 | CategoryScale, 20 | LinearScale, 21 | BarElement, 22 | Title, 23 | Tooltip, 24 | Legend 25 | ); 26 | 27 | const labels = [ 28 | "Jan", 29 | "Feb", 30 | "Mar", 31 | "Apr", 32 | "May", 33 | "Jun", 34 | "Jul", 35 | "Aug", 36 | "Oct", 37 | "Nov", 38 | "Dec", 39 | ]; 40 | 41 | const defineDataSetConfig = { 42 | borderWidth: 2, 43 | borderRadius: 5, 44 | borderSkipped: false, 45 | } 46 | 47 | export const data: ChartData<'bar'> = { 48 | labels, 49 | datasets: [ 50 | { 51 | label: "2022", 52 | data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), 53 | borderColor: "#0072F5", 54 | backgroundColor: "#0072F5", 55 | ...defineDataSetConfig, 56 | }, 57 | { 58 | label: "2021", 59 | data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })), 60 | borderColor: "#7828C8", 61 | backgroundColor: "#7828C8", 62 | ...defineDataSetConfig, 63 | }, 64 | ], 65 | }; 66 | 67 | export const VerticalBarCharts = () => { 68 | return ( 69 | 70 | 71 | GMV 72 | 73 | 78 | 107 | 108 | 109 | ); 110 | }; 111 | -------------------------------------------------------------------------------- /app/next/views/dashboard/data-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Card, Text, Grid, Container, Button } from "@nextui-org/react"; 3 | import { Flex } from "@/components/flex"; 4 | import { Scan } from "react-iconly"; 5 | 6 | export interface DataCardProps { 7 | status?: "success" | "error"; 8 | title: string; 9 | subText: string; 10 | content: React.ReactNode; 11 | trendText?: string; 12 | } 13 | 14 | export const DataCard: React.FC = ({ 15 | status = "success", 16 | title, 17 | subText, 18 | content, 19 | trendText, 20 | }) => { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | {title} 29 | 30 | {content} 31 | 32 | 40 | {trendText} 41 | 42 | {subText} 43 | 44 | 45 | 46 | 47 | 55 | 56 | 57 | 58 | 59 | 60 | ); 61 | -------------------------------------------------------------------------------- /app/next/views/home/index.tsx: -------------------------------------------------------------------------------- 1 | import { Box, FlexBox } from "@/components"; 2 | import { Button, Grid, Text, Image } from "@nextui-org/react"; 3 | import * as React from "react"; 4 | import { Heart2 } from "react-iconly" 5 | 6 | export const HomePageView = () => { 7 | return ( 8 | 12 | 21 | 22 | Move faster 23 | 24 | 25 | with intuitive 26 | React UI tools 27 | 28 | 29 | Beautiful, fast and modern React UI library. 30 | 31 | 32 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /app/next/views/login/description.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Box } from "@/components/box"; 3 | import { Flex, FlexBox } from "@/components/flex"; 4 | import { Text, Avatar } from "@nextui-org/react"; 5 | 6 | const pictureUsers = [ 7 | "https://i.pravatar.cc/150?u=a042581f4e29026024d", 8 | "https://i.pravatar.cc/150?u=a042581f4e29026704d", 9 | "https://i.pravatar.cc/150?u=a04258114e29026702d", 10 | "https://i.pravatar.cc/150?u=a048581f4e29026701d", 11 | "https://i.pravatar.cc/150?u=a092581d4ef9026700d", 12 | ]; 13 | 14 | export const HomeDescription = () => { 15 | return ( 16 | 21 | Sign In to 22 | NextUI Design Pro 23 | 30 | Use templates to quickly create your projects. 31 | 32 | 33 | 34 | {pictureUsers.map((url, index) => ( 35 | 44 | ))} 45 | 46 | Join Web Developer. 47 | 48 | 49 | ); 50 | }; 51 | -------------------------------------------------------------------------------- /app/next/views/login/form.tsx: -------------------------------------------------------------------------------- 1 | import { Input, Button, Spacer, Link, Row, Loading } from "@nextui-org/react"; 2 | import { User, Password } from "react-iconly"; 3 | import { useToast, TextDivider, Form } from "components"; 4 | import { OtherSignInPlatform } from "./other"; 5 | import { useRouter } from "next/router"; 6 | import { Formik } from "formik"; 7 | 8 | const defaultSignFormData = { 9 | username: "wangly19", 10 | password: "nextui.org", 11 | }; 12 | 13 | export const LoginForm = () => { 14 | const router = useRouter(); 15 | const { toast } = useToast(); 16 | 17 | const handleSignSubmit = () => { 18 | toast({ 19 | title: "Welcome.", 20 | description: "Start your trip next. ", 21 | }); 22 | router.replace("/"); 23 | }; 24 | 25 | const handleSignFormValidate = (values: typeof defaultSignFormData) => { 26 | const errors: Record = {}; 27 | 28 | /** username is notfound ? */ 29 | if (!values.username.trim()) { 30 | errors.username = "username required"; 31 | } 32 | 33 | /** password is notfound ? */ 34 | if (!values.password.trim()) { 35 | errors.password = "password required"; 36 | } 37 | 38 | return errors; 39 | }; 40 | 41 | return ( 42 | <> 43 | { 47 | setTimeout(() => { 48 | setSubmitting(false); 49 | toast({ 50 | title: "Welcome.", 51 | description: "Start your trip next. ", 52 | }); 53 | router.replace("/"); 54 | }, 400); 55 | }} 56 | > 57 | {({ 58 | values, 59 | errors, 60 | handleChange, 61 | isSubmitting, 62 | handleSubmit, 63 | handleBlur, 64 | }) => { 65 | console.log(errors, "withErrors"); 66 | return ( 67 |
68 | } 72 | shadow={false} 73 | width="100%" 74 | placeholder="username: Arbitrary name" 75 | status={errors?.username ? "error" : undefined} 76 | value={values?.username} 77 | label={errors?.username || "UserName"} 78 | onChange={handleChange} 79 | onBlur={handleBlur} 80 | /> 81 | 82 | } 89 | value={values?.password} 90 | status={errors?.password ? "error" : undefined} 91 | label={errors?.password || "Password"} 92 | onChange={handleChange} 93 | onBlur={handleBlur} 94 | /> 95 | 96 | 97 | 98 | 99 | Forgot Password ? 100 | 101 | 102 | 103 | 122 | 123 | ); 124 | }} 125 |
126 | 127 | 128 | 129 | 130 | 131 | ); 132 | }; 133 | -------------------------------------------------------------------------------- /app/next/views/login/index.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from "@/components/box"; 2 | import { Container, Grid, Text, Spacer, Row } from "@nextui-org/react"; 3 | import { LoginForm } from "./form"; 4 | import { HomeDescription } from "./description"; 5 | import { Brand } from "layout/navbar/brand"; 6 | import { SwitchTheme } from "./switch"; 7 | import { FlexBox } from "@/components"; 8 | 9 | export const LoginPage = () => { 10 | return ( 11 | 18 | 19 | 25 | 33 | 38 | 39 | © 2023 wangly19. All rights reserved. 42 | 43 | 44 | 50 | 51 | 54 | Hi, Welcome Back! 😺 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | ); 65 | }; 66 | 67 | LoginPage.isFluid = false; 68 | -------------------------------------------------------------------------------- /app/next/views/login/other.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Grid, Row } from "@nextui-org/react"; 2 | import { Google, Github, Twitter, FaceBook } from "icons"; 3 | 4 | export const OtherSignInPlatform = () => { 5 | return ( 6 | 7 | 15 | 16 | 17 | 20 | 21 | 22 | New file 23 | Copy link 24 | Edit file 25 | 26 | Delete file 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /app/next/views/theme/index.tsx: -------------------------------------------------------------------------------- 1 | export const ThemePage = () => { 2 | return ( 3 | 4 | ) 5 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextui-design-pro", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "wangly19", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@faker-js/faker": "^7.6.0", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-use": "^17.4.0", 17 | "typescript": "^4.9.4" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^18.11.18", 21 | "@types/react": "^18.0.26", 22 | "@types/react-dom": "^18.0.10" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | # sub-packages 3 | - 'packages/**' 4 | 5 | ## project 6 | - 'app/next' --------------------------------------------------------------------------------