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";
|
"use client";
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
|
import { BookCheck, Star, ChevronDown, ChevronUp, X } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useLocale, useTranslations } from "next-intl";
|
import { useLocale, useTranslations } from "next-intl";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
@@ -48,6 +48,7 @@ const ReadBooks = () => {
|
|||||||
const [reviews, setReviews] = useState<BookReview[]>([]);
|
const [reviews, setReviews] = useState<BookReview[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [expanded, setExpanded] = useState(false);
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
const [selectedReview, setSelectedReview] = useState<BookReview | null>(null);
|
||||||
|
|
||||||
const INITIAL_SHOW = 3;
|
const INITIAL_SHOW = 3;
|
||||||
|
|
||||||
@@ -198,9 +199,17 @@ const ReadBooks = () => {
|
|||||||
|
|
||||||
{/* Review Text (Optional) */}
|
{/* Review Text (Optional) */}
|
||||||
{review.review && (
|
{review.review && (
|
||||||
|
<div>
|
||||||
<p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
|
<p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
|
||||||
“{stripHtml(review.review)}”
|
“{stripHtml(review.review)}”
|
||||||
</p>
|
</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 */}
|
{/* Finished Date */}
|
||||||
@@ -239,6 +248,131 @@ const ReadBooks = () => {
|
|||||||
)}
|
)}
|
||||||
</motion.button>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,197 +0,0 @@
|
|||||||
// --------------------------------------------------------
|
|
||||||
// DATEN AUS DEN VORHERIGEN NODES HOLEN
|
|
||||||
// --------------------------------------------------------
|
|
||||||
|
|
||||||
// 1. Spotify Node
|
|
||||||
let spotifyData = null;
|
|
||||||
try {
|
|
||||||
spotifyData = $('Spotify').first().json;
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
// 2. Lanyard Node (Discord)
|
|
||||||
let lanyardData = null;
|
|
||||||
try {
|
|
||||||
lanyardData = $('Lanyard').first().json.data;
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
// 3. Wakapi Summary (Tages-Statistik)
|
|
||||||
let wakapiStats = null;
|
|
||||||
try {
|
|
||||||
const wRaw = $('Wakapi').first().json;
|
|
||||||
// Manchmal ist es direkt im Root, manchmal unter data
|
|
||||||
wakapiStats = wRaw.grand_total ? wRaw : (wRaw.data ? wRaw.data : null);
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
// 4. Wakapi Heartbeats (Live Check)
|
|
||||||
let heartbeatsList = [];
|
|
||||||
try {
|
|
||||||
const response = $('WakapiLast').last().json;
|
|
||||||
if (response.data && Array.isArray(response.data)) {
|
|
||||||
heartbeatsList = response.data;
|
|
||||||
}
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
// 5. Hardcover Reading (Neu!)
|
|
||||||
let hardcoverData = null;
|
|
||||||
try {
|
|
||||||
// Falls du einen Node "Hardcover" hast
|
|
||||||
hardcoverData = $('Hardcover').first().json;
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
|
|
||||||
// --------------------------------------------------------
|
|
||||||
// LOGIK & FORMATIERUNG
|
|
||||||
// --------------------------------------------------------
|
|
||||||
|
|
||||||
// --- A. SPOTIFY / MUSIC ---
|
|
||||||
let music = null;
|
|
||||||
|
|
||||||
if (spotifyData && spotifyData.item && spotifyData.is_playing) {
|
|
||||||
music = {
|
|
||||||
isPlaying: true,
|
|
||||||
track: spotifyData.item.name,
|
|
||||||
artist: spotifyData.item.artists.map(a => a.name).join(', '),
|
|
||||||
album: spotifyData.item.album.name,
|
|
||||||
albumArt: spotifyData.item.album.images[0]?.url,
|
|
||||||
url: spotifyData.item.external_urls.spotify
|
|
||||||
};
|
|
||||||
} else if (lanyardData?.listening_to_spotify && lanyardData.spotify) {
|
|
||||||
music = {
|
|
||||||
isPlaying: true,
|
|
||||||
track: lanyardData.spotify.song,
|
|
||||||
artist: lanyardData.spotify.artist.replace(/;/g, ", "),
|
|
||||||
album: lanyardData.spotify.album,
|
|
||||||
albumArt: lanyardData.spotify.album_art_url,
|
|
||||||
url: `https://open.spotify.com/track/${lanyardData.spotify.track_id}`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- B. GAMING & STATUS ---
|
|
||||||
let gaming = null;
|
|
||||||
let status = {
|
|
||||||
text: lanyardData?.discord_status || "offline",
|
|
||||||
color: 'gray'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Farben mapping
|
|
||||||
if (status.text === 'online') status.color = 'green';
|
|
||||||
if (status.text === 'idle') status.color = 'yellow';
|
|
||||||
if (status.text === 'dnd') status.color = 'red';
|
|
||||||
|
|
||||||
if (lanyardData?.activities) {
|
|
||||||
lanyardData.activities.forEach(act => {
|
|
||||||
// Type 0 = Game (Spotify ignorieren)
|
|
||||||
if (act.type === 0 && act.name !== "Spotify") {
|
|
||||||
let image = null;
|
|
||||||
if (act.assets?.large_image) {
|
|
||||||
if (act.assets.large_image.startsWith("mp:external")) {
|
|
||||||
image = act.assets.large_image.replace(/mp:external\/([^\/]*)\/(https?)\/(^\/]*)\/(.*)/,"$2://$3/$4");
|
|
||||||
} else {
|
|
||||||
image = `https://cdn.discordapp.com/app-assets/${act.application_id}/${act.assets.large_image}.png`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
gaming = {
|
|
||||||
isPlaying: true,
|
|
||||||
name: act.name,
|
|
||||||
details: act.details,
|
|
||||||
state: act.state,
|
|
||||||
image: image
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- C. CODING (Wakapi Logic) ---
|
|
||||||
let coding = null;
|
|
||||||
|
|
||||||
// 1. Basis-Stats von heute (Fallback)
|
|
||||||
if (wakapiStats && wakapiStats.grand_total) {
|
|
||||||
coding = {
|
|
||||||
isActive: false,
|
|
||||||
stats: {
|
|
||||||
time: wakapiStats.grand_total.text,
|
|
||||||
topLang: wakapiStats.languages?.[0]?.name || "Code",
|
|
||||||
topProject: wakapiStats.projects?.[0]?.name || "Project"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Live Check via Heartbeats
|
|
||||||
if (heartbeatsList.length > 0) {
|
|
||||||
const latestBeat = heartbeatsList[heartbeatsList.length - 1];
|
|
||||||
|
|
||||||
if (latestBeat && latestBeat.time) {
|
|
||||||
const beatTime = new Date(latestBeat.time * 1000).getTime();
|
|
||||||
const now = new Date().getTime();
|
|
||||||
const diffMinutes = (now - beatTime) / 1000 / 60;
|
|
||||||
|
|
||||||
// Wenn jünger als 15 Minuten -> AKTIV
|
|
||||||
if (diffMinutes < 15) {
|
|
||||||
if (!coding) coding = { stats: { time: "Just started" } };
|
|
||||||
|
|
||||||
coding.isActive = true;
|
|
||||||
coding.project = latestBeat.project || coding.stats?.topProject;
|
|
||||||
|
|
||||||
if (latestBeat.entity) {
|
|
||||||
const parts = latestBeat.entity.split(/[/\\]/);
|
|
||||||
coding.file = parts[parts.length - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
coding.language = latestBeat.language;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- D. CUSTOM ACTIVITIES (Komplett dynamisch!) ---
|
|
||||||
// Hier kannst du beliebige Activities hinzufügen ohne Website Code zu ändern
|
|
||||||
let customActivities = {};
|
|
||||||
|
|
||||||
// Beispiel: Reading Activity (Hardcover Integration)
|
|
||||||
if (hardcoverData && hardcoverData.user_book) {
|
|
||||||
const book = hardcoverData.user_book;
|
|
||||||
customActivities.reading = {
|
|
||||||
enabled: true,
|
|
||||||
title: book.book?.title,
|
|
||||||
author: book.book?.contributions?.[0]?.author?.name,
|
|
||||||
progress: book.progress_pages && book.book?.pages
|
|
||||||
? Math.round((book.progress_pages / book.book.pages) * 100)
|
|
||||||
: undefined,
|
|
||||||
coverUrl: book.book?.image_url
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Beispiel: Manuell gesetzt via separatem Webhook
|
|
||||||
// Du kannst einen Webhook erstellen der customActivities setzt:
|
|
||||||
// POST /webhook/set-custom-activity
|
|
||||||
// {
|
|
||||||
// "type": "working_out",
|
|
||||||
// "data": {
|
|
||||||
// "enabled": true,
|
|
||||||
// "activity": "Running",
|
|
||||||
// "duration_minutes": 45,
|
|
||||||
// "distance_km": 7.2,
|
|
||||||
// "calories": 350
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// Dann hier einfach: customActivities.working_out = $('SetCustomActivity').first().json.data;
|
|
||||||
|
|
||||||
// WICHTIG: Du kannst auch mehrere Activities gleichzeitig haben!
|
|
||||||
// customActivities.learning = { enabled: true, course: "Docker", platform: "Udemy", progress: 67 };
|
|
||||||
// customActivities.streaming = { enabled: true, platform: "Twitch", viewers: 42 };
|
|
||||||
// etc.
|
|
||||||
|
|
||||||
|
|
||||||
// --------------------------------------------------------
|
|
||||||
// OUTPUT
|
|
||||||
// --------------------------------------------------------
|
|
||||||
return {
|
|
||||||
json: {
|
|
||||||
status,
|
|
||||||
music,
|
|
||||||
gaming,
|
|
||||||
coding,
|
|
||||||
customActivities, // NEU! Komplett dynamisch
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user