feat: finish card components
Joel
1 year ago
parent
19f5684960
commit
946068967b
@ -0,0 +1,9 @@
|
||||
'use server'
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
|
||||
// Server Actions
|
||||
export async function handleDelete() {
|
||||
// revalidatePath only invalidates the cache when the included path is next visited.
|
||||
revalidatePath('/')
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { RiInstallLine } from '@remixicon/react'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
|
||||
type Props = {
|
||||
downloadCount: number
|
||||
}
|
||||
|
||||
const DownloadCount = ({
|
||||
downloadCount,
|
||||
}: Props) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-1 text-text-tertiary">
|
||||
<RiInstallLine className="shrink-0 w-3 h-3" />
|
||||
<div className="system-xs-regular">{formatNumber(downloadCount)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DownloadCount
|
||||
@ -1,3 +1,32 @@
|
||||
const CardMoreInfo = () => {
|
||||
import DownloadCount from './base/download-count'
|
||||
|
||||
type Props = {
|
||||
downloadCount: number
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
const CardMoreInfo = ({
|
||||
downloadCount,
|
||||
tags,
|
||||
}: Props) => {
|
||||
return (
|
||||
<div className="flex items-center h-5">
|
||||
<DownloadCount downloadCount={downloadCount} />
|
||||
{tags && tags.length > 0 && (
|
||||
<>
|
||||
<div className="mx-2 text-text-quaternary system-xs-regular">·</div>
|
||||
<div className="flex space-x-2">
|
||||
{tags.map(tag => (
|
||||
<div key={tag} className="flex space-x-1 system-xs-regular">
|
||||
<span className="text-text-quaternary">#</span>
|
||||
<span className="text-text-tertiary">{tag}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CardMoreInfo
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { RiVerifiedBadgeLine } from '@remixicon/react'
|
||||
import Badge from '../base/badge'
|
||||
import type { Plugin } from './types'
|
||||
import Description from './card/base/description'
|
||||
import Icon from './card/base/icon'
|
||||
import Title from './card/base/title'
|
||||
import DownloadCount from './card/base/download-count'
|
||||
import { getLocaleOnServer } from '@/i18n/server'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
payload: Plugin
|
||||
}
|
||||
|
||||
const PluginItem: FC<Props> = async ({
|
||||
className,
|
||||
payload,
|
||||
}) => {
|
||||
const locale = getLocaleOnServer()
|
||||
const { 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)}>
|
||||
{/* Header */}
|
||||
<div className="flex">
|
||||
<Icon src={payload.icon} />
|
||||
<div className="ml-3 w-0 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>
|
||||
<div className='mb-1 flex justify-between items-center h-4'>
|
||||
<div className='flex items-center'>
|
||||
<div className='text-text-tertiary system/xs-regular'>{org}</div>
|
||||
<div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
|
||||
<DownloadCount downloadCount={payload.install_count || 0} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description>
|
||||
<div className='mt-3 flex space-x-0.5'>
|
||||
{['LLM', 'text embedding', 'speech2text'].map(tag => (
|
||||
<Badge key={tag} text={tag} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PluginItem
|
||||
@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
|
||||
|
||||
type Props = {
|
||||
pluginId: string
|
||||
isShowFetchNewVersion: boolean
|
||||
isShowInfo: boolean
|
||||
isShowDelete: boolean
|
||||
onDelete: () => void
|
||||
}
|
||||
|
||||
const Action: FC<Props> = ({
|
||||
isShowFetchNewVersion,
|
||||
isShowInfo,
|
||||
isShowDelete,
|
||||
onDelete,
|
||||
}) => {
|
||||
const router = useRouter()
|
||||
|
||||
const handleFetchNewVersion = () => { }
|
||||
const handleShowInfo = () => {
|
||||
router.refresh() // refresh the page ...
|
||||
}
|
||||
// const handleDelete = () => { }
|
||||
return (
|
||||
<div className='flex space-x-1'>
|
||||
{isShowFetchNewVersion
|
||||
&& <div className='p-0.5 cursor-pointer' onClick={handleFetchNewVersion}>
|
||||
<RiLoopLeftLine className='w-5 h-5 text-text-tertiary' />
|
||||
</div>
|
||||
}
|
||||
{
|
||||
isShowInfo
|
||||
&& <div className='p-0.5 cursor-pointer' onClick={handleShowInfo}>
|
||||
<RiInformation2Line className='w-5 h-5 text-text-tertiary' />
|
||||
</div>
|
||||
}
|
||||
{
|
||||
isShowDelete
|
||||
&& <div className='p-0.5 cursor-pointer' onClick={onDelete}>
|
||||
<RiDeleteBinLine className='w-5 h-5 text-text-tertiary' />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Action)
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,6 @@
|
||||
const translation = {
|
||||
from: 'From',
|
||||
endpointsEnabled: '{{num}} sets of endpoints enabled',
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,6 @@
|
||||
const translation = {
|
||||
from: '来自',
|
||||
endpointsEnabled: '{{num}} 组端点已启用',
|
||||
}
|
||||
|
||||
export default translation
|
||||
@ -0,0 +1,4 @@
|
||||
const translation = {
|
||||
}
|
||||
|
||||
export default translation
|
||||
Loading…
Reference in New Issue