|
|
|
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next' |
|
|
|
import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config' |
|
|
|
import { noop } from 'lodash-es' |
|
|
|
import { useGlobalPublicStore } from '@/context/global-public-context' |
|
|
|
import Button from '@/app/components/base/button' |
|
|
|
|
|
|
|
const Empty = () => { |
|
|
|
const { t } = useTranslation() |
|
|
|
@@ -43,14 +44,14 @@ const Empty = () => { |
|
|
|
{/* skeleton */} |
|
|
|
<div className='absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12'> |
|
|
|
{Array.from({ length: 20 }).fill(0).map((_, i) => ( |
|
|
|
<div key={i} className='h-[100px] rounded-xl bg-components-card-bg' /> |
|
|
|
<div key={i} className='h-24 rounded-xl bg-components-card-bg' /> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
{/* mask */} |
|
|
|
<div className='absolute z-20 h-full w-full bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg' /> |
|
|
|
<div className='relative z-30 flex h-full items-center justify-center'> |
|
|
|
<div className='flex flex-col items-center gap-y-3'> |
|
|
|
<div className='relative -z-10 flex h-[52px] w-[52px] items-center justify-center rounded-xl |
|
|
|
<div className='relative -z-10 flex size-14 items-center justify-center rounded-xl |
|
|
|
border-[1px] border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5'> |
|
|
|
<Group className='h-5 w-5 text-text-tertiary' /> |
|
|
|
<Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' /> |
|
|
|
@@ -58,10 +59,10 @@ const Empty = () => { |
|
|
|
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' /> |
|
|
|
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' /> |
|
|
|
</div> |
|
|
|
<div className='text-sm font-normal text-text-tertiary'> |
|
|
|
<div className='system-md-regular text-text-tertiary'> |
|
|
|
{text} |
|
|
|
</div> |
|
|
|
<div className='flex w-[240px] flex-col'> |
|
|
|
<div className='flex w-[236px] flex-col'> |
|
|
|
<input |
|
|
|
type='file' |
|
|
|
ref={fileInputRef} |
|
|
|
@@ -79,10 +80,9 @@ const Empty = () => { |
|
|
|
{ icon: Github, text: t('plugin.list.source.github'), action: 'github' }, |
|
|
|
{ icon: FileZip, text: t('plugin.list.source.local'), action: 'local' }, |
|
|
|
].map(({ icon: Icon, text, action }) => ( |
|
|
|
<div |
|
|
|
<Button |
|
|
|
key={action} |
|
|
|
className='flex cursor-pointer items-center gap-x-1 rounded-lg border-[0.5px] bg-components-button-secondary-bg |
|
|
|
px-3 py-2 shadow-xs shadow-shadow-shadow-3 hover:bg-state-base-hover' |
|
|
|
className='justify-start gap-x-0.5 px-3' |
|
|
|
onClick={() => { |
|
|
|
if (action === 'local') |
|
|
|
fileInputRef.current?.click() |
|
|
|
@@ -92,9 +92,9 @@ const Empty = () => { |
|
|
|
setSelectedAction(action) |
|
|
|
}} |
|
|
|
> |
|
|
|
<Icon className="h-4 w-4 text-text-tertiary" /> |
|
|
|
<span className='system-md-regular text-text-secondary'>{text}</span> |
|
|
|
</div> |
|
|
|
<Icon className='size-4' /> |
|
|
|
<span className='px-0.5'>{text}</span> |
|
|
|
</Button> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |