From fa43d4202f9dcc602d4fc57acfc816bfd903d7f7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 9 Oct 2024 18:36:15 +0800
Subject: [PATCH] feat: plugin item

---
 .../(commonLayout)/plugins/test/card/page.tsx | 23 +++++--
 web/app/components/plugins/card-more-info.tsx |  3 +
 web/app/components/plugins/card.tsx           |  2 +-
 web/app/components/plugins/plugin-item.tsx    | 62 +++++++++++++++++++
 4 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/plugins/card-more-info.tsx
 create mode 100644 web/app/components/plugins/plugin-item.tsx

diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index 952660feea..facff918bc 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -1,17 +1,18 @@
 import Card from '@/app/components/plugins/card'
 import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card-mock'
+import PluginItem from '@/app/components/plugins/plugin-item'
 
 const PluginList = async () => {
   return (
     <div className='pb-3 bg-white'>
       <div className='mx-3 '>
         <h2 className='my-3'>Dify Plugin list</h2>
-        <div className='grid grid-cols-4 gap-3'>
-          <Card payload={toolNotion as any} />
-          <Card payload={extensionDallE as any} />
-          <Card payload={modelGPT4 as any} />
-          <Card payload={toolNotion as any} />
-          <Card payload={toolNotion as any} />
+        <div className='grid grid-cols-2 gap-3'>
+          <PluginItem payload={toolNotion as any} />
+          <PluginItem payload={extensionDallE as any} />
+          <PluginItem payload={modelGPT4 as any} />
+          <PluginItem payload={toolNotion as any} />
+          <PluginItem payload={toolNotion as any} />
         </div>
 
         <h2 className='my-3'>Install Plugin / Package under bundle</h2>
@@ -29,6 +30,16 @@ const PluginList = async () => {
             installed
           />
         </div>
+
+        <div className='my-3 h-[px] bg-gray-50'></div>
+        <h2 className='my-3'>Marketplace Plugin list</h2>
+        <div className='grid grid-cols-4 gap-3'>
+          <Card payload={toolNotion as any} />
+          <Card payload={extensionDallE as any} />
+          <Card payload={modelGPT4 as any} />
+          <Card payload={toolNotion as any} />
+          <Card payload={toolNotion as any} />
+        </div>
       </div>
     </div>
   )
diff --git a/web/app/components/plugins/card-more-info.tsx b/web/app/components/plugins/card-more-info.tsx
new file mode 100644
index 0000000000..b808cecd96
--- /dev/null
+++ b/web/app/components/plugins/card-more-info.tsx
@@ -0,0 +1,3 @@
+const CardMoreInfo = () => {
+
+}
diff --git a/web/app/components/plugins/card.tsx b/web/app/components/plugins/card.tsx
index 291b7b1a84..c3897e22c6 100644
--- a/web/app/components/plugins/card.tsx
+++ b/web/app/components/plugins/card.tsx
@@ -76,7 +76,7 @@ type DescriptionProps = {
   descriptionLineRows: number
 }
 
-const Description: FC<DescriptionProps> = ({
+export const Description: FC<DescriptionProps> = ({
   className,
   text,
   descriptionLineRows,
diff --git a/web/app/components/plugins/plugin-item.tsx b/web/app/components/plugins/plugin-item.tsx
new file mode 100644
index 0000000000..d685517ba4
--- /dev/null
+++ b/web/app/components/plugins/plugin-item.tsx
@@ -0,0 +1,62 @@
+import type { FC } from 'react'
+import React from 'react'
+import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { Github } from '../base/icons/src/public/common'
+import type { Plugin } from './types'
+import { CornerMark, Description, Icon, OrgInfo, Title } from '@/app/components/plugins/card'
+import cn from '@/utils/classnames'
+import { getLocaleOnServer } from '@/i18n/server'
+
+type Props = {
+  className?: string
+  payload: Plugin
+}
+
+const PluginItem: FC<Props> = ({
+  className,
+  payload,
+}) => {
+  const locale = getLocaleOnServer()
+  const { type, name, org, label } = payload
+
+  return (
+    <div className='p-1 bg-background-section-burn rounded-xl'>
+      <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+        <CornerMark text={type} />
+        {/* Header */}
+        <div className="flex">
+          <Icon src={payload.icon} />
+          <div className="ml-3 grow">
+            <div className="flex items-center h-5">
+              <Title title={label[locale]} />
+              <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+            </div>
+            <Description text={payload.brief[locale]} descriptionLineRows={1}></Description>
+          </div>
+        </div>
+      </div>
+      <div className='mt-1.5 mb-1 flex justify-between items-center h-4'>
+        <div className='flex items-center'>
+          <OrgInfo
+            className="mt-0.5"
+            orgName={org}
+            packageName={name}
+          />
+          <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+          <div className='text-text-tertiary system-xs-regular'>2 sets of endpoints enabled</div>
+        </div>
+
+        <div className='flex items-center'>
+          <div className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>From</div>
+          <div className='flex items-center space-x-0.5 text-text-secondary'>
+            <Github className='ml-1 w-3 h-3' />
+            <div className='system-2xs-semibold-uppercase'>GitHub</div>
+            <RiArrowRightUpLine className='w-3 h-3' />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PluginItem