From e68bdbabf32c97dad5078fd1b256a87ee1659a51 Mon Sep 17 00:00:00 2001
From: ss58-registry <ss58-registry@v2ex.io>
Date: Sat, 6 Jul 2024 21:47:55 +0800
Subject: [PATCH] Update ArtifactCode.jsx

write a counter component in react that persists its state to localStorage

on page load, it should check the localStorage first
---
 src/ArtifactCode.jsx | 67 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 51 insertions(+), 16 deletions(-)

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 (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold mb-6">Claude Artifacts React</h1>
-        <Button
-          onClick={handleClick}
-          className="mb-4"
+    <div className="flex flex-col items-center space-y-4">
+      <h2 className="text-2xl font-bold">Persistent Counter</h2>
+      <p className="text-xl">Count: {count}</p>
+      <div className="flex space-x-2">
+        <button 
+          onClick={decrement}
+          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+        >
+          Decrement
+        </button>
+        <button 
+          onClick={increment}
+          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+        >
+          Increment
+        </button>
+        <button 
+          onClick={reset}
+          className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
         >
-          Say Hi
-        </Button>
-        <p className="text-lg">Said Hi {count} times</p>
+          Reset
+        </button>
       </div>
     </div>
   );
 };
 
-export default App;
+export default PersistentCounter;