progress circle

web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx

@@ -6,6 +6,7 @@ import { RiCloseLine } from '@remixicon/react'
 import { useStore } from '../store'
 import FileListItem from './file-list-flex-item'
 import Button from '@/app/components/base/button'
+import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 
 const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
   const files = useStore(s => s.files)
@@ -21,9 +22,21 @@ const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
             key={file._id}
             className='relative'
           >
-            <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
+            <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'>
               <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
             </Button>
+            <div
+              className='absolute inset-0 border-[2px] border-effects-image-frame shadow-md bg-black'
+            >
+              <ProgressCircle
+                className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
+                percentage={30}
+                size={16}
+                circleStrokeColor='stroke-components-progress-white-border'
+                circleFillColor='fill-transparent'
+                sectorFillColor='fill-components-progress-white-progress'
+              />
+            </div>
             <FileListItem />
           </div>
         ))

web/app/components/base/progress-bar/progress-circle.tsx

@@ -2,6 +2,7 @@ import { memo } from 'react'
 import cn from '@/utils/classnames'
 
 type ProgressCircleProps = {
+  className?: string
   percentage?: number
   size?: number
   circleStrokeWidth?: number
@@ -11,6 +12,7 @@ type ProgressCircleProps = {
 }
 
 const ProgressCircle: React.FC<ProgressCircleProps> = ({
+  className,
   percentage = 0,
   size = 12,
   circleStrokeWidth = 1,
@@ -38,6 +40,7 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
       width={size + circleStrokeWidth}
       height={size + circleStrokeWidth}
       viewBox={`0 0 ${size + circleStrokeWidth} ${size + circleStrokeWidth}`}
+      className={className}
     >
       <circle
         className={cn(