Feat new features page

.github/workflows/nextjs.yml

@@ -9,7 +9,9 @@ on:
   push:
     branches: ["develop"]
   pull_request:
-    branches: ["*"]
+    types: [opened, reopened]
+    branches:
+      - '*'
 
 
   # Allows you to run this workflow manually from the Actions tab

common/components/sidebar/components/Sidebar.tsx

@@ -1,52 +1,59 @@
+/* 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) => (
   <Button
     _hover={{ color: '#323ebe', bg: '#e2e4e6' }}
     bg="transparent"
     width="14rem"
     padding="8px"
     fontWeight="normal"
     justifyContent="flex-start"
+    {...buttonProps}
   >
     {children}
   </Button>
 );
 
-const Links = () => (
-  <Box as="nav">
-    <LinkButton>
-      <Image src="/img/sidebar/home.svg" mr="3" />
-      智能对话
-    </LinkButton>
-    <LinkButton>
-      <Image src="/img/sidebar/reading.svg" mr="3" />
-      场景制作
-    </LinkButton>
-    <LinkButton>
-      <Image src="/img/sidebar/listing.svg" mr="3" />
-      图片视频
-    </LinkButton>
-    <LinkButton>
-      <Image src="/img/sidebar/podcast.svg" mr="3" />
-      更多工具
-    </LinkButton>
-    <LinkButton>
-      <Image src="/img/sidebar/video.svg" mr="3" />
-      历史记录
-    </LinkButton>
-    <LinkButton>
-      <Image src="/img/sidebar/tag.svg" mr="3" />
-      关于&amp;个人中心
-    </LinkButton>
-  </Box>
-);
+const Links = () => {
+  const router = useRouter();
+  const activePath = router.asPath.slice(1);
+  return (
+    <Box as="nav">
+      <LinkButton isActive={activePath === 'chat'} onClick={() => router.push('/chat')}>
+        <Image src="/img/sidebar/home.svg" mr="3" />
+        智能对话
+      </LinkButton>
+      <LinkButton isActive={activePath === 'features'} onClick={() => router.push('/features')}>
+        <Image src="/img/sidebar/reading.svg" mr="3" />
+        场景制作
+      </LinkButton>
+      <LinkButton isActive={activePath === 'video'} onClick={() => router.push('/video')}>
+        <Image src="/img/sidebar/listing.svg" mr="3" />
+        图片视频
+      </LinkButton>
+      <LinkButton isActive={activePath === 'pricing'} onClick={() => router.push('/pricing')}>
+        <Image src="/img/sidebar/podcast.svg" mr="3" />
+        更多工具
+      </LinkButton>
+      <LinkButton isActive={activePath === 'history'} onClick={() => router.push('/history')}>
+        <Image src="/img/sidebar/video.svg" mr="3" />
+        历史记录
+      </LinkButton>
+      <LinkButton isActive={activePath === 'my'} onClick={() => router.push('/my')}>
+        <Image src="/img/sidebar/tag.svg" mr="3" />
+        关于&amp;个人中心
+      </LinkButton>
+    </Box>
+  );
+};
 
 const Sidebar = (props: {
   d: {

common/hooks/auth.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+// import { useRecoilValue } from 'recoil';
+
+import { useAuth } from '@/context/auth';
+
+export const useNotLoggedIn = () => {
+  const router = useRouter();
+  const { loggingIn } = useAuth();
+
+  useEffect(() => {
+    if (loggingIn) {
+      router.push('/features');
+    }
+  }, [loggingIn, router]);
+};
+
+export const useLoggedIn = () => {
+  const router = useRouter();
+  const { loggingIn } = useAuth();
+
+  useEffect(() => {
+    if (!loggingIn) router.push('/register');
+  }, [loggingIn, router]);
+};

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 = () => (
-  <div className="flex h-full w-full items-center justify-center">
-    <motion.div
-      className="relative h-64 w-64 sm:h-96 sm:w-96"
-      variants={imageAnimation}
-      animate="to"
-    >
+const Home = () => {
+  const router = useRouter();
+  return (
+    <div className="flex h-full w-full items-center justify-center">
       <motion.div
-        className="absolute bottom-full ml-5 mb-0 md:ml-10 lg:-mb-5 xl:ml-24 2xl:mb-5 2xl:ml-48"
-        variants={textAnimation}
-        initial="from"
+        className="relative h-64 w-64 sm:h-96 sm:w-96"
+        variants={imageAnimation}
         animate="to"
       >
-        <h1 className={headerStyle}>Box AI,</h1>
-        <h1 className={`${headerStyle} hidden sm:block`}>the smart choice.</h1>
-        <h1 className={`${headerStyle} block sm:hidden`}>the smart</h1>
-        <h1 className={`${headerStyle} block sm:hidden`}>choice.</h1>
-      </motion.div>
-      <Image
-        layout="raw"
-        src={mainImage}
-        alt=""
-        className="h-full w-full object-cover object-center"
-        priority
-        // placeholder="blur"
-      />
-      <motion.div variants={collectionListAnimation} initial="from" animate="to">
-        <CollectionList />
-        <Stack
-          direction={'column'}
-          spacing={3}
-          align={'center'}
-          alignSelf={'center'}
-          position={'relative'}
+        <motion.div
+          className="absolute bottom-full ml-5 mb-0 md:ml-10 lg:-mb-5 xl:ml-24 2xl:mb-5 2xl:ml-48"
+          variants={textAnimation}
+          initial="from"
+          animate="to"
         >
-          <Button
-            // colorScheme={'gray'}
-            bg={'black'}
-            color={'white'}
-            rounded={'full'}
-            px={6}
-            size="lg"
-            // width={350}
-            // height={20}
-            // rightIcon={<ArrowForwardIcon />}
-            _hover={{
-              bg: 'blackAlpha.300',
-              color: 'black',
-            }}
+          <h1 className={headerStyle}>Box AI,</h1>
+          <h1 className={`${headerStyle} hidden sm:block`}>the smart choice.</h1>
+          <h1 className={`${headerStyle} block sm:hidden`}>the smart</h1>
+          <h1 className={`${headerStyle} block sm:hidden`}>choice.</h1>
+        </motion.div>
+        <Image
+          layout="raw"
+          src={mainImage}
+          alt=""
+          className="h-full w-full object-cover object-center"
+          priority
+          // placeholder="blur"
+        />
+        <motion.div variants={collectionListAnimation} initial="from" animate="to">
+          <CollectionList />
+          <Stack
+            direction={'column'}
+            spacing={3}
+            align={'center'}
+            alignSelf={'center'}
+            position={'relative'}
           >
-            立即体验
-          </Button>
-          <Box>
-            <Icon
-              as={Arrow}
-              color={useColorModeValue('gray.800', 'gray.300')}
-              w={71}
-              position={'absolute'}
-              right={-71}
-              top={'10px'}
-            />
-            <Text
-              fontSize={'lg'}
-              fontFamily={'Caveat'}
-              position={'absolute'}
-              right={'-125px'}
-              top={'-15px'}
-              transform={'rotate(10deg)'}
+            <Button
+              // colorScheme={'gray'}
+              bg={'black'}
+              color={'white'}
+              rounded={'full'}
+              px={6}
+              size="lg"
+              // width={350}
+              // height={20}
+              // rightIcon={<ArrowForwardIcon />}
+              _hover={{
+                bg: 'blackAlpha.300',
+                color: 'black',
+              }}
+              onClick={() => router.push('/login')}
             >
-              Starting at $15/mo
-            </Text>
-          </Box>
-        </Stack>
-        <Footer />
+              立即体验
+            </Button>
+            <Box>
+              <Icon
+                as={Arrow}
+                color={useColorModeValue('gray.800', 'gray.300')}
+                w={71}
+                position={'absolute'}
+                right={-71}
+                top={'10px'}
+              />
+              <Text
+                fontSize={'lg'}
+                fontFamily={'Caveat'}
+                position={'absolute'}
+                right={'-125px'}
+                top={'-15px'}
+                transform={'rotate(10deg)'}
+              >
+                Starting at $15/mo
+              </Text>
+            </Box>
+          </Stack>
+          <Footer />
+        </motion.div>
       </motion.div>
-    </motion.div>
-  </div>
-);
+    </div>
+  );
+};
 
 export default Home;

modules/login/components/LoginForm.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
 // import { useState } from 'react';
 // import { useApolloClient } from '@apollo/client';
 import { useFormik } from 'formik';
 // import * as Yup from 'yup';
+import router from 'next/router';
 
 import LoaderButton from '@/common/components/button/components/LoaderButton';
 import InputComponent from '@/common/components/input/components/InputComponent';
@@ -61,6 +63,7 @@ const RegistrationForm = () => {
       //     setLoading(false);
       //   });
       passwordLogin({ username: values.username, password: values.password });
+      router.push('/features');
     },
     validate: (values) => {
       const errors: { [key: string]: string } = {};

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",