Replace native selects with NovaSelect

This commit is contained in:
2026-05-01 07:45:37 +02:00
parent 67be537c86
commit 35011001ba
55 changed files with 3136 additions and 1662 deletions

View File

@@ -1,5 +1,7 @@
import React from 'react'
import { Head, usePage } from '@inertiajs/react'
import Checkbox from '../../components/ui/Checkbox'
import NovaSelect from '../../components/ui/NovaSelect'
function getCsrfToken() {
if (typeof document === 'undefined') return ''
@@ -565,11 +567,9 @@ export default function FeaturedArtworksAdmin() {
<Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
<label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
<input
type="checkbox"
<Checkbox
checked={Boolean(form.is_active)}
onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
className="h-4 w-4 rounded border-white/20 bg-transparent text-sky-400 focus:ring-sky-300/30"
/>
<span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
</label>
@@ -625,22 +625,9 @@ export default function FeaturedArtworksAdmin() {
placeholder="Filter by title, artist, or artwork ID"
className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
/>
<select value={filter} onChange={(event) => setFilter(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
<option value="all">All rows</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="expired">Expired</option>
<option value="winner">Winner</option>
<option value="eligible">Eligible</option>
<option value="ineligible">Not eligible</option>
</select>
<NovaSelect value={filter} onChange={(val) => setFilter(val)} searchable={false} options={[{ value: 'all', label: 'All rows' }, { value: 'active', label: 'Active' }, { value: 'inactive', label: 'Inactive' }, { value: 'expired', label: 'Expired' }, { value: 'winner', label: 'Winner' }, { value: 'eligible', label: 'Eligible' }, { value: 'ineligible', label: 'Not eligible' }]} />
<div className="grid grid-cols-[1fr_auto] gap-3">
<select value={sortKey} onChange={(event) => setSortKey(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
<option value="priority">Priority</option>
<option value="featured_at">Featured Since</option>
<option value="expires_at">Expires</option>
<option value="score_30d">Medal Score (30d)</option>
</select>
<NovaSelect value={sortKey} onChange={(val) => setSortKey(val)} searchable={false} options={[{ value: 'priority', label: 'Priority' }, { value: 'featured_at', label: 'Featured Since' }, { value: 'expires_at', label: 'Expires' }, { value: 'score_30d', label: 'Medal Score (30d)' }]} />
<button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
{sortDirection === 'desc' ? 'Desc' : 'Asc'}
</button>