99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import { Button, Card, Input } from '../ui'
|
||
import { t } from '@/lib/i18n'
|
||
import { RelayList } from './RelayList'
|
||
import type { RelayManagerContentProps } from './types'
|
||
|
||
export function RelayManagerContent(params: RelayManagerContentProps): 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.onAddRelay} onCancel={params.onCancelAdd} /> : null}
|
||
<RelayList
|
||
relays={params.relays}
|
||
editingId={params.editingId}
|
||
draggedId={params.draggedId}
|
||
dragOverId={params.dragOverId}
|
||
onStartEditing={params.onStartEditing}
|
||
onStopEditing={params.onStopEditing}
|
||
onUpdateUrl={params.onUpdateUrl}
|
||
onToggleEnabled={params.onToggleEnabled}
|
||
onRemoveRelay={params.onRemoveRelay}
|
||
onDragStart={params.onDragStart}
|
||
onDragOver={params.onDragOver}
|
||
onDragLeave={params.onDragLeave}
|
||
onDrop={params.onDrop}
|
||
onDragEnd={params.onDragEnd}
|
||
/>
|
||
<Notes />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ErrorBanner(params: { error: string; onClear: () => void }): React.ReactElement {
|
||
return (
|
||
<div className="bg-red-900/30 border border-red-500/50 rounded p-4 text-red-300">
|
||
{params.error}
|
||
<button type="button" onClick={params.onClear} className="ml-4 text-red-400 hover:text-red-200">
|
||
×
|
||
</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.relay.title')}</h2>
|
||
<Button
|
||
type="button"
|
||
variant="primary"
|
||
onClick={params.onToggleAddForm}
|
||
>
|
||
{params.showAddForm ? t('settings.relay.add.cancel') : t('settings.relay.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="text"
|
||
label={t('settings.relay.add.url')}
|
||
value={params.newUrl}
|
||
onChange={(e) => params.onNewUrlChange(e.target.value)}
|
||
placeholder={t('settings.relay.add.placeholder')}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="button"
|
||
variant="primary"
|
||
onClick={params.onAdd}
|
||
>
|
||
{t('settings.relay.add.add')}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
onClick={params.onCancel}
|
||
>
|
||
{t('settings.relay.add.cancel')}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
function Notes(): React.ReactElement {
|
||
return (
|
||
<div className="text-sm text-cyber-accent space-y-2">
|
||
<p>
|
||
<strong>{t('settings.relay.note.title')}</strong> {t('settings.relay.note.priority')}
|
||
</p>
|
||
<p>{t('settings.relay.note.rotation')}</p>
|
||
</div>
|
||
)
|
||
}
|