Save workspace changes
This commit is contained in:
@@ -0,0 +1,124 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function SimilarArtworksHeader({ artwork }) {
|
||||
if (!artwork) return null
|
||||
|
||||
const title = artwork.title || 'Artwork'
|
||||
const artworkUrl = artwork.url || '#'
|
||||
const authorName = artwork.author_name || 'Artist'
|
||||
const authorHref = artwork.author_profile_url || (artwork.author_username ? `/@${artwork.author_username}` : null)
|
||||
const browseHref = artwork.browse_url || (artwork.content_type_slug ? `/${artwork.content_type_slug}` : '/explore')
|
||||
const thumbUrl = artwork.thumb_lg || artwork.thumb_md || null
|
||||
const thumbSrcSet = artwork.thumb_srcset || undefined
|
||||
const tags = Array.isArray(artwork.tag_slugs) ? artwork.tag_slugs.filter(Boolean) : []
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_28%),linear-gradient(145deg,rgba(8,17,29,0.96),rgba(11,20,34,0.94))] shadow-[0_28px_80px_rgba(2,6,23,0.34)]">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.12),transparent_24%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.12),transparent_30%)]" />
|
||||
<div className="relative grid gap-6 p-5 md:p-7 xl:grid-cols-[280px_minmax(0,1fr)] xl:items-center">
|
||||
<a
|
||||
href={artworkUrl}
|
||||
className="group relative overflow-hidden rounded-[28px] border border-white/10 bg-[#08111d] shadow-[0_18px_40px_rgba(2,6,23,0.28)]"
|
||||
>
|
||||
<div className="aspect-[5/4] overflow-hidden">
|
||||
{thumbUrl ? (
|
||||
<img
|
||||
src={thumbUrl}
|
||||
srcSet={thumbSrcSet}
|
||||
sizes="(min-width: 1280px) 280px, (min-width: 768px) 40vw, 100vw"
|
||||
alt={title}
|
||||
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-white/[0.04] text-sm text-slate-500">
|
||||
Preview unavailable
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/55 via-transparent to-transparent" />
|
||||
</a>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200">
|
||||
<span className="h-2 w-2 rounded-full bg-sky-300 shadow-[0_0_12px_rgba(125,211,252,0.85)]" />
|
||||
Visual discovery
|
||||
</div>
|
||||
|
||||
<h1 className="mt-4 max-w-4xl text-3xl font-semibold leading-tight tracking-[-0.04em] text-white md:text-4xl xl:text-5xl">
|
||||
Artworks similar to{' '}
|
||||
<a href={artworkUrl} className="underline decoration-white/15 underline-offset-4 transition hover:decoration-sky-300">
|
||||
{title}
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<p className="mt-3 max-w-3xl text-sm leading-6 text-slate-300">
|
||||
Browse visually related artworks, compare style cues, and jump back into the original piece whenever you need context.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2.5 text-sm text-slate-300">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5">
|
||||
{artwork.author_avatar ? (
|
||||
<img
|
||||
src={artwork.author_avatar}
|
||||
alt={authorName}
|
||||
className="h-5 w-5 rounded-full object-cover ring-1 ring-white/15"
|
||||
/>
|
||||
) : null}
|
||||
{authorHref ? (
|
||||
<a href={authorHref} className="font-medium text-white/85 transition hover:text-white">
|
||||
{authorName}
|
||||
</a>
|
||||
) : (
|
||||
<span className="font-medium text-white/85">{authorName}</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{artwork.category_name ? (
|
||||
<span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-slate-300">
|
||||
{artwork.category_name}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{artwork.content_type_name ? (
|
||||
<span className="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1.5 text-xs font-medium text-amber-100">
|
||||
{artwork.content_type_name}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{tags.length > 0 ? (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{tags.map((tagSlug) => (
|
||||
<span
|
||||
key={tagSlug}
|
||||
className="rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-300 transition hover:border-sky-300/30 hover:bg-sky-400/10 hover:text-white"
|
||||
>
|
||||
#{tagSlug}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a
|
||||
href={artworkUrl}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-2.5 text-sm font-semibold text-white/85 transition hover:bg-white/[0.1] hover:text-white"
|
||||
>
|
||||
<svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Back to artwork
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={browseHref}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 hover:text-white"
|
||||
>
|
||||
Browse {artwork.content_type_name || 'artworks'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user