mirror of https://github.com/langgenius/dify.git
feat: marketplace list
This commit is contained in:
StyleZhang
parent
f0f1bfa5d9
commit
0d85d44de5
|
|
@ -1,18 +1,35 @@
|
|||
import type { Plugin } from '../types'
|
||||
import { MarketplaceContextProvider } from './context'
|
||||
import Description from './description'
|
||||
import IntersectionLine from './intersection-line'
|
||||
import SearchBox from './search-box'
|
||||
import PluginTypeSwitch from './plugin-type-switch'
|
||||
import List from './list'
|
||||
import ListWrapper from './list/list-wrapper'
|
||||
import type { MarketplaceCollection } from './types'
|
||||
|
||||
const Marketplace = async () => {
|
||||
const marketplaceCollectionsData = await globalThis.fetch('https://marketplace.dify.dev/api/v1/collections')
|
||||
const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
|
||||
const marketplaceCollections = marketplaceCollectionsDataJson.data.collections
|
||||
const marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
|
||||
await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
|
||||
const marketplaceCollectionPluginsData = await globalThis.fetch(`https://marketplace.dify.dev/api/v1/collections/${collection.name}/plugins`)
|
||||
const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
|
||||
const plugins = marketplaceCollectionPluginsDataJson.data.plugins
|
||||
|
||||
marketplaceCollectionPluginsMap[collection.name] = plugins
|
||||
}))
|
||||
|
||||
const Marketplace = () => {
|
||||
return (
|
||||
<MarketplaceContextProvider>
|
||||
<Description />
|
||||
<IntersectionLine />
|
||||
<SearchBox />
|
||||
<PluginTypeSwitch />
|
||||
<List />
|
||||
<ListWrapper
|
||||
marketplaceCollections={marketplaceCollections}
|
||||
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
|
||||
/>
|
||||
</MarketplaceContextProvider>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,197 +1,50 @@
|
|||
'use client'
|
||||
import type { Plugin } from '../../types'
|
||||
import type { MarketplaceCollection } from '../types'
|
||||
import ListWithCollection from './list-with-collection'
|
||||
import Card from '@/app/components/plugins/card'
|
||||
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
|
||||
import { toolNotion } from '@/app/components/plugins/card/card-mock'
|
||||
|
||||
const List = () => {
|
||||
interface ListProps {
|
||||
marketplaceCollections: MarketplaceCollection[]
|
||||
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
|
||||
plugins?: Plugin[]
|
||||
}
|
||||
const List = ({
|
||||
marketplaceCollections,
|
||||
marketplaceCollectionPluginsMap,
|
||||
plugins,
|
||||
}: ListProps) => {
|
||||
return (
|
||||
<div className='px-12 py-2 bg-background-default-subtle'>
|
||||
<div className='py-3'>
|
||||
<div className='title-xl-semi-bold text-text-primary'>Featured</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
|
||||
<div className='grid grid-cols-4 gap-3 mt-2'>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
{
|
||||
!plugins && (
|
||||
<ListWithCollection
|
||||
marketplaceCollections={marketplaceCollections}
|
||||
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
)
|
||||
}
|
||||
{
|
||||
plugins && (
|
||||
<div className='grid grid-cols-4 gap-3 mt-2'>
|
||||
{
|
||||
plugins.map(plugin => (
|
||||
<Card
|
||||
key={plugin.name}
|
||||
payload={plugin}
|
||||
footer={
|
||||
<CardMoreInfo
|
||||
downloadCount={plugin.install_count}
|
||||
tags={['Search', 'Productivity']}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-3'>
|
||||
<div className='title-xl-semi-bold text-text-primary'>Popular</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
|
||||
<div className='grid grid-cols-4 gap-3 mt-2'>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
payload={toolNotion as any}
|
||||
footer={
|
||||
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
'use client'
|
||||
import type { MarketplaceCollection } from '../types'
|
||||
import type { Plugin } from '@/app/components/plugins/types'
|
||||
import Card from '@/app/components/plugins/card'
|
||||
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
|
||||
|
||||
interface ListWithCollectionProps {
|
||||
marketplaceCollections: MarketplaceCollection[]
|
||||
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
|
||||
}
|
||||
const ListWithCollection = ({
|
||||
marketplaceCollections,
|
||||
marketplaceCollectionPluginsMap,
|
||||
}: ListWithCollectionProps) => {
|
||||
return (
|
||||
<>
|
||||
{
|
||||
marketplaceCollections.map(collection => (
|
||||
<div
|
||||
key={collection.name}
|
||||
className='py-3'
|
||||
>
|
||||
<div className='title-xl-semi-bold text-text-primary'>{collection.name}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{collection.description}</div>
|
||||
<div className='grid grid-cols-4 gap-3 mt-2'>
|
||||
{
|
||||
marketplaceCollectionPluginsMap[collection.name].map(plugin => (
|
||||
<Card
|
||||
key={plugin.name}
|
||||
payload={plugin}
|
||||
footer={
|
||||
<CardMoreInfo
|
||||
downloadCount={plugin.install_count}
|
||||
tags={['Search', 'Productivity']}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListWithCollection
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
'use client'
|
||||
import type { Plugin } from '../../types'
|
||||
import type { MarketplaceCollection } from '../types'
|
||||
import List from './index'
|
||||
|
||||
interface ListWrapperProps {
|
||||
marketplaceCollections: MarketplaceCollection[]
|
||||
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
|
||||
}
|
||||
const ListWrapper = ({
|
||||
marketplaceCollections,
|
||||
marketplaceCollectionPluginsMap,
|
||||
}: ListWrapperProps) => {
|
||||
return (
|
||||
<List
|
||||
marketplaceCollections={marketplaceCollections}
|
||||
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListWrapper
|
||||
Loading…
Reference in New Issue