mirror of
https://github.com/langgenius/dify.git
synced 2024-11-16 11:42:29 +08:00
marketplace
This commit is contained in:
StyleZhang
parent
cd03795f2c
commit
58a913b09d
35
web/app/components/plugins/marketplace/index.tsx
Normal file
35
web/app/components/plugins/marketplace/index.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import SearchBox from './search-box'
|
||||
|
||||
const Marketplace = () => {
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<h1 className='mb-2 text-center title-4xl-semibold text-text-primary'>
|
||||
Empower your AI development
|
||||
</h1>
|
||||
<h2 className='flex justify-center items-center mb-4 text-center body-md-regular text-text-tertiary'>
|
||||
Discover
|
||||
<span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
|
||||
models
|
||||
</span>
|
||||
,
|
||||
<span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
|
||||
tools
|
||||
</span>
|
||||
,
|
||||
<span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
|
||||
extensions
|
||||
</span>
|
||||
and
|
||||
<span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
|
||||
bundles
|
||||
</span>
|
||||
in Dify Marketplace
|
||||
</h2>
|
||||
<div className='flex items-center justify-center'>
|
||||
<SearchBox onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Marketplace
|
||||
50
web/app/components/plugins/marketplace/search-box/index.tsx
Normal file
50
web/app/components/plugins/marketplace/search-box/index.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
'use client'
|
||||
import {
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import TagsFilter from './tags-filter'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
|
||||
type SearchBoxProps = {
|
||||
onChange: (searchText: string, tags: string[]) => void
|
||||
}
|
||||
const SearchBox = ({
|
||||
onChange,
|
||||
}: SearchBoxProps) => {
|
||||
const [searchText, setSearchText] = useState('')
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
||||
|
||||
const handleTagsChange = useCallback((tags: string[]) => {
|
||||
setSelectedTags(tags)
|
||||
onChange(searchText, tags)
|
||||
}, [searchText, onChange])
|
||||
|
||||
return (
|
||||
<div className='flex items-center p-1.5 w-[640px] h-11 border border-components-chat-input-border bg-components-panel-bg-blur rounded-xl shadow-md'>
|
||||
<TagsFilter
|
||||
value={selectedTags}
|
||||
onChange={handleTagsChange}
|
||||
/>
|
||||
<div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
|
||||
<div className='grow flex items-center p-1 pl-2'>
|
||||
<div className='flex items-center mr-2 py-0.5 w-full'>
|
||||
<input
|
||||
className='grow block outline-none appearance-none body-md-medium text-text-secondary'
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
setSearchText(e.target.value)
|
||||
onChange(e.target.value, selectedTags)
|
||||
}}
|
||||
/>
|
||||
<ActionButton onClick={() => setSearchText('')}>
|
||||
<RiCloseLine className='w-4 h-4' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchBox
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
RiArrowDownSLine,
|
||||
RiCloseCircleFill,
|
||||
RiFilter3Line,
|
||||
RiSearchLine,
|
||||
} from '@remixicon/react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Checkbox from '@/app/components/base/checkbox'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type TagsFilterProps = {
|
||||
value: string[]
|
||||
onChange: (tags: string[]) => void
|
||||
}
|
||||
const TagsFilter = ({
|
||||
value,
|
||||
onChange,
|
||||
}: TagsFilterProps) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [searchText, setSearchText] = useState('')
|
||||
const options = [
|
||||
{
|
||||
value: 'search',
|
||||
text: 'Search',
|
||||
},
|
||||
{
|
||||
value: 'image',
|
||||
text: 'Image',
|
||||
},
|
||||
]
|
||||
const filteredOptions = options.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase()))
|
||||
const handleCheck = (id: string) => {
|
||||
if (value.includes(id))
|
||||
onChange(value.filter(tag => tag !== id))
|
||||
else
|
||||
onChange([...value, id])
|
||||
}
|
||||
const selectedTagsLength = value.length
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement='bottom-start'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: -6,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(
|
||||
'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
|
||||
selectedTagsLength && 'text-text-secondary',
|
||||
open && 'bg-state-base-hover',
|
||||
)}>
|
||||
<div className='p-0.5'>
|
||||
<RiFilter3Line className='w-4 h-4' />
|
||||
</div>
|
||||
<div className={cn(
|
||||
'flex items-center p-1 system-sm-medium',
|
||||
)}>
|
||||
{
|
||||
!selectedTagsLength && 'All Tags'
|
||||
}
|
||||
{
|
||||
!!selectedTagsLength && value.slice(0, 2).join(',')
|
||||
}
|
||||
{
|
||||
selectedTagsLength > 2 && (
|
||||
<div className='ml-1 system-xs-medium text-text-tertiary'>
|
||||
+{selectedTagsLength - 2}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
!!selectedTagsLength && (
|
||||
<RiCloseCircleFill
|
||||
className='w-4 h-4 text-text-quaternary cursor-pointer'
|
||||
onClick={() => onChange([])}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!selectedTagsLength && (
|
||||
<RiArrowDownSLine className='w-4 h-4' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent>
|
||||
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
|
||||
<div className='p-2 pb-1'>
|
||||
<div className='flex items-center p-2'>
|
||||
<RiSearchLine className='mr-0.5 w-4 h-4 text-text-placeholder' />
|
||||
<input
|
||||
className='px-1 system-sm-regular outline-none appearance-none'
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-1 max-h-[448px] overflow-y-auto'>
|
||||
{
|
||||
filteredOptions.map(option => (
|
||||
<div
|
||||
key={option.value}
|
||||
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
>
|
||||
<Checkbox
|
||||
className='mr-1'
|
||||
checked={value.includes(option.value)}
|
||||
onCheck={() => handleCheck(option.value)}
|
||||
/>
|
||||
<div className='px-1 system-sm-medium text-text-secondary'>
|
||||
{option.text}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default TagsFilter
|
||||
Loading…
Reference in New Issue
Block a user