54 lines
2.5 KiB
JavaScript
54 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
|
|
function Pill({ children }) {
|
|
return <span className="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-200">{children}</span>
|
|
}
|
|
|
|
function ColorSwatch({ label, value }) {
|
|
if (!value) return null
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-full border border-white/10 bg-black/20 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-200">
|
|
<span className="h-3 w-3 rounded-full border border-white/15" style={{ backgroundColor: value }} />
|
|
<span>{label}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function WorldThemePresetHelper({ theme, onApply }) {
|
|
if (!theme) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-sm font-semibold text-white">{theme.label} preset</div>
|
|
<p className="mt-1 text-sm leading-6 text-slate-400">Preset suggestions fill the campaign basics fast. You can still override every field manually afterwards.</p>
|
|
</div>
|
|
<button type="button" onClick={onApply} className="rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100">
|
|
Apply suggestions
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
<ColorSwatch label={theme.accent_color || 'accent'} value={theme.accent_color} />
|
|
<ColorSwatch label={theme.accent_color_secondary || 'secondary'} value={theme.accent_color_secondary} />
|
|
{theme.background_motif ? <Pill>{theme.background_motif}</Pill> : null}
|
|
{theme.icon_name ? <Pill>{theme.icon_name.replace('fa-solid ', '')}</Pill> : null}
|
|
{theme.suggested_badge_label ? <Pill>{theme.suggested_badge_label}</Pill> : null}
|
|
{theme.suggested_cta_label ? <Pill>{theme.suggested_cta_label}</Pill> : null}
|
|
</div>
|
|
|
|
{Array.isArray(theme.related_tags_json) && theme.related_tags_json.length > 0 ? (
|
|
<div className="mt-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Suggested related tags</div>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs text-slate-400">
|
|
{theme.related_tags_json.map((tag) => <span key={tag} className="rounded-full bg-white/[0.04] px-3 py-1.5">#{tag}</span>)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
} |