Upload App.tsx

src/App.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { slidesData } from './data/slides';
+import { styles } from './styles/appStyles';
+import ProgressBar from './components/ProgressBar';
+import SlideRenderer from './components/SlideRenderer';
+
+const App = () => {
+    const [step, setStep] = useState(0);
+
+    const handleNext = () => setStep(prev => Math.min(prev + 1, slidesData.length - 1));
+    const handlePrev = () => setStep(prev => Math.max(0, prev - 1));
+
+    const currentSlideData = slidesData[step];
+    
+    return (
+        <div style={styles.card}>
+            <ProgressBar current={step} total={slidesData.length} />
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '2rem', overflowY: 'auto' }}>
+                <SlideRenderer slide={currentSlideData} />
+            </div>
+            <div style={{...styles.buttonContainer, padding: '0 2rem 2rem 2rem'}}>
+                <button onClick={handlePrev} disabled={step === 0} style={{ ...styles.button, ...(step === 0 && styles.buttonDisabled) }}>
+                    Previous
+                </button>
+                <button onClick={handleNext} disabled={step === slidesData.length - 1} style={{ ...styles.button, ...(step === slidesData.length - 1 && styles.buttonDisabled) }}>
+                    Next
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default App;