初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
'use client'
 
import { useMarketplaceContext } from '../context'
import {
  useMixedTranslation,
  useSearchBoxAutoAnimate,
} from '../hooks'
import SearchBox from './index'
import cn from '@/utils/classnames'
 
type SearchBoxWrapperProps = {
  locale?: string
  searchBoxAutoAnimate?: boolean
}
const SearchBoxWrapper = ({
  locale,
  searchBoxAutoAnimate,
}: SearchBoxWrapperProps) => {
  const { t } = useMixedTranslation(locale)
  const intersected = useMarketplaceContext(v => v.intersected)
  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
  const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
  const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
 
  return (
    <SearchBox
      inputClassName={cn(
        'z-[0] mx-auto w-[640px] shrink-0',
        searchBoxCanAnimate && 'sticky top-3 z-[11]',
        !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
      )}
      search={searchPluginText}
      onSearchChange={handleSearchPluginTextChange}
      tags={filterPluginTags}
      onTagsChange={handleFilterPluginTagsChange}
      size='large'
      locale={locale}
      placeholder={t('plugin.searchPlugins')}
    />
  )
}
 
export default SearchBoxWrapper