Theme Settings

Customize your site's basic settings and branding

Site Name setData('site_name', e.target.value)} placeholder="My Awesome Site" /> {errors.site_name && (

{errors.site_name}

)}

Site Tagline

setData('site_tagline', e.target.value)}
                                    placeholder="A brief tagline for your site..."
                                    rows={2}
                                />
                                {errors.site_tagline && (
                                    <p className="text-sm text-red-600">{errors.site_tagline}</p>
                                )}
                            </div>

<div className="space-y-2">
                                <Label htmlFor="copyright_text">Copyright Text</Label>
                                <Textarea
                                    id="copyright_text"
                                    value={data.copyright_text}
                                    onChange={(e) => setData('copyright_text', e.target.value)}
                                    placeholder="© 2025 Your Company. All rights reserved."
                                    rows={2}
                                    maxLength={500}
                                />
                                <p className="text-xs text-muted-foreground">
                                    {data.copyright_text?.length || 0}/500 characters
                                </p>
                                {errors.copyright_text && (
                                    <p className="text-sm text-red-600">{errors.copyright_text}</p>
                                )}
                            </div>

<div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="primary_color">Primary Color</Label>
                                    <div className="flex gap-2">
                                        <Input
                                            id="primary_color"
                                            type="color"
                                            value={data.primary_color}
                                            onChange={(e) => setData('primary_color', e.target.value)}
                                            className="w-20 h-10"
                                        />
                                        <Input
                                            value={data.primary_color}
                                            onChange={(e) => setData('primary_color', e.target.value)}
                                            placeholder="#3b82f6"
                                        />
                                    </div>
                                    {errors.primary_color && (
                                        <p className="text-sm text-red-600">{errors.primary_color}</p>
                                    )}
                                </div>

<div className="space-y-2">
                                    <Label htmlFor="secondary_color">Secondary Color</Label>
                                    <div className="flex gap-2">
                                        <Input
                                            id="secondary_color"
                                            type="color"
                                            value={data.secondary_color}
                                            onChange={(e) => setData('secondary_color', e.target.value)}
                                            className="w-20 h-10"
                                        />
                                        <Input
                                            value={data.secondary_color}
                                            onChange={(e) => setData('secondary_color', e.target.value)}
                                            placeholder="#10b981"
                                        />
                                    </div>
                                    {errors.secondary_color && (
                                        <p className="text-sm text-red-600">{errors.secondary_color}</p>
                                    )}
                                </div>
                            </div>

<div className="flex justify-end">
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Saving...' : 'Save Settings'}
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>

{/* SEO Settings Card */}
                <Card>
                    <CardHeader>
                        <CardTitle>SEO & Meta Tags</CardTitle>
                        <CardDescription>
                            Configure search engine optimization and social media sharing
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div className="space-y-2">
                                <Label htmlFor="meta_title">Meta Title</Label>
                                <Input
                                    id="meta_title"
                                    value={data.meta_title}
                                    onChange={(e) => setData('meta_title', e.target.value)}
                                    placeholder="Your Site Name - Tagline"
                                    maxLength={255}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Recommended: 50-60 characters. This appears in search results and browser tabs.
                                </p>
                                {errors.meta_title && (
                                    <p className="text-sm text-red-600">{errors.meta_title}</p>
                                )}
                            </div>

<div className="space-y-2">
                                <Label htmlFor="meta_description">Meta Description</Label>
                                <Textarea
                                    id="meta_description"
                                    value={data.meta_description}
                                    onChange={(e) => setData('meta_description', e.target.value)}
                                    placeholder="A compelling description of your site..."
                                    rows={3}
                                    maxLength={500}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Recommended: 150-160 characters. This appears in search results.
                                </p>
                                {errors.meta_description && (
                                    <p className="text-sm text-red-600">{errors.meta_description}</p>
                                )}
                            </div>

