From f50626dbd2e40cd15e87af60b4b0657a88351c38 Mon Sep 17 00:00:00 2001 From: ishida Date: Thu, 20 Apr 2023 01:25:25 +0800 Subject: [PATCH] add static pages --- .../components/sidebar/components/Sidebar.tsx | 67 ++-- modules/home/components/Home.tsx | 149 ++++---- package-lock.json | 21 ++ package.json | 1 + pages/chat.tsx | 158 ++++++++ pages/features.tsx | 105 ++++++ pages/my.tsx | 349 ++++++++++++++++++ pages/video.tsx | 84 +++++ yarn.lock | 26 +- 9 files changed, 858 insertions(+), 102 deletions(-) create mode 100644 pages/chat.tsx create mode 100644 pages/my.tsx create mode 100644 pages/video.tsx diff --git a/common/components/sidebar/components/Sidebar.tsx b/common/components/sidebar/components/Sidebar.tsx index dd836ee..cf437f6 100644 --- a/common/components/sidebar/components/Sidebar.tsx +++ b/common/components/sidebar/components/Sidebar.tsx @@ -1,12 +1,14 @@ +/* eslint-disable @typescript-eslint/no-misused-promises */ /* eslint-disable jsx-a11y/alt-text */ -import { Box, Button, Flex, Heading, Image, Spacer, Text } from '@chakra-ui/react'; +import { Box, Button, ButtonProps, Flex, Heading, Image, Spacer, Text } from '@chakra-ui/react'; +import { useRouter } from 'next/router'; import { ReactNode } from 'react'; type LinkButtonProps = { children: ReactNode; }; -const LinkButton = ({ children }: LinkButtonProps) => ( +const LinkButton = ({ children, ...buttonProps }: LinkButtonProps & ButtonProps) => ( ); -const Links = () => ( - - - - 智能对话 - - - - 场景制作 - - - - 图片视频 - - - - 更多工具 - - - - 历史记录 - - - - 关于&个人中心 - - -); +const Links = () => { + const router = useRouter(); + const activePath = router.asPath.slice(1); + return ( + + router.push('/chat')}> + + 智能对话 + + router.push('/features')}> + + 场景制作 + + router.push('/video')}> + + 图片视频 + + router.push('/pricing')}> + + 更多工具 + + router.push('/history')}> + + 历史记录 + + router.push('/my')}> + + 关于&个人中心 + + + ); +}; const Sidebar = (props: { d: { diff --git a/modules/home/components/Home.tsx b/modules/home/components/Home.tsx index d22af04..d82ae8c 100644 --- a/modules/home/components/Home.tsx +++ b/modules/home/components/Home.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-misused-promises */ import { motion } from 'framer-motion'; import Image from 'next/image'; import { @@ -11,6 +12,7 @@ import { createIcon, useColorModeValue, } from '@chakra-ui/react'; +import { useRouter } from 'next/router'; import { collectionListAnimation, @@ -22,6 +24,7 @@ import CollectionList from './CollectionList'; import Footer from '@/common/components/footer/components/Footer'; import mainImage from '@/public/img/idea.gif'; + // import mainImage from '@/public/img/main.jpg'; const headerStyle = 'text-5xl md:text-6xl xl:text-extra font-extrabold xl:-mt-12 -mt-5 md:-mt-8'; @@ -37,83 +40,87 @@ const Arrow = createIcon({ /> ), }); -const Home = () => ( -
- +const Home = () => { + const router = useRouter(); + return ( +
-

Box AI,

-

the smart choice.

-

the smart

-

choice.

- - - - - - - - - } + _hover={{ + bg: 'blackAlpha.300', + color: 'black', + }} + onClick={() => router.push('/login')} > - Starting at $15/mo - - - -
+ 立即体验 + + + + + Starting at $15/mo + + + +
+ - -
-); +
+ ); +}; export default Home; diff --git a/package-lock.json b/package-lock.json index a51a438..4e9d99c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "boxai-web", "version": "0.1.0", "dependencies": { + "@chakra-ui/icons": "2.0.18", "@chakra-ui/react": "2.5.5", "@emotion/react": "11.10.6", "@emotion/styled": "11.10.6", @@ -478,6 +479,18 @@ "react": ">=18" } }, + "node_modules/@chakra-ui/icons": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.0.18.tgz", + "integrity": "sha512-E/+DF/jw7kdN4/XxCZRnr4FdMXhkl50Q34MVwN9rADWMwPK9uSZPGyC7HOx6rilo7q4bFjYDH3yRj9g+VfbVkg==", + "dependencies": { + "@chakra-ui/icon": "3.0.16" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, "node_modules/@chakra-ui/image": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.0.15.tgz", @@ -6974,6 +6987,14 @@ "@chakra-ui/shared-utils": "2.0.5" } }, + "@chakra-ui/icons": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.0.18.tgz", + "integrity": "sha512-E/+DF/jw7kdN4/XxCZRnr4FdMXhkl50Q34MVwN9rADWMwPK9uSZPGyC7HOx6rilo7q4bFjYDH3yRj9g+VfbVkg==", + "requires": { + "@chakra-ui/icon": "3.0.16" + } + }, "@chakra-ui/image": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.0.15.tgz", diff --git a/package.json b/package.json index 072db7b..53c3577 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/icons": "2.0.18", "@chakra-ui/react": "2.5.5", "@emotion/react": "11.10.6", "@emotion/styled": "11.10.6", diff --git a/pages/chat.tsx b/pages/chat.tsx new file mode 100644 index 0000000..04dd3fb --- /dev/null +++ b/pages/chat.tsx @@ -0,0 +1,158 @@ +/* eslint-disable react/jsx-no-undef */ +import { + Box, + Button, + Checkbox, + Container, + Flex, + FormControl, + FormLabel, + Grid, + HStack, + Heading, + Icon, + Image, + Input, + Link, + List, + ListIcon, + ListItem, + SimpleGrid, + Stack, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, + Text, + VStack, + chakra, + useColorModeValue, +} from '@chakra-ui/react'; +// import { InfoIcon } from '@chakra-ui/icons'; +// Here we have used react-icons package for the icons +import { BiCheck } from 'react-icons/bi'; +import { BsArrowUpRight, BsFillCloudCheckFill, BsHeart, BsHeartFill } from 'react-icons/bs'; +import { AiOutlineCloudServer } from 'react-icons/ai'; +import { FaCheckCircle, FaServer } from 'react-icons/fa'; +import { IconType } from 'react-icons/lib'; +import { useState } from 'react'; + +import Sidebar from '@/common/components/sidebar/components/Sidebar'; + +const tabData = [ + { + label: 'Nigerian Jollof', + content: 'Perhaps the greatest dish ever invented.', + }, + { + label: 'Pounded Yam & Egusi', + content: 'Perhaps the surest dish ever invented but fills the stomach more than rice.', + }, +]; + +function DataTabs({ data }: { data: typeof tabData }) { + return ( + + + {data.map((tab, index) => ( + {tab.label} + ))} + + + {data.map((tab, index) => ( + + {tab.content} + + ))} + + + ); +} + +function SplitScreen() { + const colors = useColorModeValue( + ['red.50', 'blue.50', 'teal.50'], + ['red.900', 'blue.900', 'teal.900'], + ); + const [tabIndex, setTabIndex] = useState(0); + const bg = colors[tabIndex]; + return ( + + + + {/* Sign in to your account */} + {/* + Email address + + + + Password + + */} + + 關鍵詞 + + {/*