feat: add modal for full book reviews with responsive design
- Add modal popup to view complete book reviews - Click 'Read full review' opens animated modal - Responsive design optimized for mobile and desktop - Liquid design system styling with gradients and blur effects - Modal includes book cover, rating, and full review text - Close via X button or backdrop click - Smooth Framer Motion animations - Clean up old n8n workflow temporary files Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { BookCheck, Star, ChevronDown, ChevronUp, X } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
@@ -48,6 +48,7 @@ const ReadBooks = () => {
|
||||
const [reviews, setReviews] = useState<BookReview[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [selectedReview, setSelectedReview] = useState<BookReview | null>(null);
|
||||
|
||||
const INITIAL_SHOW = 3;
|
||||
|
||||
@@ -198,9 +199,17 @@ const ReadBooks = () => {
|
||||
|
||||
{/* Review Text (Optional) */}
|
||||
{review.review && (
|
||||
<p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
|
||||
“{stripHtml(review.review)}”
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
|
||||
“{stripHtml(review.review)}”
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSelectedReview(review)}
|
||||
className="text-xs text-liquid-mint dark:text-liquid-sky hover:underline mt-1 font-medium"
|
||||
>
|
||||
{t("readMore", { defaultValue: "Read full review" })}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Finished Date */}
|
||||
@@ -239,6 +248,131 @@ const ReadBooks = () => {
|
||||
)}
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{/* Modal for full review */}
|
||||
<AnimatePresence>
|
||||
{selectedReview && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedReview(null)}
|
||||
className="fixed inset-0 bg-black/70 backdrop-blur-md z-50"
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 40 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 40 }}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 400 }}
|
||||
className="fixed inset-x-4 bottom-4 top-20 sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-full sm:max-w-3xl sm:max-h-[85vh] z-50 bg-gradient-to-br from-white via-liquid-sky/5 to-liquid-mint/10 dark:from-stone-900 dark:via-stone-900 dark:to-stone-800 rounded-3xl shadow-2xl border-2 border-liquid-mint/30 dark:border-stone-700 overflow-hidden"
|
||||
>
|
||||
{/* Decorative blob */}
|
||||
<div className="absolute -top-20 -right-20 w-64 h-64 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 dark:from-stone-700/30 dark:to-stone-600/30 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={() => setSelectedReview(null)}
|
||||
className="absolute top-4 right-4 p-2.5 rounded-full bg-white/80 dark:bg-stone-800/80 backdrop-blur-sm hover:bg-white dark:hover:bg-stone-700 transition-all duration-200 z-10 shadow-lg border border-stone-200 dark:border-stone-600"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X size={20} className="text-stone-600 dark:text-stone-300" />
|
||||
</button>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative h-full overflow-y-auto overscroll-contain p-6 sm:p-8 md:p-10">
|
||||
<div className="flex flex-col sm:flex-row gap-6 mb-6">
|
||||
{/* Book Cover */}
|
||||
{selectedReview.book_image && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="flex-shrink-0 mx-auto sm:mx-0"
|
||||
>
|
||||
<div className="relative w-32 h-48 sm:w-36 sm:h-52 rounded-xl overflow-hidden shadow-2xl border-2 border-white/50 dark:border-stone-700">
|
||||
<Image
|
||||
src={selectedReview.book_image}
|
||||
alt={selectedReview.book_title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 128px, 144px"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Book Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.15 }}
|
||||
className="flex-1 min-w-0"
|
||||
>
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-stone-900 dark:text-stone-100 mb-2 leading-tight">
|
||||
{selectedReview.book_title}
|
||||
</h2>
|
||||
<p className="text-base sm:text-lg text-stone-600 dark:text-stone-400 mb-4">
|
||||
{selectedReview.book_author}
|
||||
</p>
|
||||
|
||||
{selectedReview.rating && selectedReview.rating > 0 && (
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex gap-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
size={18}
|
||||
className={
|
||||
star <= selectedReview.rating!
|
||||
? "text-amber-500 fill-amber-500"
|
||||
: "text-stone-300 dark:text-stone-600"
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-base text-stone-600 dark:text-stone-400 font-semibold">
|
||||
{selectedReview.rating}/5
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedReview.finished_at && (
|
||||
<p className="text-sm text-stone-500 dark:text-stone-400 flex items-center gap-2">
|
||||
<BookCheck size={14} className="opacity-60" />
|
||||
{t("finishedAt")}{" "}
|
||||
{new Date(selectedReview.finished_at).toLocaleDateString(
|
||||
locale === "de" ? "de-DE" : "en-US",
|
||||
{ year: "numeric", month: "long", day: "numeric" }
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Full Review */}
|
||||
{selectedReview.review && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="bg-gradient-to-br from-liquid-mint/10 via-liquid-sky/5 to-transparent dark:from-stone-800/50 dark:via-stone-800/30 dark:to-transparent rounded-2xl p-6 border-l-4 border-liquid-mint dark:border-liquid-sky"
|
||||
>
|
||||
<p className="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed italic">
|
||||
“{stripHtml(selectedReview.review)}”
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user