<div className="space-y-2">
                                <Label htmlFor="meta_keywords">Meta Keywords</Label>
                                <Input
                                    id="meta_keywords"
                                    value={data.meta_keywords}
                                    onChange={(e) => setData('meta_keywords', e.target.value)}
                                    placeholder="keyword1, keyword2, keyword3"
                                    maxLength={500}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Comma-separated keywords relevant to your site.
                                </p>
                                {errors.meta_keywords && (
                                    <p className="text-sm text-red-600">{errors.meta_keywords}</p>
                                )}
                            </div>

<div className="space-y-2">
                                <Label htmlFor="og_image_path">Social Share Image (OG Image)</Label>
                                <Input
                                    id="og_image_path"
                                    value={data.og_image_path}
                                    onChange={(e) => setData('og_image_path', e.target.value)}
                                    placeholder="/storage/theme/og-image.jpg"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Image displayed when sharing on social media. Recommended: 1200x630px.
                                </p>
                                {errors.og_image_path && (
                                    <p className="text-sm text-red-600">{errors.og_image_path}</p>
                                )}
                            </div>

<div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="twitter_card">Twitter Card Type</Label>
                                    <Input
                                        id="twitter_card"
                                        value={data.twitter_card}
                                        onChange={(e) => setData('twitter_card', e.target.value)}
                                        placeholder="summary_large_image"
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Usually: summary or summary_large_image
                                    </p>
                                </div>

<div className="space-y-2">
                                    <Label htmlFor="twitter_site">Twitter Handle</Label>
                                    <Input
                                        id="twitter_site"
                                        value={data.twitter_site}
                                        onChange={(e) => setData('twitter_site', e.target.value)}
                                        placeholder="@yourusername"
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Your Twitter/X account handle
                                    </p>
                                </div>
                            </div>

<div className="flex justify-end">
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Saving...' : 'Save SEO Settings'}
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>

{/* Analytics & Tracking Card */}
                <Card>
                    <CardHeader>
                        <CardTitle>Analytics & Tracking</CardTitle>
                        <CardDescription>
                            Configure tracking pixels and analytics tools
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div className="space-y-2">
                                <Label htmlFor="google_analytics_id">Google Analytics ID</Label>
                                <Input
                                    id="google_analytics_id"
                                    value={data.google_analytics_id}
                                    onChange={(e) => setData('google_analytics_id', e.target.value)}
                                    placeholder="G-XXXXXXXXXX"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Your Google Analytics 4 measurement ID
                                </p>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="google_tag_manager_id">Google Tag Manager ID</Label>
                                <Input
                                    id="google_tag_manager_id"
                                    value={data.google_tag_manager_id}
                                    onChange={(e) => setData('google_tag_manager_id', e.target.value)}
                                    placeholder="GTM-XXXXXXX"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Your Google Tag Manager container ID
                                </p>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="facebook_pixel_id">Facebook Pixel ID</Label>
                                <Input
                                    id="facebook_pixel_id"
                                    value={data.facebook_pixel_id}
                                    onChange={(e) => setData('facebook_pixel_id', e.target.value)}
                                    placeholder="123456789012345"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Your Facebook/Meta Pixel ID for ad tracking
                                </p>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="custom_head_scripts">Custom Head Scripts</Label>
                                <Textarea
                                    id="custom_head_scripts"
                                    value={data.custom_head_scripts}
                                    onChange={(e) => setData('custom_head_scripts', e.target.value)}
                                    placeholder="<script>/* Your custom scripts */</script>"
                                    rows={5}
                                    className="font-mono text-sm"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Scripts to be added in the {"<head>"} section. Use for verification codes, etc.
                                </p>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="custom_body_scripts">Custom Body Scripts</Label>
                                <Textarea
                                    id="custom_body_scripts"
                                    value={data.custom_body_scripts}
                                    onChange={(e) => setData('custom_body_scripts', e.target.value)}
                                    placeholder="<script>/* Your custom scripts */</script>"
                                    rows={5}
                                    className="font-mono text-sm"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Scripts to be added before {"</body>"}. Use for chat widgets, etc.
                                </p>
                            </div>

<div className="flex justify-end">
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Saving...' : 'Save Analytics Settings'}
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}