52 lines
3.7 KiB
PHP
52 lines
3.7 KiB
PHP
@extends('layouts.nova.content-layout')
|
|
|
|
@php
|
|
$hero_title = 'Story Preview';
|
|
$hero_description = 'This preview mirrors the final published layout.';
|
|
@endphp
|
|
|
|
@section('page-content')
|
|
<div class="mx-auto grid max-w-7xl gap-6 lg:grid-cols-12">
|
|
<article class="lg:col-span-8">
|
|
<div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
|
|
@if($story->cover_image)
|
|
<img src="{{ $story->cover_image }}" alt="{{ $story->title }}" class="h-72 w-full object-cover" />
|
|
@endif
|
|
<div class="p-6">
|
|
<div class="mb-4 flex flex-wrap items-center gap-3 text-xs text-gray-300">
|
|
<span class="rounded-full border border-gray-600 px-2 py-1">{{ str_replace('_', ' ', $story->story_type) }}</span>
|
|
<span>{{ (int) $story->reading_time }} min read</span>
|
|
<span class="rounded-full border border-amber-500/40 px-2 py-1 text-amber-200">Preview</span>
|
|
</div>
|
|
<h1 class="text-3xl font-semibold tracking-tight text-white">{{ $story->title }}</h1>
|
|
@if($story->excerpt)
|
|
<p class="mt-3 text-gray-300">{{ $story->excerpt }}</p>
|
|
@endif
|
|
|
|
<div class="story-prose prose prose-invert mt-6 max-w-none prose-a:text-sky-300 prose-pre:overflow-x-auto prose-pre:rounded-2xl prose-pre:border prose-pre:border-slate-700 prose-pre:bg-slate-950 prose-pre:px-8 prose-pre:py-6 prose-pre:text-slate-100 prose-pre:shadow-[0_24px_70px_rgba(2,6,23,0.45)] prose-pre:ring-1 prose-pre:ring-sky-500/10 prose-pre:font-mono prose-pre:text-[0.95rem] prose-pre:leading-8 prose-code:text-amber-200 prose-code:bg-white/[0.08] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-l-4 prose-blockquote:border-sky-400/55 prose-blockquote:bg-sky-400/[0.06] prose-blockquote:px-5 prose-blockquote:py-3 prose-blockquote:rounded-r-xl prose-blockquote:text-white/82 prose-blockquote:italic prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0 prose-pre:prose-code:text-slate-100 prose-pre:prose-code:rounded-none [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_li]:text-white/85">
|
|
{!! $safeContent !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="space-y-4 lg:col-span-4">
|
|
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Preview Actions</h3>
|
|
<div class="mt-3 flex flex-col gap-2 text-sm">
|
|
<a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sky-200 transition hover:scale-[1.02]">Back to editor</a>
|
|
<a href="{{ route('creator.stories.analytics', ['story' => $story->id]) }}" class="rounded-lg border border-violet-500/40 bg-violet-500/10 px-3 py-2 text-violet-200 transition hover:scale-[1.02]">Story analytics</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Status</h3>
|
|
<p class="mt-2 text-sm text-gray-200">{{ str_replace('_', ' ', ucfirst($story->status)) }}</p>
|
|
@if($story->rejected_reason)
|
|
<p class="mt-2 rounded-lg border border-rose-500/30 bg-rose-500/10 p-2 text-xs text-rose-200">{{ $story->rejected_reason }}</p>
|
|
@endif
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
@endsection
|