diff options
Diffstat (limited to 'app/routes/artist-new.tsx')
| -rw-r--r-- | app/routes/artist-new.tsx | 66 |
1 files changed, 22 insertions, 44 deletions
diff --git a/app/routes/artist-new.tsx b/app/routes/artist-new.tsx index 168a7cc..ce91dab 100644 --- a/app/routes/artist-new.tsx +++ b/app/routes/artist-new.tsx @@ -44,19 +44,17 @@ export default function ArtistNew() { const [links, setLinks] = useState<{ label: string; url: string }[]>([]); return ( - <main className="max-w-3xl mx-auto px-4 py-8"> - <div className="flex items-center gap-3 mb-6"> - <Link to="/" className="text-gray-400 hover:text-gray-200 transition-colors">←</Link> - <h1 className="text-xl font-semibold">New Artist</h1> + <main> + <div className="page-header"> + <Link to="/" className="back">←</Link> + <h1>New Artist</h1> </div> - <Form method="post" className="space-y-5"> + <Form method="post"> <input type="hidden" name="links" value={JSON.stringify(links)} /> <div> - <label className="block text-sm font-medium text-gray-300 mb-1"> - 名前 <span className="text-red-400">*</span> - </label> + <label>名前 <span className="req">*</span></label> <input name="name" value={name} @@ -64,45 +62,41 @@ export default function ArtistNew() { setName(e.target.value); if (!slugManual) setSlug(toSlug(e.target.value)); }} - className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500" /> - {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>} + {errors.name && <p className="error">{errors.name}</p>} </div> <div> - <label className="block text-sm font-medium text-gray-300 mb-1"> - Slug <span className="text-red-400">*</span> - </label> + <label>Slug <span className="req">*</span></label> <input name="slug" value={slug} onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }} - className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm" + className="mono" /> - {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>} + {errors.slug && <p className="error">{errors.slug}</p>} </div> <div> - <label className="block text-sm font-medium text-gray-300 mb-2">リンク</label> - <div className="space-y-2"> + <label>リンク</label> + <div className="links-form"> {links.map((link, i) => ( - <div key={i} className="flex gap-2"> + <div key={i} className="link-row"> <input + className="label-input" value={link.label} onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))} placeholder="ラベル (例: X)" - className="w-28 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm" /> <input value={link.url} onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))} placeholder="https://..." - className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm" /> <button type="button" + className="btn-icon" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} - className="text-gray-500 hover:text-red-400 px-2 transition-colors" > × </button> @@ -111,38 +105,22 @@ export default function ArtistNew() { </div> <button type="button" + className="btn-text" onClick={() => setLinks([...links, { label: "", url: "" }])} - className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors" > + リンクを追加 </button> </div> <div> - <label className="block text-sm font-medium text-gray-300 mb-1"> - 更新メッセージ <span className="text-red-400">*</span> - </label> - <input - name="message" - placeholder="例: 初回登録" - className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500" - /> - {errors.message && <p className="text-red-400 text-sm mt-1">{errors.message}</p>} + <label>更新メッセージ <span className="req">*</span></label> + <input name="message" placeholder="例: 初回登録" /> + {errors.message && <p className="error">{errors.message}</p>} </div> - <div className="flex gap-3 pt-2"> - <button - type="submit" - className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors" - > - 作成 - </button> - <Link - to="/" - className="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded transition-colors" - > - キャンセル - </Link> + <div className="actions"> + <button type="submit">作成</button> + <Link to="/" className="btn">キャンセル</Link> </div> </Form> </main> |