106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
import type { Nip95Config } from '@/lib/configStorageTypes'
|
||
import { Button, Card, Input, ErrorState } from '../ui'
|
||
import { t } from '@/lib/i18n'
|
||
import { Nip95ApiList } from './Nip95ApiList'
|
||
|
||
export function Nip95ConfigContent(params: {
|
||
apis: Nip95Config[]
|
||
error: string | null
|
||
editingId: string | null
|
||
newUrl: string
|
||
showAddForm: boolean
|
||
draggedId: string | null
|
||
dragOverId: string | null
|
||
onClearError: () => void
|
||
onToggleAddForm: () => void
|
||
onNewUrlChange: (value: string) => void
|
||
onCancelAdd: () => void
|
||
onAddApi: () => void
|
||
onStartEditing: (id: string) => void
|
||
onStopEditing: () => void
|
||
onUpdateUrl: (id: string, url: string) => void
|
||
onToggleEnabled: (id: string, enabled: boolean) => void
|
||
onRemoveApi: (id: string) => void
|
||
onDragStart: (e: React.DragEvent<HTMLDivElement>, id: string) => void
|
||
onDragOver: (e: React.DragEvent<HTMLDivElement>, id: string) => void
|
||
onDragLeave: () => void
|
||
onDrop: (e: React.DragEvent<HTMLDivElement>, targetId: string) => void
|
||
}): React.ReactElement {
|
||
return (
|
||
<div className="space-y-6">
|
||
{params.error ? <ErrorBanner error={params.error} onClear={params.onClearError} /> : null}
|
||
<Header showAddForm={params.showAddForm} onToggleAddForm={params.onToggleAddForm} />
|
||
{params.showAddForm ? <AddForm newUrl={params.newUrl} onNewUrlChange={params.onNewUrlChange} onAdd={params.onAddApi} onCancel={params.onCancelAdd} /> : null}
|
||
<Nip95ApiList apis={params.apis} editingId={params.editingId} draggedId={params.draggedId} dragOverId={params.dragOverId} onStartEditing={params.onStartEditing} onStopEditing={params.onStopEditing} onUpdateUrl={params.onUpdateUrl} onToggleEnabled={params.onToggleEnabled} onRemoveApi={params.onRemoveApi} onDragStart={params.onDragStart} onDragOver={params.onDragOver} onDragLeave={params.onDragLeave} onDrop={params.onDrop} />
|
||
<Notes />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ErrorBanner(params: { error: string; onClear: () => void }): React.ReactElement {
|
||
return (
|
||
<div>
|
||
<ErrorState message={params.error} />
|
||
<Button type="button" variant="ghost" size="small" onClick={params.onClear} className="mt-2">
|
||
×
|
||
</Button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function Header(params: { showAddForm: boolean; onToggleAddForm: () => void }): React.ReactElement {
|
||
return (
|
||
<div className="flex justify-between items-center">
|
||
<h2 className="text-2xl font-bold text-neon-cyan">{t('settings.nip95.title')}</h2>
|
||
<Button
|
||
type="button"
|
||
variant="primary"
|
||
onClick={params.onToggleAddForm}
|
||
>
|
||
{params.showAddForm ? t('settings.nip95.add.cancel') : t('settings.nip95.addButton')}
|
||
</Button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function AddForm(params: { newUrl: string; onNewUrlChange: (value: string) => void; onAdd: () => void; onCancel: () => void }): React.ReactElement {
|
||
return (
|
||
<Card variant="default" className="space-y-4">
|
||
<Input
|
||
type="url"
|
||
label={t('settings.nip95.add.url')}
|
||
value={params.newUrl}
|
||
onChange={(e) => params.onNewUrlChange(e.target.value)}
|
||
placeholder={t('settings.nip95.add.placeholder')}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="button"
|
||
variant="primary"
|
||
onClick={params.onAdd}
|
||
>
|
||
{t('settings.nip95.add.add')}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
onClick={params.onCancel}
|
||
>
|
||
{t('settings.nip95.add.cancel')}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
function Notes(): React.ReactElement {
|
||
return (
|
||
<div className="text-sm text-cyber-accent space-y-2">
|
||
<p>
|
||
<strong>{t('settings.nip95.note.title')}</strong> {t('settings.nip95.note.priority')}
|
||
</p>
|
||
<p>{t('settings.nip95.note.fallback')}</p>
|
||
</div>
|
||
)
|
||
}
|