Build world campaigns rewards and recaps

2026-05-01 11:44:41 +02:00
parent 28e7e46e13
commit 257b0dbef6
100 changed files with 11300 additions and 367 deletions
--- a/resources/js/components/profile/worlds/ProfileWorldHistoryCard.jsx
+++ b/resources/js/components/profile/worlds/ProfileWorldHistoryCard.jsx
@@ -0,0 +1,122 @@
+import React from 'react'
+import ProfileWorldRecognitionBadge from './ProfileWorldRecognitionBadge'
+
+function formatDate(value) {
+  if (!value) return null
+
+  try {
+    const date = new Date(value)
+    if (Number.isNaN(date.getTime())) return null
+
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+  } catch {
+    return null
+  }
+}
+
+export default function ProfileWorldHistoryCard({ entry }) {
+  const recognitionBadges = Array.isArray(entry?.recognitions) ? entry.recognitions : []
+  const artwork = entry?.linked_artwork
+  const challenge = entry?.challenge
+
+  return (
+    <article className="rounded-[28px] border border-white/10 bg-white/[0.04] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.18)] transition-colors hover:border-white/15 hover:bg-white/[0.055] md:p-6">
+      <div className="flex flex-col gap-5 lg:flex-row lg:items-start">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            {recognitionBadges.map((recognition, index) => (
+              <ProfileWorldRecognitionBadge key={`${entry.id}-${recognition.key}`} recognition={recognition} isPrimary={index === 0} />
+            ))}
+          </div>
+
+          <div className="mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-2">
+            <h3 className="text-xl font-semibold tracking-[-0.02em] text-white">{entry?.world?.title}</h3>
+            {entry?.world?.edition_year ? (
+              <span className="text-sm text-slate-400">Edition {entry.world.edition_year}</span>
+            ) : null}
+            {entry?.world?.type_label ? (
+              <span className="rounded-full border border-white/10 bg-white/[0.05] px-2.5 py-1 text-[11px] font-medium text-slate-300">{entry.world.type_label}</span>
+            ) : null}
+          </div>
+
+          <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-slate-400">
+            {entry?.world?.family_label ? (
+              <span className="inline-flex items-center gap-2">
+                <i className="fa-solid fa-layer-group text-[11px] text-slate-500" />
+                {entry.world.family_label}
+              </span>
+            ) : null}
+            {formatDate(entry?.occurred_at) ? (
+              <span className="inline-flex items-center gap-2">
+                <i className="fa-regular fa-calendar text-[11px] text-slate-500" />
+                {formatDate(entry.occurred_at)}
+              </span>
+            ) : null}
+            {challenge?.title ? (
+              <span className="inline-flex items-center gap-2">
+                <i className="fa-solid fa-flag-checkered text-[11px] text-slate-500" />
+                {challenge.title}
+              </span>
+            ) : null}
+          </div>
+
+          <div className="mt-4 flex flex-wrap items-center gap-3">
+            {entry?.world?.url ? (
+              <a
+                href={entry.world.url}
+                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
+              >
+                <i className="fa-solid fa-globe text-xs" />
+                View world
+              </a>
+            ) : null}
+            {artwork?.url ? (
+              <a
+                href={artwork.url}
+                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
+              >
+                <i className="fa-solid fa-image text-xs" />
+                View artwork
+              </a>
+            ) : null}
+            {challenge?.url ? (
+              <a
+                href={challenge.url}
+                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
+              >
+                <i className="fa-solid fa-arrow-up-right-from-square text-xs" />
+                View challenge
+              </a>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="w-full shrink-0 lg:w-44">
+          {artwork?.thumbnail_url ? (
+            <a href={artwork.url || '#'} className="group block overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.03]">
+              <div className="aspect-[4/3] overflow-hidden bg-slate-900/60">
+                <img
+                  src={artwork.thumbnail_url}
+                  alt={artwork.title || entry?.world?.title || 'World artwork'}
+                  className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
+                  loading="lazy"
+                />
+              </div>
+              <div className="border-t border-white/10 px-4 py-3">
+                <div className="truncate text-sm font-medium text-white">{artwork.title}</div>
+                <div className="mt-1 text-xs text-slate-400">Linked artwork</div>
+              </div>
+            </a>
+          ) : (
+            <div className="flex aspect-[4/3] items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-white/[0.02] text-slate-500">
+              <div className="text-center">
+                <i className="fa-solid fa-globe text-xl" />
+                <div className="mt-2 text-xs uppercase tracking-[0.18em]">World entry</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}