125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { STORE_CATALOG } from "@/lib/store-catalog";
|
|
import { StoreCheckoutModal, type LockedCourse } from "./store-checkout-modal";
|
|
|
|
interface Props {
|
|
courses: LockedCourse[];
|
|
buyer: { name: string; email: string };
|
|
}
|
|
|
|
// Blurred card body shared by both the modal-trigger button and the
|
|
// fallback landing link.
|
|
function CardBody({ course }: { course: LockedCourse }) {
|
|
return (
|
|
<>
|
|
{/* Overlay: замок + призыв, поверх размытого контента */}
|
|
<div
|
|
className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 transition-opacity"
|
|
style={{ backgroundColor: "color-mix(in srgb, var(--background) 55%, transparent)" }}
|
|
>
|
|
<span className="text-2xl">🔒</span>
|
|
<span
|
|
className="text-sm font-bold px-4 py-2"
|
|
style={{
|
|
border: "2px solid var(--foreground)",
|
|
backgroundColor: "var(--accent)",
|
|
color: "var(--foreground)",
|
|
}}
|
|
>
|
|
Подробнее →
|
|
</span>
|
|
</div>
|
|
{/* Размытый контент карточки */}
|
|
<div
|
|
className="flex flex-col flex-1"
|
|
style={{ filter: "blur(1.8px)", opacity: 0.82, pointerEvents: "none" }}
|
|
>
|
|
{course.coverImage ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={course.coverImage}
|
|
alt={course.title}
|
|
className="w-full aspect-video object-cover"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="w-full aspect-video flex items-center justify-center text-4xl"
|
|
style={{ backgroundColor: "var(--color-surface)" }}
|
|
>
|
|
📚
|
|
</div>
|
|
)}
|
|
<div className="p-4 flex-1 flex flex-col gap-2">
|
|
<h2 className="font-bold text-lg leading-tight">{course.title}</h2>
|
|
{course.description && (
|
|
<p className="text-sm line-clamp-3" style={{ color: "var(--muted-foreground)" }}>
|
|
{course.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function StoreShowcase({ courses, buyer }: Props) {
|
|
const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
|
|
|
|
const selected = courses.find((c) => c.slug === selectedSlug);
|
|
const selectedEntry = selected ? STORE_CATALOG[selected.slug] : undefined;
|
|
|
|
const cardClass = "card-aubade p-0 overflow-hidden flex flex-col relative group";
|
|
|
|
return (
|
|
<div className="mt-10">
|
|
<p
|
|
className="text-xs font-bold uppercase tracking-widest mb-3"
|
|
style={{ color: "var(--muted-foreground)" }}
|
|
>
|
|
Другие курсы Second Brain
|
|
</p>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{courses.map((course) => {
|
|
const entry = STORE_CATALOG[course.slug];
|
|
if (!entry || entry.tariffs.length === 0) {
|
|
// Fallback: no catalog entry → keep the old landing link
|
|
return (
|
|
<a
|
|
key={course.id}
|
|
href={entry?.landingUrl ?? "https://second-brain.ru"}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cardClass}
|
|
>
|
|
<CardBody course={course} />
|
|
</a>
|
|
);
|
|
}
|
|
return (
|
|
<button
|
|
key={course.id}
|
|
type="button"
|
|
aria-haspopup="dialog"
|
|
onClick={() => setSelectedSlug(course.slug)}
|
|
className={`${cardClass} text-left w-full cursor-pointer`}
|
|
>
|
|
<CardBody course={course} />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{selected && selectedEntry && (
|
|
<StoreCheckoutModal
|
|
course={selected}
|
|
entry={selectedEntry}
|
|
buyer={buyer}
|
|
onClose={() => setSelectedSlug(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|