forked from RheinFrame/RheinFrame-Web
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import Image from "next/image";
|
|
|
|
export default function PhotoPanel({
|
|
src,
|
|
alt,
|
|
tag,
|
|
className = "",
|
|
priority = false,
|
|
}: {
|
|
src: string;
|
|
alt: string;
|
|
tag?: string;
|
|
className?: string;
|
|
priority?: boolean;
|
|
}) {
|
|
return (
|
|
<div className={`relative overflow-hidden rounded-3xl border border-ink-700 ${className}`}>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
fill
|
|
priority={priority}
|
|
sizes="(min-width: 1024px) 1152px, 100vw"
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-ink-950/35" />
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ background: "linear-gradient(to top, rgba(5,7,10,0.85), rgba(5,7,10,0.05) 45%)" }}
|
|
/>
|
|
<div
|
|
className="absolute inset-0 mix-blend-color"
|
|
style={{ backgroundColor: "var(--color-river-600)", opacity: 0.18 }}
|
|
/>
|
|
{tag && (
|
|
<div className="absolute left-5 top-5 rounded-md border border-ink-700 bg-ink-950/80 px-2.5 py-1 font-mono text-[11px] text-ink-300 backdrop-blur">
|
|
{tag}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|