11 |
setValue(false)}
14 | />
15 |
19 | {children}
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Nav.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from '@iconify/react-with-api'
3 | import { defineComponent } from 'reactivue'
4 | import { city, cityName, cities, changeCity, Cities, setAbout, setSearchOpen } from '../store'
5 | import { emitter } from '../event'
6 | import { Logo } from './Logo'
7 |
8 | export const Nav = defineComponent(
9 | () => ({ cities, city, cityName, changeCity }),
10 | ({ city, cities, cityName, changeCity }) => {
11 | return (
12 |
13 |
14 | {cityName}
15 |
16 |
25 |
26 |
27 |
setSearchOpen(true)}
30 | >
31 |
32 |
33 |
emitter.emit('track')}
36 | >
37 |
38 |
39 |
40 |
setAbout(true)}
44 | >
45 |
46 |
47 |
48 | )
49 | },
50 | )
51 |
--------------------------------------------------------------------------------
/src/components/Search.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from 'react'
2 | import { Icon } from '@iconify/react-with-api'
3 | import { defineComponent } from 'reactivue'
4 | import { setSearchOpen, searchResult, searchString, setSearchString, searchOpen } from '../store'
5 | import { ListItem } from './ListItem'
6 |
7 | export const Search = defineComponent(
8 | () => ({ searchResult, searchString, searchOpen }),
9 | ({ searchResult, searchString, searchOpen }) => {
10 | const ref = useRef
(null)
11 |
12 | useEffect(() => {
13 | if (ref.current && searchOpen)
14 | ref.current?.focus()
15 | }, [])
16 |
17 | return (
18 |
22 |
23 | setSearchString(e.target.value)}
27 | placeholder="Search"
28 | className="px-3 py-4 outline-none w-full"
29 | />
30 | setSearchOpen(false)}/>
31 |
32 |
33 | {
34 | searchString
35 | ? searchResult.length
36 | ? searchResult.map(i =>
)
37 | : 无结果
38 | : 输入关键字以开始搜索
39 | }
40 |
41 |
19 |
20 |
21 |
23 |
24 |
25 |
setCurrent(null)}>
26 | {current ? : null }
27 |
28 |
setAbout(false)}>
29 |
30 |
31 |
setSearchOpen(false)}>
32 |
33 |
34 |
3 |