mirror of
https://github.com/langgenius/dify.git
synced 2026-07-24 04:58:32 +08:00
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import type { FC } from 'react'
|
|
import { RiFileList2Line } from '@remixicon/react'
|
|
import * as React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
type IEmptyProps = {
|
|
onClearFilter: () => void
|
|
}
|
|
|
|
const EmptyCard = React.memo(() => {
|
|
return <div className="h-32 w-full shrink-0 rounded-xl bg-background-section-burn opacity-30" />
|
|
})
|
|
|
|
EmptyCard.displayName = 'EmptyCard'
|
|
|
|
type LineProps = {
|
|
className?: string
|
|
}
|
|
|
|
const Line = React.memo(({ className }: LineProps) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="2"
|
|
height="241"
|
|
viewBox="0 0 2 241"
|
|
fill="none"
|
|
className={className}
|
|
>
|
|
<path d="M1 0.5L1 240.5" stroke="url(#paint0_linear_1989_74474)" />
|
|
<defs>
|
|
<linearGradient
|
|
id="paint0_linear_1989_74474"
|
|
x1="-7.99584"
|
|
y1="240.5"
|
|
x2="-7.88094"
|
|
y2="0.50004"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="white" stopOpacity="0.01" />
|
|
<stop offset="0.503965" stopColor="#101828" stopOpacity="0.08" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0.01" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
)
|
|
})
|
|
|
|
Line.displayName = 'Line'
|
|
|
|
const Empty: FC<IEmptyProps> = ({ onClearFilter }) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="relative z-0 flex h-full items-center justify-center">
|
|
<div className="flex flex-col items-center">
|
|
<div className="relative z-10 flex size-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5">
|
|
<RiFileList2Line className="size-6 text-text-secondary" />
|
|
<Line className="absolute top-1/2 -right-px -translate-y-1/2" />
|
|
<Line className="absolute top-1/2 -left-px -translate-y-1/2" />
|
|
<Line className="absolute top-0 left-1/2 -translate-1/2 rotate-90" />
|
|
<Line className="absolute top-full left-1/2 -translate-1/2 rotate-90" />
|
|
</div>
|
|
<div className="mt-3 system-md-regular text-text-tertiary">
|
|
{t(($) => $['segment.empty'], { ns: 'datasetDocuments' })}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="mt-1 system-sm-medium text-text-accent"
|
|
onClick={onClearFilter}
|
|
>
|
|
{t(($) => $['segment.clearFilter'], { ns: 'datasetDocuments' })}
|
|
</button>
|
|
</div>
|
|
<div className="absolute top-0 left-0 -z-20 flex size-full flex-col gap-y-3 overflow-hidden">
|
|
{Array.from({ length: 10 }).map((_, i) => (
|
|
<EmptyCard key={i} />
|
|
))}
|
|
</div>
|
|
<div className="absolute top-0 left-0 -z-10 size-full bg-dataset-chunk-list-mask-bg" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Empty)
|