feat: base card component

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -1,8 +1,16 @@
 import Card from '@/app/components/plugins/card'
+import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card-mock'
+
 const PluginList = async () => {
   return (
     <>
-      <Card />
+      <div className='mx-3 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>
     </>
   )
 }

web/app/components/base/icons/assets/vender/plugin/left-corner.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Shape" d="M0 0H13V20C9.98017 20 7.26458 18.1615 6.14305 15.3576L0 0Z" fill="#F9FAFB"/>
+</svg>

web/app/components/base/icons/src/public/files/Unknow.json

@@ -195,5 +195,5 @@
 			}
 		]
 	},
-	"name": "Unknown"
+	"name": "Unknow"
 }

web/app/components/base/icons/src/public/files/Unknow.tsx

@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import data from './Unknown.json'
+import data from './Unknow.json'
 import IconBase from '@/app/components/base/icons/IconBase'
 import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
 
@@ -11,6 +11,6 @@ const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseP
   ref,
 ) => <IconBase {...props} ref={ref} data={data as IconData} />)
 
-Icon.displayName = 'Unknown'
+Icon.displayName = 'Unknow'
 
 export default Icon

web/app/components/base/icons/src/public/files/index.ts

@@ -6,6 +6,6 @@ export { default as Json } from './Json'
 export { default as Md } from './Md'
 export { default as Pdf } from './Pdf'
 export { default as Txt } from './Txt'
-export { default as Unknown } from './Unknown'
+export { default as Unknow } from './Unknow'
 export { default as Xlsx } from './Xlsx'
 export { default as Yaml } from './Yaml'

web/app/components/base/icons/src/vender/plugin/LeftCorner.json

@@ -0,0 +1,27 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "13",
+			"height": "20",
+			"viewBox": "0 0 13 20",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"id": "Shape",
+					"d": "M0 0H13V20C9.98017 20 7.26458 18.1615 6.14305 15.3576L0 0Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "LeftCorner"
+}

web/app/components/base/icons/src/vender/plugin/LeftCorner.tsx

@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import data from './CuteRobot.json'
+import data from './LeftCorner.json'
 import IconBase from '@/app/components/base/icons/IconBase'
 import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
 
@@ -11,6 +11,6 @@ const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseP
   ref,
 ) => <IconBase {...props} ref={ref} data={data as IconData} />)
 
-Icon.displayName = 'CuteRobot'
+Icon.displayName = 'LeftCorner'
 
 export default Icon

web/app/components/base/icons/src/vender/plugin/index.ts

@@ -0,0 +1 @@
+export { default as LeftCorner } from './LeftCorner'

web/app/components/base/icons/src/vender/solid/communication/CuteRobote.json

@@ -34,5 +34,5 @@
 			}
 		]
 	},
-	"name": "CuteRobot"
+	"name": "CuteRobote"
 }

web/app/components/base/icons/src/vender/solid/communication/CuteRobote.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './CuteRobote.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'CuteRobote'
+
+export default Icon

web/app/components/base/icons/src/vender/solid/communication/index.ts

@@ -1,6 +1,6 @@
 export { default as AiText } from './AiText'
 export { default as ChatBot } from './ChatBot'
-export { default as CuteRobot } from './CuteRobot'
+export { default as CuteRobote } from './CuteRobote'
 export { default as EditList } from './EditList'
 export { default as MessageDotsCircle } from './MessageDotsCircle'
 export { default as MessageFast } from './MessageFast'

web/app/components/plugins/card-mock.ts

@@ -0,0 +1,49 @@
+import { PluginType } from './types'
+
+export const toolNotion = {
+  type: PluginType.tool,
+  org: 'Notion',
+  name: 'notion page search',
+  latest_version: '1.0.0',
+  icon: 'https://via.placeholder.com/150',
+  label: {
+    'en-US': 'Notion Page Search',
+    'zh-Hans': 'Notion 页面搜索',
+  },
+  brief: {
+    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.',
+    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。',
+  },
+}
+
+export const extensionDallE = {
+  type: PluginType.extension,
+  org: 'OpenAI',
+  name: 'DALL-E',
+  latest_version: '1.0.0',
+  icon: 'https://via.placeholder.com/150',
+  label: {
+    'en-US': 'DALL-E',
+    'zh-Hans': 'DALL-E',
+  },
+  brief: {
+    'en-US': 'Description: A simple plugin to use OpenAI DALL-E model.',
+    'zh-Hans': '一个使用 OpenAI DALL-E 模型的简单插件。',
+  },
+}
+
+export const modelGPT4 = {
+  type: PluginType.model,
+  org: 'OpenAI',
+  name: 'GPT-4',
+  latest_version: '1.0.0',
+  icon: 'https://via.placeholder.com/150',
+  label: {
+    'en-US': 'GPT-4',
+    'zh-Hans': 'GPT-4',
+  },
+  brief: {
+    'en-US': 'Description: A simple plugin to use OpenAI GPT-4 model.',
+    'zh-Hans': '一个使用 OpenAI GPT-4 模型的简单插件。',
+  },
+}

web/app/components/plugins/card.tsx

@@ -1,22 +1,136 @@
-const Card = () => {
+import React, { useMemo } from 'react'
+import { RiVerifiedBadgeLine } from '@remixicon/react'
+import type { FC } from 'react'
+import { LeftCorner } from '../base/icons/src/vender/plugin'
+import type { Plugin } from './types'
+import { getLocaleOnServer } from '@/i18n/server'
+import cn from '@/utils/classnames'
+
+export const CornerMark = ({ text }: { text: string }) => {
   return (
-    <div className='border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
-      <div className='flex items-center p-4 py-2'>
-        <div className='mr-3 w-10 h-10 rounded-[10px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'></div>
-        <div>
-          <div className='flex items-center mb-0.5 system-md-semibold text-text-secondary'>
-            Notion Page Search
-          </div>
-          <div className='flex items-center system-xs-regular text-text-tertiary'>
-            Notion
-            <div className='mx-0.5 text-text-quaternary'>/</div>
-            notion-page-search
+    <div className='absolute top-0 right-0 flex pl-[13px] '>
+      <LeftCorner className="text-background-section" />
+      <div className="h-5 leading-5 rounded-tr-xl pr-2 bg-background-section text-text-tertiary system-2xs-medium-uppercase">{text}</div>
+    </div>
+  )
+}
+
+export const Icon = ({
+  className,
+  src,
+  installed = false,
+}: {
+  className?: string
+  src: string
+  installed?: boolean
+}) => {
+  return (
+    <div
+      className={cn('shrink-0 relative w-10 h-10 rounded-md bg-center bg-no-repeat bg-contain', className)}
+      style={{
+        backgroundImage: `url(${src})`,
+      }}
+    >
+    </div>
+  )
+}
+
+export const Title = ({
+  title,
+}: {
+  title: string
+}) => {
+  return (
+    <div className='max-w-[150px] truncate text-text-secondary system-md-semibold'>
+      {title}
+    </div>
+  )
+}
+
+export const OrgInfo = ({
+  className,
+  orgName,
+  packageName,
+}: {
+  className?: string
+  orgName: string
+  packageName: string
+}) => {
+  return <div className={cn('flex items-center h-4 space-x-0.5', className)}>
+    <span className="shrink-0 text-text-tertiary system-xs-regular">{orgName}</span>
+    <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
+    <span className="shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular">{packageName}</span>
+  </div>
+}
+
+type DescriptionProps = {
+  className?: string
+  text: string
+  descriptionLineRows: number
+}
+
+const Description: FC<DescriptionProps> = ({
+  className,
+  text,
+  descriptionLineRows,
+}) => {
+  const lineClassName = useMemo(() => {
+    if (descriptionLineRows === 1)
+      return 'truncate'
+    else if (descriptionLineRows === 2)
+      return 'line-clamp-2'
+    else
+      return 'line-clamp-3'
+  }, [descriptionLineRows])
+  return (
+    <div className={cn('text-text-tertiary system-xs-regular', lineClassName, className)}>
+      {text}
+    </div>
+  )
+}
+
+type Props = {
+  className?: string
+  payload: Plugin
+  installed?: boolean
+  descriptionLineRows?: number
+  footer?: React.ReactNode
+}
+
+const Card = ({
+  className,
+  payload,
+  installed,
+  descriptionLineRows = 2,
+  footer,
+}: Props) => {
+  const locale = getLocaleOnServer()
+
+  const { type, name, org, label } = payload
+  return (
+    <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')}>
+      <CornerMark text={type} />
+      {/* Header */}
+      <div className="flex">
+        <Icon src={payload.icon} installed={installed} />
+        <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>
+          <OrgInfo
+            className="mt-0.5"
+            orgName={org}
+            packageName={name}
+          />
         </div>
       </div>
-      <div className='px-4 pt-1 pb-2 system-xs-regular text-text-tertiary'>
-        Search Notion pages and open visited ones faster. No admin access required.
-      </div>
+      <Description
+        className="mt-3"
+        text={payload.brief[locale]}
+        descriptionLineRows={descriptionLineRows}
+      />
+      {footer && <div>{footer}</div>}
     </div>
   )
 }

web/app/components/plugins/types.ts

@@ -1,9 +1,10 @@
 import type { CredentialFormSchemaBase } from '../header/account-setting/model-provider-page/declarations'
+import type { Locale } from '@/i18n'
 
 export enum PluginType {
-  plugin = 'plugin',
+  tool = 'tool',
   model = 'model',
-  extension = 'Extension',
+  extension = 'extension',
 }
 
 export type Plugin = {
@@ -12,14 +13,8 @@ export type Plugin = {
   'name': string
   'latest_version': string
   'icon': string
-  'label': {
-    'en_US': string
-    'zh_Hans': string
-  }
-  'brief': {
-    'en_US': string
-    'zh_Hans': string
-  }
+  'label': Record<Locale, string>
+  'brief': Record<Locale, string>
   // Repo readme.md content
   'introduction': string
   'repository': string