Showing
2 changed files
with
98 additions
and
0 deletions
1 | +import { useEffect, useState } from 'react'; | ||
2 | +import Link from 'next/link'; | ||
3 | +import { useRouter } from 'next/dist/client/router'; | ||
4 | +import { Layout, Menu } from 'antd'; | ||
5 | +import { MenuOutlined } from '@ant-design/icons'; | ||
6 | +import { useQuery } from '@apollo/client'; | ||
7 | +import { GET_ALL_POSTS } from '@src/gql/get-all-posts'; | ||
8 | + | ||
9 | +const { Header: HeaderContainer } = Layout; | ||
10 | + | ||
11 | +export default function Header() { | ||
12 | + const [selected, setSelected] = useState(null); | ||
13 | + const { query } = useRouter(); | ||
14 | + | ||
15 | + const { error, data } = useQuery(GET_ALL_POSTS); | ||
16 | + if (error) console.log(JSON.stringify(error, null, 2)); | ||
17 | + | ||
18 | + let list = []; | ||
19 | + let getAllPosts = data?.getAllPosts || []; | ||
20 | + | ||
21 | + getAllPosts.forEach((post) => { | ||
22 | + if (!list.find((category) => post.category === category)) { | ||
23 | + list.push(post.category); | ||
24 | + } | ||
25 | + }); | ||
26 | + | ||
27 | + useEffect(() => { | ||
28 | + setSelected(query.name || '/'); | ||
29 | + }, [query]); | ||
30 | + | ||
31 | + return ( | ||
32 | + <HeaderContainer className={'app-header'}> | ||
33 | + <Menu | ||
34 | + overflowedIndicator={<MenuOutlined className={'header-hbg-menu'} />} | ||
35 | + theme={'dark'} | ||
36 | + mode={'horizontal'} | ||
37 | + selectedKeys={[selected]} | ||
38 | + > | ||
39 | + {/* logo */} | ||
40 | + <Menu.Item key={'/'}> | ||
41 | + <Link href={'/'}> | ||
42 | + <a | ||
43 | + style={{ | ||
44 | + float: 'left', | ||
45 | + width: '120px', | ||
46 | + height: '31px', | ||
47 | + margin: '16px 24px 16px 0', | ||
48 | + background: 'rgba(255, 255, 255, 0.3)', | ||
49 | + }} | ||
50 | + /> | ||
51 | + </Link> | ||
52 | + </Menu.Item> | ||
53 | + {list.map((item) => ( | ||
54 | + <Menu.Item key={item} className={'header-item'}> | ||
55 | + <Link href={`/category/${item}`}> | ||
56 | + <a>{item}</a> | ||
57 | + </Link> | ||
58 | + </Menu.Item> | ||
59 | + ))} | ||
60 | + </Menu> | ||
61 | + </HeaderContainer> | ||
62 | + ); | ||
63 | +} |
1 | +import { Spin, Space } from 'antd'; | ||
2 | + | ||
3 | +export const startLoading = () => { | ||
4 | + const element = document.getElementById('app-loader'); | ||
5 | + | ||
6 | + element.style.display = 'flex'; | ||
7 | +}; | ||
8 | + | ||
9 | +export const finishLoading = () => { | ||
10 | + const element = document.getElementById('app-loader'); | ||
11 | + | ||
12 | + element.style.display = 'none'; | ||
13 | +}; | ||
14 | + | ||
15 | +export default function Loader() { | ||
16 | + return ( | ||
17 | + <Space | ||
18 | + id={'app-loader'} | ||
19 | + size="middle" | ||
20 | + style={{ | ||
21 | + position: 'fixed', | ||
22 | + top: 0, | ||
23 | + left: 0, | ||
24 | + width: '100vw', | ||
25 | + height: '100vh', | ||
26 | + display: 'none', | ||
27 | + alignItems: 'center', | ||
28 | + justifyContent: 'center', | ||
29 | + zIndex: 2, | ||
30 | + }} | ||
31 | + > | ||
32 | + <Spin size="large" /> | ||
33 | + </Space> | ||
34 | + ); | ||
35 | +} |
-
Please register or login to post a comment