31 lines
1.6 KiB
JavaScript
31 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function WorldRecurrenceHelper({ enabled, recurrenceKey, editionYear, recurrenceKeyError, editionYearError }) {
|
|
if (!enabled) {
|
|
return (
|
|
<div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-4 text-sm leading-6 text-slate-400">
|
|
Turn on recurrence when this world belongs to a campaign family such as Halloween, Retro Month, or Pixel Week and needs a reusable edition pattern.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const exampleKey = recurrenceKey || 'halloween'
|
|
const exampleYear = editionYear || new Date().getFullYear()
|
|
|
|
return (
|
|
<div className="rounded-[24px] border border-sky-300/15 bg-sky-400/10 p-4 text-sm text-slate-200">
|
|
<div className="font-semibold text-white">Recurring world guidance</div>
|
|
<div className="mt-2 space-y-2 leading-6 text-slate-300">
|
|
<p>Use the recurrence key to identify the campaign family. Example: <span className="font-semibold text-white">{exampleKey}</span>.</p>
|
|
<p>Use the edition year for the specific annual or seasonal instance. Example: <span className="font-semibold text-white">{exampleYear}</span>.</p>
|
|
<p className="text-sky-100">Example output: {exampleKey === '' ? 'Halloween' : exampleKey.replace(/-/g, ' ')} {exampleYear} is part of the recurring world <span className="font-semibold text-white">{exampleKey}</span>.</p>
|
|
</div>
|
|
|
|
{recurrenceKeyError || editionYearError ? (
|
|
<div className="mt-3 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-xs leading-5 text-rose-100">
|
|
{recurrenceKeyError || editionYearError}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
} |