#399

frontend/src/pages/posts/PostImportReviewPage.tsx

@@ -6,9 +6,11 @@ import { useNavigate,
 
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
+import PageActionFooter from '@/components/posts/import/PageActionFooter'
 import PostImportRowDialog from '@/components/posts/import/PostImportRowDialog'
 import PostImportRowSummary from '@/components/posts/import/PostImportRowSummary'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
+import PostImportSummaryChip from '@/components/posts/import/PostImportSummaryChip'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
@@ -296,10 +298,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
 	      <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
 			      dark:bg-neutral-900">
 		<div className="flex flex-wrap items-center gap-2">
-		  <SummaryChip label="全件" value={counts.total}/>
-		  <SummaryChip label="登録対象" value={counts.submittable}/>
-		  <SummaryChip label="要確認" value={counts.invalid}/>
-		  <SummaryChip label="スキップ予定" value={counts.skipPlanned}/>
+		  <PostImportSummaryChip label="全件" value={counts.total}/>
+		  <PostImportSummaryChip label="登録対象" value={counts.submittable} badge="ready"/>
+		  <PostImportSummaryChip label="要確認" value={counts.invalid} badge="error"/>
+		  <PostImportSummaryChip label="スキップ予定" value={counts.skipPlanned}
+					 badge="skipped"/>
 		</div>
 	      </div>
 
@@ -354,37 +357,30 @@ const PostImportFooter = (
 	onBack:             () => void
 	onSubmit:           () => void },
 ) => (
-    <div
-	className="shrink-0 border-t bg-white/95 p-4 backdrop-blur
-		   dark:border-neutral-700 dark:bg-neutral-950/95">
-      <div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
-		      md:items-center md:justify-between">
-	<div className="flex flex-wrap items-center gap-2 text-sm">
-	  <span>処理対象 {processableCount} 件</span>
-	  <PostImportStatusBadge value="ready"/>
-	  <span>登録対象 {creatableCount} 件</span>
-	  <PostImportStatusBadge value="skipped"/>
-	  <span>スキップ予定 {skipPlannedCount} 件</span>
-	  <span>要確認 {invalidCount} 件</span>
-	</div>
-	<div className="flex flex-col gap-2 sm:flex-row">
-	  <Button type="button" variant="outline" onClick={onBack}>
-	    URL リスト入力へ戻る
-	  </Button>
-	  <Button
-	      type="button"
-	      onClick={onSubmit}
-	      disabled={loading || processableCount === 0}>
-	    取込を実行
-	  </Button>
-	</div>
-      </div>
-    </div>)
-
-const SummaryChip = ({ label, value }: { label: string
-					  value: number }) => (
-    <div className="rounded-full border border-border bg-background px-3 py-1 text-sm">
-      {label} {value}
-    </div>)
+    <PageActionFooter
+	summary={
+	    <>
+	      <span>処理対象 {processableCount} 件</span>
+	      <PostImportStatusBadge value="ready"/>
+	      <span>登録対象 {creatableCount} 件</span>
+	      <PostImportStatusBadge value="skipped"/>
+	      <span>スキップ予定 {skipPlannedCount} 件</span>
+	      <PostImportStatusBadge value="error"/>
+	      <span>要確認 {invalidCount} 件</span>
+	    </>
+	}
+	actions={
+	    <>
+	      <Button type="button" variant="outline" onClick={onBack}>
+		URL リスト入力へ戻る
+	      </Button>
+	      <Button
+		  type="button"
+		  onClick={onSubmit}
+		  disabled={loading || processableCount === 0}>
+		取込を実行
+	      </Button>
+	    </>
+	}/>)
 
 export default PostImportReviewPage