francy/wondersheets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Allow restoring previous sheets from the gallery with SVG previews and updated history item storage.

Browse Source
This commit is contained in:
francy 2026-01-30 01:04:58 +01:00
parent f26e1b0b6f
commit f60579e80e
2 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.jsx
View File

@ -30,14 +30,11 @@ function App() {
// Add to history // Add to history
const newHistoryItem = { const newHistoryItem = {
...result, // Store full result (sections, etc)
id: Date.now(), id: Date.now(),
title: result.title,
subtitle: result.subtitle,
age: data.age, age: data.age,
downloads: 0, downloads: 0,
bgColor: 'bg-primary-50', // Default color bgColor: 'bg-primary-50',
// We'll need to figure out how to preview it in the gallery.
// For now, Gallery expects 'bgColor'.
}; };
setHistory(prev => [newHistoryItem, ...prev]); setHistory(prev => [newHistoryItem, ...prev]);
@ -49,6 +46,11 @@ function App() {
} }
}; };
const handleRestore = (item) => {
setGeneratedSheet(item);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const galleryItems = history.length > 0 ? history.slice(0, 3) : popularSheets.slice(0, 3); const galleryItems = history.length > 0 ? history.slice(0, 3) : popularSheets.slice(0, 3);
const galleryTitle = history.length > 0 ? "Your Recent Creations" : "Most Popular Printables"; const galleryTitle = history.length > 0 ? "Your Recent Creations" : "Most Popular Printables";
@ -74,7 +76,7 @@ function App() {
{/* Main Content */} {/* Main Content */}
<main className="max-w-7xl mx-auto px-4"> <main className="max-w-7xl mx-auto px-4">
<Hero onGenerate={handleGenerate} generatedSheet={generatedSheet} isGenerating={isGenerating} /> <Hero onGenerate={handleGenerate} generatedSheet={generatedSheet} isGenerating={isGenerating} />
<Gallery items={galleryItems} title={galleryTitle} /> <Gallery items={galleryItems} title={galleryTitle} onRestore={handleRestore} />
</main> </main>
<HowItWorks /> <HowItWorks />

39
src/components/Gallery.jsx
View File

@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
import { Wand2, Download, Star } from 'lucide-react'; import { Wand2, Download, Star } from 'lucide-react';
import { Button } from './ui/Button'; import { Button } from './ui/Button';
export const Gallery = ({ items, title = "Most Popular Printables" }) => { export const Gallery = ({ items, title = "Most Popular Printables", onRestore }) => {
return ( return (
<section className="py-12"> <section className="py-12">
<div className="flex items-center gap-2 mb-8"> <div className="flex items-center gap-2 mb-8">
@ -21,17 +21,36 @@ export const Gallery = ({ items, title = "Most Popular Printables" }) => {
className="group bg-white rounded-3xl border-2 border-slate-100 overflow-hidden hover:border-primary-200 hover:shadow-xl hover:shadow-primary-100/50 transition-all duration-300" className="group bg-white rounded-3xl border-2 border-slate-100 overflow-hidden hover:border-primary-200 hover:shadow-xl hover:shadow-primary-100/50 transition-all duration-300"
> >
<div className={`aspect-[3/4] p-6 flex flex-col items-center justify-center relative ${item.bgColor}`}> <div className={`aspect-[3/4] p-6 flex flex-col items-center justify-center relative ${item.bgColor}`}>
{/* This would ideally be the actual sheet preview */} {item.sections && item.sections.length > 0 && item.sections[0].content_svg ? (
<div className="w-full h-full bg-white rounded-xl shadow-sm border border-black/5 flex flex-col items-center justify-center p-4 text-center"> <div className="w-full h-full bg-white rounded-xl shadow-sm border border-black/5 overflow-hidden relative">
<h3 className="font-bold text-lg mb-2">{item.title}</h3> <div
<p className="text-sm text-slate-500 mb-4">{item.subtitle}</p> className="w-full h-full transform scale-90 origin-center"
<div className="text-4xl font-mono opacity-20">123</div> dangerouslySetInnerHTML={{ __html: item.sections[0].content_svg }}
</div> />
{/* Overlay to prevent interaction with SVG parts */}
<div className="absolute inset-0 z-10"></div>
</div>
) : (
<div className="w-full h-full bg-white rounded-xl shadow-sm border border-black/5 flex flex-col items-center justify-center p-4 text-center">
{item.image ? (
<img src={item.image} alt={item.title} className="w-full h-full object-cover rounded-lg" />
) : (
<>
<h3 className="font-bold text-lg mb-2">{item.title}</h3>
<p className="text-sm text-slate-500 mb-4">{item.subtitle}</p>
<div className="text-4xl font-mono opacity-20">123</div>
</>
)}
</div>
)}
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100"> <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100 z-20">
<Button className="shadow-xl"> <Button
className="shadow-xl"
onClick={() => onRestore && onRestore(item)}
>
<Download className="mr-2" size={18} /> <Download className="mr-2" size={18} />
Download PDF {onRestore ? "Open & Download" : "Download PDF"}
</Button> </Button>
</div> </div>
</div> </div>