Merge pull request #352 from toeverything/feat-homepage-master

Feat homepage master

apps/venus/src/app/AboutUs.tsx

@@ -1,18 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Box, Button, Grid, Typography } from '@mui/joy';
+import { Box, Grid, Typography } from '@mui/joy';
-import Option from '@mui/joy/Option';
-import Select from '@mui/joy/Select';
 // eslint-disable-next-line no-restricted-imports
 import { useMediaQuery } from '@mui/material';
-
 import 'github-markdown-css';
 import AboutText from './about.mdx';
-import { AFFiNEFooter, AFFiNEImage } from './Common';
+import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './Common';
-import { options } from './i18n';
 import KeepUpdate from './keeupdate.png';
-
 export const AboutUs = () => {
     const matches = useMediaQuery('(max-width: 1024px)');
     const navigate = useNavigate();
@@ -23,58 +18,7 @@ export const AboutUs = () => {
     };
     return (
         <>
-            <Grid
+            <AFFiNEHeader />
-                container
-                spacing={2}
-                sx={{
-                    maxWidth: '1280px',
-                    margin: 'auto',
-                }}
-            >
-                <Grid xs={6}>
-                    <Button
-                        size="lg"
-                        variant="plain"
-                        onClick={() => navigate('/')}
-                        sx={{
-                            padding: matches ? '0' : '0 0.5em',
-                            ':hover': { backgroundColor: 'unset' },
-                            fontSize: '24px',
-                            '@media (max-width: 1024px)': {
-                                fontSize: '16px',
-                            },
-                        }}
-                    >
-                        AFFiNE
-                    </Button>
-                </Grid>
-                <Grid xs={6} sx={{ display: 'flex', justifyContent: 'right' }}>
-                    <Button
-                        onClick={() => {
-                            window.open('https://blog.affine.pro');
-                        }}
-                        variant="plain"
-                        sx={{
-                            padding: matches ? '0' : '0 0.5em',
-                            ':hover': { backgroundColor: 'unset' },
-                            fontSize: '24px',
-                            '@media (max-width: 1024px)': {
-                                fontSize: '16px',
-                            },
-                        }}
-                        size="lg"
-                    >
-                        Blog
-                    </Button>
-                    <Select defaultValue="en" onChange={changeLanguage}>
-                        {options.map(option => (
-                            <Option key={option.value} value={option.value}>
-                                {option.text}
-                            </Option>
-                        ))}
-                    </Select>
-                </Grid>
-            </Grid>
             <Grid xs={12} sx={{ display: 'flex', marginTop: '4vh!important' }}>
                 <Box
                     sx={{

apps/venus/src/app/App.tsx

@@ -6,16 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { Box, Button, Grid, Typography } from '@mui/joy';
-import Option from '@mui/joy/Option';
-import Select from '@mui/joy/Select';
 import { styled } from '@mui/joy/styles';
 import { LogoIcon } from '@toeverything/components/icons';
 // eslint-disable-next-line no-restricted-imports
 import { useMediaQuery } from '@mui/material';
 
 import CollaborationImage from './collaboration.png';
-import { AFFiNEFooter, AFFiNEImage } from './Common';
+import { AFFiNEFooter, AFFiNEHeader, AFFiNEImage } from './Common';
-import { options } from './i18n';
 import { GitHub } from './Icons';
 import PageImage from './page.png';
 import ShapeImage from './shape.png';
@@ -220,71 +217,7 @@ export function App() {
     };
     return (
         <>
-            <Grid
+            <AFFiNEHeader />
-                container
-                spacing={2}
-                sx={{
-                    maxWidth: '1280px',
-                    margin: 'auto',
-                }}
-            >
-                <Grid xs={6}>
-                    <Button
-                        size="lg"
-                        variant="plain"
-                        sx={{
-                            padding: matches ? '0' : '0 0.5em',
-                            ':hover': { backgroundColor: 'unset' },
-                            fontSize: '24px',
-                            '@media (max-width: 1024px)': {
-                                fontSize: '16px',
-                            },
-                        }}
-                    >
-                        AFFiNE
-                    </Button>
-                </Grid>
-                <Grid xs={6} sx={{ display: 'flex', justifyContent: 'right' }}>
-                    <GitHub flat />
-                    <Button
-                        onClick={() => window.open('https://blog.affine.pro')}
-                        variant="plain"
-                        sx={{
-                            padding: matches ? '0' : '0 0.5em',
-                            ':hover': { backgroundColor: 'unset' },
-                            fontSize: '24px',
-                            '@media (max-width: 1024px)': {
-                                fontSize: '16px',
-                            },
-                        }}
-                        size="lg"
-                    >
-                        Blog
-                    </Button>
-                    <Button
-                        onClick={() => navigate('/aboutus')}
-                        variant="plain"
-                        sx={{
-                            padding: matches ? '0' : '0 0.5em',
-                            ':hover': { backgroundColor: 'unset' },
-                            fontSize: '24px',
-                            '@media (max-width: 1024px)': {
-                                fontSize: '16px',
-                            },
-                        }}
-                        size="lg"
-                    >
-                        About Us
-                    </Button>
-                    <Select defaultValue="en" onChange={changeLanguage}>
-                        {options.map(option => (
-                            <Option key={option.value} value={option.value}>
-                                {option.text}
-                            </Option>
-                        ))}
-                    </Select>
-                </Grid>
-            </Grid>
             <Grid xs={12} sx={{ display: 'flex', marginTop: '12vh!important' }}>
                 <Box
                     sx={{

apps/venus/src/app/Common.tsx

@@ -1,12 +1,20 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { Box, Button, Grid, Typography } from '@mui/joy';
+import Option from '@mui/joy/Option';
+import Select from '@mui/joy/Select';
+import { styled } from '@mui/joy/styles';
+// eslint-disable-next-line no-restricted-imports
+import { useMediaQuery } from '@mui/material';
+
 import GitHubIcon from '@mui/icons-material/GitHub';
 import RedditIcon from '@mui/icons-material/Reddit';
 import TelegramIcon from '@mui/icons-material/Telegram';
-import { Box, Button, Grid, Typography } from '@mui/joy';
+import { options } from './i18n';
-import { styled } from '@mui/joy/styles';
-// eslint-disable-next-line no-restricted-imports
-import { useTranslation } from 'react-i18next';
 import { DiscordIcon, GitHub } from './Icons';
+// eslint-disable-next-line no-restricted-imports
 import LogoImage from './logo.png';
 
 export const AFFiNEImage = styled('img')({
@@ -333,3 +341,86 @@ export const AFFiNEFooter = ({
         </>
     );
 };
+
+export const AFFiNEHeader = () => {
+    const matches = useMediaQuery('(max-width: 1024px)');
+    const navigate = useNavigate();
+    const { i18n } = useTranslation();
+
+    const changeLanguage = (event: any) => {
+        i18n.changeLanguage(event);
+    };
+    const matchesIPAD = useMediaQuery('(max-width: 768px)');
+    return (
+        <Grid
+            container
+            spacing={2}
+            sx={{
+                maxWidth: '1280px',
+                margin: 'auto',
+            }}
+        >
+            <Grid xs={6}>
+                <Button
+                    size="lg"
+                    variant="plain"
+                    sx={{
+                        padding: matches ? '0' : '0 0.5em',
+                        ':hover': { backgroundColor: 'unset' },
+                        fontSize: '24px',
+                        '@media (max-width: 1024px)': {
+                            fontSize: '16px',
+                        },
+                    }}
+                    onClick={() => navigate('/')}
+                >
+                    AFFiNE
+                </Button>
+            </Grid>
+            <Grid xs={6} sx={{ display: 'flex', justifyContent: 'right' }}>
+                <GitHub flat />
+                <Button
+                    onClick={() => window.open('https://blog.affine.pro')}
+                    variant="plain"
+                    sx={{
+                        padding: matches ? '0' : '0 0.5em',
+                        ':hover': { backgroundColor: 'unset' },
+                        fontSize: '24px',
+                        '@media (max-width: 1024px)': {
+                            fontSize: '16px',
+                        },
+                    }}
+                    size="lg"
+                >
+                    Blog
+                </Button>
+                <Button
+                    onClick={() => navigate('/aboutus')}
+                    variant="plain"
+                    sx={{
+                        padding: matches ? '0' : '0 0.5em',
+                        ':hover': { backgroundColor: 'unset' },
+                        fontSize: '24px',
+                        '@media (max-width: 1024px)': {
+                            fontSize: '16px',
+                        },
+                    }}
+                    size="lg"
+                >
+                    About Us
+                </Button>
+                <Select
+                    defaultValue="en"
+                    sx={{ display: matchesIPAD ? 'none' : 'intial' }}
+                    onChange={changeLanguage}
+                >
+                    {options.map(option => (
+                        <Option key={option.value} value={option.value}>
+                            {option.text}
+                        </Option>
+                    ))}
+                </Select>
+            </Grid>
+        </Grid>
+    );
+};