import React, { useState, useEffect } from 'react'; import { Plus, Download, FileJson, Copy, Trash2, ChevronLeft, ChevronRight, Monitor, Palette, Type, Image as ImageIcon } from 'lucide-react'; // --- Default Data / Initial State --- const INITIAL_SLIDES = [ { id: '1', title: 'How to make good popcorn', content: '

How to make good popcorn

A simple guide.

', bgColor: '#2a2a2a', // Dark theme default textColor: '#ffffff', note: 'Intro slide' }, { id: '2', title: 'Methods', content: '

Methods

Microwave (Yuck)
Air-popper (Meh)
Stove (Yes!)

', bgColor: '#d17000', // Orange from example textColor: '#ffffff', note: '' }, { id: '3', title: 'Step One', content: '

Step One

Party of Five

High heat
Oil
5 kernels

', bgColor: '#336633', // Green from example textColor: '#ffffff', note: '' } ]; const PMSlide = () => { // --- State --- const [slides, setSlides] = useState(INITIAL_SLIDES); const [currentIndex, setCurrentIndex] = useState(0); const [projectPath, setProjectPath] = useState('how-to-make-popcorn'); const [showCopied, setShowCopied] = useState(false); // --- Actions --- const activeSlide = slides[currentIndex]; const addSlide = () => { const newSlide = { id: crypto.randomUUID(), title: 'New Slide', content: '

New Slide

Edit me...

', bgColor: '#ffffff', textColor: '#222222', note: '' }; const newSlides = [...slides, newSlide]; setSlides(newSlides); setCurrentIndex(newSlides.length - 1); }; const updateSlide = (key, value) => { const updatedSlides = [...slides]; updatedSlides[currentIndex] = { ...updatedSlides[currentIndex], [key]: value }; setSlides(updatedSlides); }; const deleteSlide = (e) => { e.stopPropagation(); if (slides.length <= 1) return alert("You need at least one slide."); const newSlides = slides.filter((_, i) => i !== currentIndex); setSlides(newSlides); setCurrentIndex(prev => (prev >= newSlides.length ? newSlides.length - 1 : prev)); }; const moveSlide = (direction) => { if (direction === -1 && currentIndex === 0) return; if (direction === 1 && currentIndex === slides.length - 1) return; const newSlides = [...slides]; const temp = newSlides[currentIndex]; newSlides[currentIndex] = newSlides[currentIndex + direction]; newSlides[currentIndex + direction] = temp; setSlides(newSlides); setCurrentIndex(currentIndex + direction); }; const copyPath = () => { const url = `slide.pm/${projectPath}`; navigator.clipboard.writeText(url); setShowCopied(true); setTimeout(() => setShowCopied(false), 2000); }; // --- Exporters --- const downloadJSON = () => { const data = JSON.stringify({ path: projectPath, slides }, null, 2); const blob = new Blob([data], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${projectPath}.json`; a.click(); }; const downloadHTML = () => { // Generates a self-contained HTML file using CDN links for Reveal.js const htmlContent = ` ${projectPath}

${slides.map(slide => `

${slide.content} ${slide.note ? `` : ''}

`).join('\n')}