Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 2x 2x 2x | import { Input } from '@core/components/ui/input'
import { Label } from '@core/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@core/components/ui/card'
import { useFormContext } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
export const AssetsForm = () => {
const { t } = useTranslation()
const { register } = useFormContext()
return (
<Card
style={{
backgroundColor: 'var(--admin-card-bg)',
borderColor: 'var(--admin-border-color)',
}}
>
<CardHeader>
<CardTitle>{t('admin_branding.assets.title')}</CardTitle>
<CardDescription>{t('admin_branding.assets.description')}</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="logo">{t('admin_branding.assets.logo')}</Label>
<Input id="logo" {...register('logo')} placeholder="https://..." />
<p className="text-xs text-muted-foreground">
{t('admin_branding.assets.logo_hint')}
</p>
</div>
<div className="grid gap-2">
<Label htmlFor="favicon">{t('admin_branding.assets.favicon')}</Label>
<Input
id="favicon"
{...register('assets.favicon')}
placeholder="https://..."
/>
</div>
<div className="border-t pt-4 mt-2">
<Label className="text-base font-semibold block mb-4">
{t('admin_branding.assets.backgrounds')}
</Label>
<div className="space-y-4">
<div className="grid gap-2">
<Label htmlFor="backgroundLanding">
{t('admin_branding.assets.landing')}
</Label>
<Input
id="backgroundLanding"
{...register('assets.backgroundLanding')}
placeholder="https://..."
/>
</div>
<div className="grid gap-2">
<Label htmlFor="backgroundDonor">
{t('admin_branding.assets.donor')}
</Label>
<Input
id="backgroundDonor"
{...register('assets.backgroundDonor')}
placeholder="https://..."
/>
</div>
<div className="grid gap-2">
<Label htmlFor="backgroundLive">
{t('admin_branding.assets.live')}
</Label>
<Input
id="backgroundLive"
{...register('assets.backgroundLive')}
placeholder="https://..."
/>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
)
}
|