Noon Design - Interpretation PoC
Paste a React component to start editing
import React, { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( <div className="flex flex-col items-center gap-4 p-8"> <h1 className="text-2xl font-bold">Counter: {count}</h1> <div className="flex gap-2"> <button onClick={() => setCount(count - 1)} className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600" > - </button> <button onClick={() => setCount(count + 1)} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" > + </button> </div> </div> ); }
Load Component