loki5512344
ff2edc8eb6
- chore(backend): sync Cargo.lock with gateway dev-dependency - feat(frontend): ClickGui replica matching the in-game GUI — category panels, Modules/Settings switch, theme cards - feat(frontend): floating glass top bar in the mod's UI language - fix(frontend): soft night backdrop for the ClickGui, editor that fits one screen - chore(frontend): replace em dashes in UI copy with lighter separators - refactor(frontend): split landing sections and theme editor into subfolders (4-files-per-folder rule) - feat(frontend): login and registration in the mod's glass panel style - feat(frontend): link the game with a device code - feat(frontend): account page with avatar upload and linked games - feat(frontend): my configs with share codes and publishing - feat(frontend): public showcase listing and detail pages - chore(frontend): drop em dashes from visible copy - feat(frontend): atmospheric backdrop, glass download block and ClickGui-style FAQ on the landing - feat(frontend): Konami code, DevTools console greeting and ASCII 404 block - feat: public player profiles at /u/:id and author link in the showcase - fix(frontend): stop the theme editor overflowing horizontally at 375px
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Button } from '../../../shared/ui/Button'
|
|
import { TextField } from '../../../shared/ui/TextField'
|
|
import { publish } from '../api'
|
|
|
|
const MAX_DESCRIPTION = 500
|
|
|
|
export function PublishForm({
|
|
slot,
|
|
onCancel,
|
|
onPublished,
|
|
}: {
|
|
slot: number
|
|
onCancel: () => void
|
|
onPublished: () => void
|
|
}) {
|
|
const { t } = useTranslation('configs')
|
|
const client = useQueryClient()
|
|
const [title, setTitle] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [touched, setTouched] = useState(false)
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: () => publish(slot, title.trim(), description),
|
|
onSuccess: () => {
|
|
client.invalidateQueries({ queryKey: ['configs'] })
|
|
onPublished()
|
|
},
|
|
})
|
|
|
|
const invalid = touched && title.trim().length === 0
|
|
|
|
function submit() {
|
|
setTouched(true)
|
|
if (title.trim().length === 0 || title.trim().length > 64 || description.length > MAX_DESCRIPTION) return
|
|
mutation.mutate()
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 rounded-md border border-shoal bg-abyss/60 p-3">
|
|
<TextField
|
|
label={t('publishForm.title')}
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
error={invalid ? t('publishForm.titleRequired') : undefined}
|
|
maxLength={64}
|
|
/>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label htmlFor="publish-description" className="text-sm text-frost">
|
|
{t('publishForm.description')}
|
|
</label>
|
|
<textarea
|
|
id="publish-description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value.slice(0, MAX_DESCRIPTION))}
|
|
rows={3}
|
|
className="rounded-md border border-shoal bg-abyss px-3 py-2 text-snow focus:border-ice"
|
|
/>
|
|
<span className="self-end text-xs text-frost">{t('publishForm.counter', { count: description.length })}</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="primary" busy={mutation.isPending} onClick={submit}>
|
|
{t('publishForm.submit')}
|
|
</Button>
|
|
<Button variant="quiet" onClick={onCancel}>
|
|
{t('publishForm.cancel')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|