Shop name form.setData( 'shop_name', event.target.value, ) } />

Currency form.setData( 'currency', event.target.value.toUpperCase(), ) } />

Support email form.setData( 'support_email', event.target.value, ) } />

Primary phone form.setData( 'support_phone', event.target.value, ) } />

Secondary phone form.setData( 'support_phone_secondary', event.target.value, ) } />

Address

form.setData('address', event.target.value)
                                }
                            />
                            <InputError message={form.errors.address} />
                        </div>

<div className="mt-4 grid gap-4 sm:grid-cols-2">
                            <div className="grid gap-2">
                                <Label htmlFor="logo">Logo</Label>
                                {settings.logo_url && (
                                    <img
                                        src={settings.logo_url}
                                        alt="Current logo"
                                        className="size-16 rounded-md border object-contain p-2"
                                    />
                                )}
                                <Input
                                    id="logo"
                                    type="file"
                                    accept="image/*"
                                    onChange={(event) =>
                                        form.setData(
                                            'logo',
                                            event.target.files?.[0] ?? null,
                                        )
                                    }
                                />
                                <InputError message={form.errors.logo} />
                            </div>

<div className="grid gap-2">
                                <Label htmlFor="favicon">Favicon</Label>
                                {settings.favicon_url && (
                                    <img
                                        src={settings.favicon_url}
                                        alt="Current favicon"
                                        className="size-12 rounded-md border object-contain p-2"
                                    />
                                )}
                                <Input
                                    id="favicon"
                                    type="file"
                                    accept="image/*"
                                    onChange={(event) =>
                                        form.setData(
                                            'favicon',
                                            event.target.files?.[0] ?? null,
                                        )
                                    }
                                />
                                <InputError message={form.errors.favicon} />
                            </div>
                        </div>
                    </div>

<div className="rounded-lg border p-4">
                        <div>
                            <h2 className="font-semibold">Social links</h2>
                            <p className="mt-1 text-sm text-muted-foreground">
                                Optional links shown in the website footer and
                                contact page.
                            </p>
                        </div>

<div className="mt-4 grid gap-4 sm:grid-cols-2">
                            {[
                                ['facebook_url', 'Facebook'],
                                ['instagram_url', 'Instagram'],
                                ['x_url', 'X (Twitter)'],
                                ['linkedin_url', 'LinkedIn'],
                                ['youtube_url', 'YouTube'],
                                ['whatsapp_url', 'WhatsApp'],
                                ['telegram_url', 'Telegram'],
                            ].map(([key, label]) => {
                                const field = key as
                                    | 'facebook_url'
                                    | 'instagram_url'
                                    | 'x_url'
                                    | 'linkedin_url'
                                    | 'youtube_url'
                                    | 'whatsapp_url'
                                    | 'telegram_url';

return (
                                    <div key={field} className="grid gap-2">
                                        <Label htmlFor={field}>{label}</Label>
                                        <Input
                                            id={field}
                                            type="url"
                                            placeholder="https://"
                                            value={form.data[field]}
                                            onChange={(event) =>
                                                form.setData(
                                                    field,
                                                    event.target.value,
                                                )
                                            }
                                        />
                                        <InputError
                                            message={form.errors[field]}
                                        />
                                    </div>
                                );
                            })}
                        </div>
                    </div>

<div className="rounded-lg border p-4">
                        <div>
                            <h2 className="font-semibold">Google map</h2>
                            <p className="mt-1 text-sm text-muted-foreground">
                                Paste the iframe code from Google Maps. Only its
                                validated map URL will be displayed publicly.
                            </p>
                        </div>

<div className="mt-4 grid gap-2">
                            <Label htmlFor="google_map_iframe">
                                Google Maps iframe code
                            </Label>
                            <Textarea
                                id="google_map_iframe"
                                rows={6}
                                placeholder={
                                    '<iframe src="https://www.google.com/maps/embed?pb=..."></iframe>'
                                }
                                value={form.data.google_map_iframe}
                                onChange={(event) =>
                                    form.setData(
                                        'google_map_iframe',
                                        event.target.value,
                                    )
                                }
                            />
                            <InputError
                                message={form.errors.google_map_iframe}
                            />
                        </div>
                    </div>

<div className="flex justify-end">
                        <Button disabled={form.processing}>
                            Save settings
                        </Button>
                    </div>
                </form>
            </div>
        </>
    );
}

SettingsIndex.layout = {
    breadcrumbs: [
        {
            title: 'Settings',
            href: '/settings/general',
        },
    ],
};