Save workspace changes

resources/js/components/worlds/editor/WorldRecurrenceHelper.jsx

@@ -0,0 +1,31 @@
+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>
+  )
+}