Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import './App.css'; | |
| function App() { | |
| const [count, setCount] = useState(0); | |
| const [message, setMessage] = useState(''); | |
| const handleIncrement = () => { | |
| setCount(count + 1); | |
| setMessage(`You clicked ${count + 1} times!`); | |
| }; | |
| const handleDecrement = () => { | |
| setCount(count - 1); | |
| setMessage(`You clicked ${count - 1} times!`); | |
| }; | |
| const resetCounter = () => { | |
| setCount(0); | |
| setMessage('Counter reset!'); | |
| }; | |
| return ( | |
| <div className="App"> | |
| <header className="App-header"> | |
| <h1>Custom React Counter App</h1> | |
| <div className="counter-container"> | |
| <div className="counter-display"> | |
| <h2>Count: {count}</h2> | |
| </div> | |
| <div className="button-group"> | |
| <button | |
| className="counter-btn increment-btn" | |
| onClick={handleIncrement} | |
| > | |
| + Increment | |
| </button> | |
| <button | |
| className="counter-btn decrement-btn" | |
| onClick={handleDecrement} | |
| > | |
| - Decrement | |
| </button> | |
| <button | |
| className="counter-btn reset-btn" | |
| onClick={resetCounter} | |
| > | |
| Reset | |
| </button> | |
| </div> | |
| {message && ( | |
| <div className="message"> | |
| <p>{message}</p> | |
| </div> | |
| )} | |
| </div> | |
| <footer className="app-footer"> | |
| <p>Built with React 18 • Hugging Face Spaces</p> | |
| </footer> | |
| </header> | |
| </div> | |
| ); | |
| } | |
| export default App; |