marketplace

web/app/(commonLayout)/plugins/Container.tsx

@@ -44,7 +44,7 @@ const Container = () => {
         : 'bg-background-body',
       )}
     >
-      <div className='flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1'>
+      <div className='sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1'>
         <div className='flex justify-between items-center w-full'>
           <div className='flex-1'>
             <TabSlider

web/app/components/plugins/marketplace/index.tsx

@@ -1,39 +1,12 @@
-import SearchBox from './search-box'
-import PluginTypeSwitch from './plugin-type-switch'
+import MarketplaceWrapper from './marketplace-wrapper'
+import Marketplace from './marketplace'
 
-const Marketplace = () => {
+const MarketplacePage = () => {
   return (
-    <div className='w-full'>
-      <div className='py-10'>
-        <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 mb-4'>
-          <SearchBox onChange={() => {}} />
-        </div>
-        <PluginTypeSwitch onChange={() => {}} />
-      </div>
-    </div>
+    <MarketplaceWrapper>
+      <Marketplace />
+    </MarketplaceWrapper>
   )
 }
 
-export default Marketplace
+export default MarketplacePage

web/app/components/plugins/marketplace/list.tsx

@@ -0,0 +1,90 @@
+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 = () => {
+  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']} />
+            }
+          />
+          <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 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']} />
+            }
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default List

web/app/components/plugins/marketplace/marketplace-wrapper.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+type WrapperProps = {
+  children: React.ReactNode
+}
+const MarketplaceWrapper = ({
+  children,
+}: WrapperProps) => {
+  return children
+}
+
+export default MarketplaceWrapper

web/app/components/plugins/marketplace/marketplace.tsx

@@ -0,0 +1,41 @@
+import SearchBox from './search-box'
+import PluginTypeSwitch from './plugin-type-switch'
+import List from './list'
+
+const Marketplace = () => {
+  return (
+    <div className='w-full'>
+      <div className='py-10'>
+        <h1 className='mb-2 text-center title-4xl-semi-bold 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 mb-4'>
+          <SearchBox onChange={() => {}} />
+        </div>
+        <PluginTypeSwitch onChange={() => {}} />
+      </div>
+      <List />
+    </div>
+  )
+}
+
+export default Marketplace

web/app/components/plugins/marketplace/plugin-type-switch.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import {
   RiHammerLine,

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import {
   useCallback,
   useState,

web/app/components/plugins/marketplace/search-box/tags-filter.tsx

@@ -5,7 +5,6 @@ import {
   RiArrowDownSLine,
   RiCloseCircleFill,
   RiFilter3Line,
-  RiSearchLine,
 } from '@remixicon/react'
 import {
   PortalToFollowElem,
@@ -14,6 +13,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import Checkbox from '@/app/components/base/checkbox'
 import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
 
 type TagsFilterProps = {
   value: string[]
@@ -98,14 +98,12 @@ const TagsFilter = ({
       <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>
+            <Input
+              showLeftIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              placeholder='Search tags'
+            />
           </div>
           <div className='p-1 max-h-[448px] overflow-y-auto'>
             {