#399

frontend/src/pages/posts/PostImportSourcePage.tsx

@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
 import FieldError from '@/components/common/FieldError'
+import Form from '@/components/common/Form'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
@@ -150,63 +151,58 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
 	    <title>{`投稿インポート | ${ SITE_TITLE }`}</title>
 	  </Helmet>
 
-	  <div className="mx-auto max-w-4xl space-y-4 p-4">
+	  <Form className="max-w-4xl p-0">
 	    <PageTitle>投稿インポート</PageTitle>
-	    <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
-			    dark:bg-neutral-900 md:p-6">
-	      <div className="space-y-4">
-		<FormField label="URL リスト">
-		  {() => (
-		      <textarea
-			  value={source}
-			  rows={14}
-			  aria-invalid={messages.length > 0 || sourceIssues.length > 0}
-			  aria-describedby={sourceDescribedBy || undefined}
-			  className={inputClass (
-			      messages.length > 0 || sourceIssues.length > 0,
-			      'font-mono text-sm',
-			  )}
-			  onBlur={() => {
-			      savePostImportSourceDraft (source, message =>
-				  toast ({
-				      title: '入力内容を保存できませんでした',
-				      description: message }))
-			  }}
-			  onChange={ev => {
-			      editedRef.current = true
-			      setSource (ev.target.value)
-			      setSourceError (null)
-			      setSourceIssues ([])
-			  }}/>)}
-		</FormField>
-		<div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
-		  <FieldError messages={messages}/>
-		</div>
-		<ul
-		    id={SOURCE_ISSUES_ID}
-		    className="space-y-2 text-sm text-red-700 dark:text-red-300">
-		  {sourceIssues.map (issue => (
-		      <li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
-			<div>{issue.sourceRow} 行目: {issue.message}</div>
-			<div className="break-all font-mono text-xs">{issue.url}</div>
-		      </li>))}
-		</ul>
-
-		<div className="flex items-center justify-between gap-3">
-		  <div className="text-sm text-neutral-600 dark:text-neutral-300">
-		    入力行数 {lineCount} / {MAX_ROWS}
-		  </div>
-		  <Button
-		      type="button"
-		      className="shrink-0"
-		      onClick={preview}
-		      disabled={loading}>
-		    次へ
-		  </Button>
-		</div>
-	      </div>
+	    <FormField label="URL リスト">
+	      {() => (
+		  <textarea
+		      value={source}
+		      rows={14}
+		      aria-invalid={messages.length > 0 || sourceIssues.length > 0}
+		      aria-describedby={sourceDescribedBy || undefined}
+		      className={inputClass (
+			  messages.length > 0 || sourceIssues.length > 0,
+			  'font-mono text-sm',
+		      )}
+		      onBlur={() => {
+			  savePostImportSourceDraft (source, message =>
+			      toast ({
+				  title: '入力内容を保存できませんでした',
+				  description: message }))
+		      }}
+		      onChange={ev => {
+			  editedRef.current = true
+			  setSource (ev.target.value)
+			  setSourceError (null)
+			  setSourceIssues ([])
+		      }}/>)}
+	    </FormField>
+	    <div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
+	      <FieldError messages={messages}/>
 	    </div>
-	  </div>
+	    <ul
+		id={SOURCE_ISSUES_ID}
+		className="space-y-2 text-sm text-red-700 dark:text-red-300">
+	      {sourceIssues.map (issue => (
+		  <li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
+		    <div>{issue.sourceRow} 行目: {issue.message}</div>
+		    <div className="break-all font-mono text-xs">{issue.url}</div>
+		  </li>))}
+	    </ul>
+
+	    <div className="flex items-center justify-between gap-3">
+	      <div className="text-sm text-neutral-600 dark:text-neutral-300">
+		入力行数 {lineCount} / {MAX_ROWS}
+	      </div>
+	      <Button
+		  type="button"
+		  className="shrink-0"
+		  onClick={preview}
+		  disabled={loading}>
+		次へ
+	      </Button>
+	    </div>
+	  </Form>
 	</MainArea>)
 }