42 lines
2.7 KiB
JavaScript
42 lines
2.7 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
|
|
export default function GroupEventShow() {
|
|
const { props } = usePage()
|
|
const group = props.group || {}
|
|
const event = props.event || {}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.15),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
|
|
<SeoHead seo={props.seo || {}} title={`${event.title || group.name} - Skinbase`} description={event.summary || event.description || 'Group event'} />
|
|
<div className="mx-auto max-w-5xl space-y-8">
|
|
<section className="overflow-hidden rounded-[32px] border border-white/10 bg-white/[0.03]">
|
|
{event.cover_url ? <img src={event.cover_url} alt={event.title} className="h-56 w-full object-cover" /> : <div className="h-40 bg-white/[0.03]" />}
|
|
<div className="p-6">
|
|
<a href={group.urls?.public} className="text-sm font-semibold text-emerald-200">{group.name}</a>
|
|
<h1 className="mt-4 text-4xl font-semibold text-white">{event.title}</h1>
|
|
<p className="mt-4 max-w-3xl text-sm leading-7 text-slate-300">{event.summary || event.description || 'Group event'}</p>
|
|
<div className="mt-5 grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4 text-sm text-slate-300">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Starts</div>
|
|
<div className="mt-2 text-white">{event.start_at ? new Date(event.start_at).toLocaleString() : 'Not scheduled'}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4 text-sm text-slate-300">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Details</div>
|
|
<div className="mt-2 text-white">{event.event_type} • {event.visibility}</div>
|
|
{event.location ? <div className="mt-2">{event.location}</div> : null}
|
|
</div>
|
|
</div>
|
|
{event.external_url ? <a href={event.external_url} className="mt-5 inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Open external link</a> : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">About this event</h2>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">{event.description || 'No extended event details yet.'}</p>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
} |