diff options
Diffstat (limited to 'app/routes/band-new.tsx')
| -rw-r--r-- | app/routes/band-new.tsx | 114 |
1 files changed, 41 insertions, 73 deletions
diff --git a/app/routes/band-new.tsx b/app/routes/band-new.tsx index a15ce24..62be1d4 100644 --- a/app/routes/band-new.tsx +++ b/app/routes/band-new.tsx @@ -75,13 +75,13 @@ export default function BandNew() { } 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 Band</h1> + <main> + <div className="page-header"> + <Link to="/" className="back">←</Link> + <h1>New Band</h1> </div> - <Form method="post" className="space-y-5"> + <Form method="post"> <input type="hidden" name="links" value={JSON.stringify(links)} /> <input type="hidden" @@ -90,46 +90,34 @@ export default function BandNew() { /> <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} onChange={(e) => { 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-1">活動拠点</label> - <input - name="area" - 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" - /> + <label>活動拠点</label> + <input name="area" /> </div> <div> - <label className="block text-sm font-medium text-gray-300 mb-1">ステータス</label> - <select - name="status" - defaultValue="active" - className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500" - > + <label>ステータス</label> + <select name="status" defaultValue="active"> <option value="active">活動中</option> <option value="hiatus">活動休止</option> <option value="disbanded">解散</option> @@ -137,23 +125,18 @@ export default function BandNew() { </div> <div> - <label className="block text-sm font-medium text-gray-300 mb-1">説明</label> - <textarea - name="description" - rows={3} - 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 resize-none" - /> + <label>説明</label> + <textarea name="description" rows={3} /> </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"> <select value={link.label} onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))} - className="w-36 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm" > {LINK_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)} </select> @@ -161,73 +144,65 @@ export default function BandNew() { 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" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} className="text-gray-500 hover:text-red-400 px-2 transition-colors">×</button> + <button type="button" className="btn-icon" onClick={() => setLinks(links.filter((_, idx) => idx !== i))}>×</button> </div> ))} </div> <button type="button" + className="btn-text" onClick={() => setLinks([...links, { label: LINK_TYPES[0].value, 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-2">メンバー</label> + <label>メンバー</label> {picked.length > 0 && ( - <div className="space-y-2 mb-3"> + <div className="members-form"> {picked.map((p) => { const pend = pending[p.id] ?? DEFAULT_PENDING; return ( - <div key={p.id} className="bg-gray-900 rounded-lg p-3"> - <div className="flex items-center justify-between mb-2"> - <span className="text-gray-200 text-sm font-medium">{p.name}</span> + <div key={p.id} className="member-card"> + <div className="card-header"> + <span className="card-name">{p.name}</span> <button type="button" + className="btn-icon" onClick={() => setPicked(picked.filter((a) => a.id !== p.id))} - className="text-gray-500 hover:text-red-400 text-xs transition-colors" > 削除 </button> </div> {p.roles.length > 0 && ( - <div className="flex flex-wrap gap-1.5 mb-2"> + <div className="badges"> {p.roles.map((r, ri) => ( - <span key={ri} className="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-0.5 rounded"> + <span key={ri} className="badge"> {r} - <button type="button" onClick={() => removeRole(p.id, ri)} className="text-gray-500 hover:text-red-400 leading-none">×</button> + <button type="button" onClick={() => removeRole(p.id, ri)}>×</button> </span> ))} </div> )} - <div className="flex gap-2 items-center"> + <div className="role-row"> <select value={pend.type} onChange={(e) => setPending({ ...pending, [p.id]: { ...pend, type: e.target.value } })} - className="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-gray-300 text-sm focus:outline-none focus:border-blue-500" > {ARTIST_ROLES.map((r) => <option key={r} value={r}>{r}</option>)} <option value="other">その他...</option> </select> {pend.type === "other" && ( <input + className="custom-input" value={pend.custom} onChange={(e) => setPending({ ...pending, [p.id]: { ...pend, custom: e.target.value } })} placeholder="ロール名" - className="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-gray-300 text-sm focus:outline-none focus:border-blue-500 w-32" /> )} - <button - type="button" - onClick={() => addRole(p.id)} - className="text-blue-400 hover:text-blue-300 text-sm transition-colors" - > - + 追加 - </button> + <button type="button" className="btn-text" onClick={() => addRole(p.id)}>+ 追加</button> </div> </div> ); @@ -245,34 +220,27 @@ export default function BandNew() { } }} defaultValue="" - className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-400 focus:outline-none focus:border-blue-500 text-sm" > <option value="">+ アーティストを追加...</option> {available.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)} </select> ) : artists.length === 0 ? ( - <p className="text-gray-500 text-sm"> + <p className="muted"> アーティストがいません。{" "} - <Link to="/artists/new" className="text-blue-400 hover:text-blue-300">先に作成</Link> + <Link to="/artists/new">先に作成</Link> </p> ) : null} </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> |