diff --git a/src/ArtifactCode.jsx b/src/ArtifactCode.jsx index bc777be..3abfe78 100644 --- a/src/ArtifactCode.jsx +++ b/src/ArtifactCode.jsx @@ -1,27 +1,62 @@ -import React, { useState } from "react"; -import { Button } from "@/components/ui/button"; +import React, { useState, useEffect } from 'react'; -const App = () => { - const [count, setCount] = useState(0); +const useLocalStorage = (key, initialValue) => { + const [storedValue, setStoredValue] = useState(() => { + try { + const item = window.localStorage.getItem(key); + return item ? JSON.parse(item) : initialValue; + } catch (error) { + console.error(error); + return initialValue; + } + }); - const handleClick = () => { - setCount(count + 1); + const setValue = (value) => { + try { + const valueToStore = value instanceof Function ? value(storedValue) : value; + setStoredValue(valueToStore); + window.localStorage.setItem(key, JSON.stringify(valueToStore)); + } catch (error) { + console.error(error); + } }; + return [storedValue, setValue]; +}; + +const PersistentCounter = () => { + const [count, setCount] = useLocalStorage('counter', 0); + + const increment = () => setCount(prevCount => prevCount + 1); + const decrement = () => setCount(prevCount => prevCount - 1); + const reset = () => setCount(0); + return ( -
-
-

Claude Artifacts React

- + + -

Said Hi {count} times

+ Reset +
); }; -export default App; +export default PersistentCounter;