広場投稿追加画面の刷新 (#399) (#413)

Reviewed-on: #413
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/posts/import/PostImportStatusBadge.tsx

@@ -0,0 +1,33 @@
+import StatusBadge from '@/components/common/StatusBadge'
+
+import type { FC } from 'react'
+
+import type { StatusBadgeTone } from '@/components/common/StatusBadge'
+import type { PostImportBadgeValue } from '@/components/posts/import/postImportRowStatus'
+
+type Props = {
+    value: PostImportBadgeValue }
+
+const LABELS: Record<PostImportBadgeValue, string> = {
+    ready: '登録可能',
+    error: '登録不可',
+    warning: '警告',
+    skipped: 'スキップ',
+    created: '登録済み',
+    failed: '登録失敗' }
+
+const TONES: Record<PostImportBadgeValue, StatusBadgeTone> = {
+    ready: 'success',
+    error: 'warning',
+    warning: 'warning',
+    skipped: 'neutral',
+    created: 'success',
+    failed: 'warning' }
+
+
+const PostImportStatusBadge: FC<Props> = ({ value }) => (
+    <StatusBadge tone={TONES[value]}>
+      {LABELS[value]}
+    </StatusBadge>)
+
+export default PostImportStatusBadge