From b5edc64b2ab718ebbd6251b74fb117e87753067b Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Wed, 9 Oct 2024 15:06:09 +0800
Subject: [PATCH] plugin type switch

---
 web/app/(commonLayout)/plugins/Container.tsx  | 38 +++++++----
 .../components/plugins/marketplace/index.tsx  | 54 ++++++++-------
 .../marketplace/plugin-type-switch.tsx        | 67 +++++++++++++++++++
 .../plugins/marketplace/search-box/index.tsx  | 10 ++-
 4 files changed, 128 insertions(+), 41 deletions(-)
 create mode 100644 web/app/components/plugins/marketplace/plugin-type-switch.tsx

diff --git a/web/app/(commonLayout)/plugins/Container.tsx b/web/app/(commonLayout)/plugins/Container.tsx
index 58d996e7de..7adf0405b3 100644
--- a/web/app/(commonLayout)/plugins/Container.tsx
+++ b/web/app/(commonLayout)/plugins/Container.tsx
@@ -16,6 +16,7 @@ import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import Marketplace from '@/app/components/plugins/marketplace'
 
 const Container = () => {
   const { t } = useTranslation()
@@ -99,19 +100,30 @@ const Container = () => {
           </div>
         </div>
       </div>
-      <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
-        <div className='h-px self-stretch bg-divider-subtle'></div>
-        <div className='flex items-center gap-2 self-stretch'>
-          {/* Filter goes here */}
-        </div>
-      </div>
-      <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
-        {/* Plugin cards go here */}
-      </div>
-      {activeTab === 'plugins' && <div className='flex items-center justify-center py-4 gap-2 text-text-quaternary'>
-        <RiDragDropLine className='w-4 h-4' />
-        <span className='system-xs-regular'>Drop plugin package here to install</span>
-      </div>}
+      {
+        activeTab === 'plugins' && (
+          <>
+            <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
+              <div className='h-px self-stretch bg-divider-subtle'></div>
+              <div className='flex items-center gap-2 self-stretch'>
+                {/* Filter goes here */}
+              </div>
+            </div>
+            <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
+              {/* Plugin cards go here */}
+            </div>
+            <div className='flex items-center justify-center py-4 gap-2 text-text-quaternary'>
+              <RiDragDropLine className='w-4 h-4' />
+              <span className='system-xs-regular'>Drop plugin package here to install</span>
+            </div>
+          </>
+        )
+      }
+      {
+        activeTab === 'discover' && (
+          <Marketplace />
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index f35f455618..a9a45159a8 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,32 +1,36 @@
 import SearchBox from './search-box'
+import PluginTypeSwitch from './plugin-type-switch'
 
 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 className='w-full bg-background-body'>
+      <div className='py-10 bg-background-body'>
+        <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>
   )
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
new file mode 100644
index 0000000000..3793e463f7
--- /dev/null
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import {
+  RiHammerLine,
+  RiPuzzle2Line,
+} from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+type PluginTypeSwitchProps = {
+  onChange: (type: string) => void
+}
+const options = [
+  {
+    value: 'all',
+    text: 'All',
+    icon: null,
+  },
+  {
+    value: 'models',
+    text: 'Models',
+    icon: null,
+  },
+  {
+    value: 'tools',
+    text: 'Tools',
+    icon: <RiHammerLine className='mr-1.5 w-4 h-4' />,
+  },
+  {
+    value: 'extensions',
+    text: 'Extensions',
+    icon: <RiPuzzle2Line className='mr-1.5 w-4 h-4' />,
+  },
+  {
+    value: 'bundles',
+    text: 'Bundles',
+    icon: null,
+  },
+]
+const PluginTypeSwitch = ({
+  onChange,
+}: PluginTypeSwitchProps) => {
+  const [activeType, setActiveType] = useState('all')
+
+  return (
+    <div className='flex items-center justify-center space-x-2'>
+      {
+        options.map(option => (
+          <div
+            key={option.value}
+            className={cn(
+              'flex items-center px-3 h-8 border border-transparent rounded-xl cursor-pointer hover:bg-state-base-hover hover:text-text-secondary system-md-medium text-text-tertiary',
+              activeType === option.value && 'border-components-main-nav-nav-button-border !bg-components-main-nav-nav-button-bg-active !text-components-main-nav-nav-button-text-active shadow-xs',
+            )}
+            onClick={() => {
+              setActiveType(option.value)
+              onChange(option.value)
+            }}
+          >
+            {option.icon}
+            {option.text}
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default PluginTypeSwitch
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index e29256b555..1addb4cdd5 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -38,9 +38,13 @@ const SearchBox = ({
               onChange(e.target.value, selectedTags)
             }}
           />
-          <ActionButton onClick={() => setSearchText('')}>
-            <RiCloseLine className='w-4 h-4' />
-          </ActionButton>
+          {
+            searchText && (
+              <ActionButton onClick={() => setSearchText('')}>
+                <RiCloseLine className='w-4 h-4' />
+              </ActionButton>
+            )
+          }
         </div>
       </div>
     </div>