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

src/App.jsx

@@ -30,14 +30,11 @@ function App() {
 
             // Add to history
             const newHistoryItem = {
+                ...result, // Store full result (sections, etc)
                 id: Date.now(),
-                title: result.title,
-                subtitle: result.subtitle,
                 age: data.age,
                 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]);
 
@@ -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 galleryTitle = history.length > 0 ? "Your Recent Creations" : "Most Popular Printables";
 
@@ -74,7 +76,7 @@ function App() {
             {/* Main Content */}
             <main className="max-w-7xl mx-auto px-4">
                 <Hero onGenerate={handleGenerate} generatedSheet={generatedSheet} isGenerating={isGenerating} />
-                <Gallery items={galleryItems} title={galleryTitle} />
+                <Gallery items={galleryItems} title={galleryTitle} onRestore={handleRestore} />
             </main>
 
             <HowItWorks />

src/components/Gallery.jsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { Wand2, Download, Star } from 'lucide-react';
 import { Button } from './ui/Button';
 
-export const Gallery = ({ items, title = "Most Popular Printables" }) => {
+export const Gallery = ({ items, title = "Most Popular Printables", onRestore }) => {
     return (
         <section className="py-12">
             <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"
                     >
                         <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 overflow-hidden relative">
+                                    <div
+                                        className="w-full h-full transform scale-90 origin-center"
+                                        dangerouslySetInnerHTML={{ __html: item.sections[0].content_svg }}
+                                    />
+                                    {/* 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 PDF
+                                    {onRestore ? "Open & Download" : "Download PDF"}
                                 </Button>
                             </div>
                         </div>