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

feat: Enable restoring generated sheet state in Hero component, update Gallery sheet action labels, and add sections to mock data.

Browse Source
This commit is contained in:
francy 2026-01-30 01:05:11 +01:00
parent f60579e80e
commit 584b25720a
3 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Gallery.jsx
View File

@ -49,8 +49,8 @@ export const Gallery = ({ items, title = "Most Popular Printables", onRestore })
className="shadow-xl"
onClick={() => onRestore && onRestore(item)}
>
<Download className="mr-2" size={18} />
{onRestore ? "Open & Download" : "Download PDF"}
<Wand2 className="mr-2" size={18} />
{onRestore ? "Open in Editor" : "View Sheet"}
</Button>
</div>
</div>

42
src/components/Hero.jsx
View File

@ -12,6 +12,48 @@ export const Hero = ({ onGenerate, generatedSheet, isGenerating }) => {
const [age, setAge] = useState(5);
const [selectedSection, setSelectedSection] = useState('coloring');
// Sync state when a sheet is restored
React.useEffect(() => {
if (generatedSheet) {
setTheme(generatedSheet.title || '');
if (generatedSheet.age) setAge(generatedSheet.age);
// If sections exist, restore the first one's type as selected
if (generatedSheet.sections && generatedSheet.sections.length > 0) {
// Map section type back to ID if possible, or fallback
const secType = generatedSheet.sections[0].type; // e.g. "coloring"
// Our IDs match the types mostly, but let's be safe
// IDs: coloring, numbers, writing, find-the-way, counting
// Types from prompt: coloring|numbers|writing|find-the-way|counting
// So direct mapping should work.
// But wait, finding the ID that matches the type/id from result
// In App.jsx we assume result has sections.
// The prompt returns 'type' and we use that? No, prompt returns 'id' and 'type'.
// Let's use the first section's ID if valid.
const secId = generatedSheet.sections[0].id; // e.g. "coloring-123"
// This ID from AI might be "coloring-main". We need to map it to our internal IDs: 'coloring', 'writing', 'numbers', etc.
// Internal IDs in Hero are: 'coloring', 'numbers', 'writing', 'find-way' (wait, it's 'find-way' not 'find-the-way'!), 'counting'.
// Let's check mockData for IDs.
// sections: [{id: 'find-way', label: 'Find the Way', ...}]
// AI prompt was: "find-the-way" for type.
// We need to map "find-the-way" -> "find-way".
const typeToId = {
'coloring': 'coloring',
'numbers': 'numbers',
'writing': 'writing',
'find-the-way': 'find-way',
'counting': 'counting'
};
if (typeToId[secType]) {
setSelectedSection(typeToId[secType]);
}
}
}
}, [generatedSheet]);
const handleSectionChange = (id) => {
if (!isGenerating) {
setSelectedSection(id);

3
src/data/mockData.js
View File

@ -8,6 +8,7 @@ export const popularSheets = [
type: "Math",
bgColor: "bg-green-50",
image: "https://images.unsplash.com/photo-1559810686-353c7a974b7c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3",
sections: [{ type: "Math", content: "Dinosaur Math Content (Placeholder)" }]
},
{
id: 2,
@ -18,6 +19,7 @@ export const popularSheets = [
type: "Maze",
bgColor: "bg-pink-50",
image: "https://images.unsplash.com/photo-1555557760-b610c1f207d5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3",
sections: [{ type: "Maze", content: "Princess Maze Content (Placeholder)" }]
},
{
id: 3,
@ -28,6 +30,7 @@ export const popularSheets = [
type: "Writing",
bgColor: "bg-slate-50",
image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3",
sections: [{ type: "Writing", content: "Space Writing Content (Placeholder)" }]
}
];