From d00e21f2c88627a298ce59a8e55e0a947a18dd57 Mon Sep 17 00:00:00 2001
From: malkiAbdoo <abdo.malkiep@gmail.com>
Date: Tue, 9 Jul 2024 23:20:32 +0100
Subject: [PATCH] docs: update the storage hooks demos

---
 packages/hooks/src/useLocalStorage/index.page.jsx    | 4 ++--
 packages/hooks/src/useScrollDirection/index.page.jsx | 2 +-
 packages/hooks/src/useSessionStorage/index.page.jsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/hooks/src/useLocalStorage/index.page.jsx b/packages/hooks/src/useLocalStorage/index.page.jsx
index 220705e..ead567d 100644
--- a/packages/hooks/src/useLocalStorage/index.page.jsx
+++ b/packages/hooks/src/useLocalStorage/index.page.jsx
@@ -14,9 +14,9 @@ export function Example() {
 
   return (
     <div className="demo">
-      <label className="text-center flex flex-col max-w-md gap-4 mx-auto">
+      <label className="text-center text-balance flex flex-col max-w-md gap-4 mx-auto">
         This input will be saved in the local storage.
-        <input type="text" defaultValue={text} onChange={e => setText(e.target.value)} />
+        <input type="text" value={text} onChange={e => setText(e.target.value)} />
       </label>
     </div>
   );
diff --git a/packages/hooks/src/useScrollDirection/index.page.jsx b/packages/hooks/src/useScrollDirection/index.page.jsx
index 8c50830..5b3eb96 100644
--- a/packages/hooks/src/useScrollDirection/index.page.jsx
+++ b/packages/hooks/src/useScrollDirection/index.page.jsx
@@ -20,7 +20,7 @@ export function Navbar() {
         }}
         className="sticky top-0 inset-x-0 transition-all duration-300 bg-primary p-4"
       >
-        <p className="mx-auto w-fit text-slate-50">This will apears scroll up.</p>
+        <p className="mx-auto w-fit text-slate-50">This will apears when you scroll up.</p>
       </div>
       <div className="h-[640px]"></div>
     </div>
diff --git a/packages/hooks/src/useSessionStorage/index.page.jsx b/packages/hooks/src/useSessionStorage/index.page.jsx
index 4271e43..f4afadf 100644
--- a/packages/hooks/src/useSessionStorage/index.page.jsx
+++ b/packages/hooks/src/useSessionStorage/index.page.jsx
@@ -15,9 +15,9 @@ export function Example() {
 
   return (
     <div className="demo">
-      <label className="text-center flex flex-col max-w-md gap-4 mx-auto">
+      <label className="text-center text-balance flex flex-col max-w-md gap-4 mx-auto">
         This input will be saved in the session storage.
-        <input type="text" defaultValue={text} onChange={e => setText(e.target.value)} />
+        <input type="text" value={text} onChange={e => setText(e.target.value)} />
       </label>
     </div>
   );