ImageUpload (first attmpt)

src/components/upload/ImageUpload/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import classNames from 'classnames';
+import { ArcProgress } from '~/components/input/ArcProgress';
+
+interface IProps {
+  id?: string;
+  thumb?: string;
+  progress?: number;
+
+  is_uploading?: boolean;
+};
+
+const ImageUpload: FC<IProps> = ({
+  thumb,
+  id,
+  progress,
+  is_uploading,
+}) => {
+  return (
+    <div className={styles.wrap}>
+      <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+        {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }} />}
+        {is_uploading && <div className={styles.progress}><ArcProgress size={72} progress={progress} /></div>}
+      </div>
+    </div>
+  );
+}
+
+export { ImageUpload };

src/components/upload/ImageUpload/styles.scss

@@ -0,0 +1,52 @@
+.wrap {
+  background: lighten($content_bg, 4%);
+  padding-bottom: 100%;
+  border-radius: $radius;
+  position: relative;
+}
+
+.thumb_wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: $radius;
+  overflow: hidden;
+
+  &:global(.is_uploading) {
+    .thumb {
+      filter: blur(16px);
+    }
+  }
+}
+
+.thumb {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  border-radius: $radius;
+  background: no-repeat 50% 50%;
+  background-size: cover;
+}
+
+.progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparentize(black, 0.5);
+
+  svg {
+    fill: none;
+    // stroke: white
+    fill: white;
+  }
+}