#32

frontend/src/pages/users/SettingPage.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+
+import Form from '@/components/common/Form'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+
+import type { User } from '@/types'
+
+type Props = { user:    User
+               setUser: (user: User) => void }
+
+
+export default ({ user, setUser }: Props) => {
+  const [name, setName] = useState ('')
+
+  useEffect (() => {
+    if (!user)
+      return
+
+    setName (user?.name)
+  }, [user])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <meta name="robots" content="noindex" />
+          <title>設定 | {SITE_TITLE}</title>
+        </Helmet>
+        <Form>
+          <PageTitle>設定</PageTitle>
+
+          {/* 名前 */}
+          <div>
+            <Label>表示名</Label>
+            <input type="text"
+                   className="w-full border rounded p-2"
+                   value={name}
+                   placeholder="名もなきニジラー"
+                   onChange={ev => setName (ev.target.value)} />
+            {(user && !(user.name)) && (
+                <p class="mt-1 text-sm text-red-500">
+                  名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
+                </p>)}
+          </div>
+        </Form>
+      </MainArea>)
+}