feat: support onTagClick routing
This commit is contained in:
parent
4e32cad1fd
commit
1c6c718415
|
@ -1,16 +1,40 @@
|
||||||
|
import { addTopicsToQuery } from '@/utils/search.utils'
|
||||||
import { Tag } from '@acid-info/lsd-react'
|
import { Tag } from '@acid-info/lsd-react'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
const Tags = ({ tags }: { tags: string[] }) =>
|
const Tags = ({ tags }: { tags: string[] }) => {
|
||||||
tags.length > 0 ? (
|
const router = useRouter()
|
||||||
|
|
||||||
|
const onTagClick = (e: React.MouseEvent<HTMLElement>, tag: string) => {
|
||||||
|
e.preventDefault()
|
||||||
|
router.push(
|
||||||
|
{
|
||||||
|
pathname: '/search',
|
||||||
|
query: {
|
||||||
|
...addTopicsToQuery([tag]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
{ shallow: true },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return tags.length > 0 ? (
|
||||||
<TagContainer>
|
<TagContainer>
|
||||||
{tags.map((tag) => (
|
{tags.map((tag) => (
|
||||||
<Tag size="small" disabled={false} key={tag}>
|
<Tag
|
||||||
|
onClick={(e) => onTagClick(e, tag)}
|
||||||
|
size="small"
|
||||||
|
disabled={false}
|
||||||
|
key={tag}
|
||||||
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</Tag>
|
</Tag>
|
||||||
))}
|
))}
|
||||||
</TagContainer>
|
</TagContainer>
|
||||||
) : null
|
) : null
|
||||||
|
}
|
||||||
|
|
||||||
const TagContainer = styled.div`
|
const TagContainer = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue