chore: split card component

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

@@ -1,5 +1,5 @@
 import Card from '@/app/components/plugins/card'
-import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card-mock'
+import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import PluginItem from '@/app/components/plugins/plugin-item'
 
 const PluginList = async () => {

web/app/components/plugins/card.tsx

@@ -1,145 +0,0 @@
-import React, { useMemo } from 'react'
-import { RiCheckLine, 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='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})`,
-      }}
-    >
-      {installed
-        && <div className='p-0.5 absolute bottom-[-4px] right-[-4px] w-3 h-3 rounded-full bg-white '>
-          <div className='h-full rounded-full bg-state-success-solid'>
-            <RiCheckLine className='w-full h-full text-text-primary-on-surface' />
-          </div>
-        </div>
-      }
-    </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
-}
-
-export 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', className)}>
-      <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>
-      <Description
-        className="mt-3"
-        text={payload.brief[locale]}
-        descriptionLineRows={descriptionLineRows}
-      />
-      {footer && <div>{footer}</div>}
-    </div>
-  )
-}
-
-export default Card

web/app/components/plugins/card/base/corner-mark.tsx

@@ -0,0 +1,12 @@
+import { LeftCorner } from '../../../base/icons/src/vender/plugin'
+
+const CornerMark = ({ text }: { text: string }) => {
+  return (
+    <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 default CornerMark

web/app/components/plugins/card/base/description.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  text: string
+  descriptionLineRows: number
+}
+
+const Description: FC<Props> = ({
+  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>
+  )
+}
+
+export default Description

web/app/components/plugins/card/base/icon.tsx

@@ -0,0 +1,31 @@
+import { RiCheckLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+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})`,
+      }}
+    >
+      {installed
+        && <div className='p-0.5 absolute bottom-[-4px] right-[-4px] w-3 h-3 rounded-full bg-white '>
+          <div className='h-full rounded-full bg-state-success-solid'>
+            <RiCheckLine className='w-full h-full text-text-primary-on-surface' />
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
+
+export default Icon

web/app/components/plugins/card/base/org-info.tsx

@@ -0,0 +1,19 @@
+import cn from '@/utils/classnames'
+
+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>
+}
+
+export default OrgInfo

web/app/components/plugins/card/base/title.tsx

@@ -0,0 +1,13 @@
+const Title = ({
+  title,
+}: {
+  title: string
+}) => {
+  return (
+    <div className='max-w-[150px] truncate text-text-secondary system-md-semibold'>
+      {title}
+    </div>
+  )
+}
+
+export default Title

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

@@ -1,4 +1,4 @@
-import { PluginType } from './types'
+import { PluginType } from '../types'
 
 export const toolNotion = {
   type: PluginType.tool,

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import { RiVerifiedBadgeLine } from '@remixicon/react'
+import type { Plugin } from '../types'
+import CornerMark from './base/corner-mark'
+import Icon from './base/icon'
+import Title from './base/title'
+import OrgInfo from './base/org-info'
+import Description from './base/description'
+import cn from '@/utils/classnames'
+import { getLocaleOnServer } from '@/i18n/server'
+
+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', className)}>
+      <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>
+      <Description
+        className="mt-3"
+        text={payload.brief[locale]}
+        descriptionLineRows={descriptionLineRows}
+      />
+      {footer && <div>{footer}</div>}
+    </div>
+  )
+}
+
+export default Card

web/app/components/plugins/plugin-item.tsx

@@ -3,7 +3,12 @@ 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 CornerMark from './card/base/corner-mark'
+import Description from './card/base/description'
+import Icon from './card/base/icon'
+import OrgInfo from './card/base/org-info'
+import Title from './card/base/title'
+
 import cn from '@/utils/classnames'
 import { getLocaleOnServer } from '@/i18n/server'