Interactive Demo Component

📋 Request ID: swe-1759098536762-a2622757
⏰ Generated: 28/09/2025, 18:28:56
📁 Files: 2 files created

State Management

Interactive Buttons

Live Text Input

Modern Styling

Responsive Design

Demo.jsx (React JSX)

import React, { useState } from 'react';
import './Demo.css';

const Demo = () => {
    const [count, setCount] = useState(0);
    const [message, setMessage] = useState('Hello from Demo!');

    return (
        <div className="demo">
            <h1>{message}</h1>
            <div className="counter-section">
                <p>Count: {count}</p>
                <button onClick={() => setCount(count + 1)}>Increment</button>
                <button onClick={() => setCount(count - 1)}>Decrement</button>
                <button onClick={() => setCount(0)}>Reset</button>
            </div>
            <div className="input-section">
                <input
                    type="text"
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    placeholder="Enter your message..."
                />
            </div>
        </div>
    );
};

export default Demo;

🚀 Interactive Demo Component