new add window

khan-mujeeb · Dec 21, 2023 · ba7f33e · ba7f33e
1 parent 26d5a78
commit ba7f33e
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 57 deletions.
diff --git a/dist.rar b/dist.rar
diff --git a/link wallet.zip b/link wallet.zip
diff --git a/src/App.css b/src/App.css
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

diff --git a/src/App.jsx b/src/App.jsx
@@ -12,15 +12,39 @@ function App() {
     const [socialList, setSocialList] = React.useState([]);
     const [codingProfileList, setCodingProfileList] = React.useState([]);
 
-    const commbinedState = {socialList, protfolioList, blogList, otherList, codingProfileList}
-    const setCombinedState = {setSocialList, setProtfolioList, setBlogList, setOtherList, setCodingProfileList}
+    const commbinedState = {
+        socialList,
+        protfolioList,
+        blogList,
+        otherList,
+        codingProfileList,
+    };
+    const setCombinedState = {
+        setSocialList,
+        setProtfolioList,
+        setBlogList,
+        setOtherList,
+        setCodingProfileList,
+    };
     return (
-        <div className="flex w-[500px] gap-2 flex-col h-min p-1">
-            <h1 className=" font-bold text-xl text-center rounded-lg p-2 bg-slate-700 text-slate-50">Links Wallet</h1>
-            <ListItem combinedState={commbinedState} setCombinedState={setCombinedState}/>
-            {addWindowBtn? <AddWindow setCombinedState={setCombinedState} setActive={setAddWindowBtn}/> : null}
-            {!addWindowBtn? <AddButton setActive={setAddWindowBtn}/>: null}
+        <div className="flex w-[500px] gap-2 flex-col  p-1 h-[710px] justify-start">
+            <h1 className="font-bold align-top text-xl text-center rounded-lg p-2 bg-slate-700 text-slate-50">
+                Links Wallet
+            </h1>
 
+            {!addWindowBtn ? (
+                <ListItem
+                    combinedState={commbinedState}
+                    setCombinedState={setCombinedState}
+                />
+            ) : (
+                <AddWindow
+                    setCombinedState={setCombinedState}
+                    setActive={setAddWindowBtn}
+                />
+            )}
+
+            {!addWindowBtn ? <AddButton setActive={setAddWindowBtn} /> : null}
         </div>
     );
 }

diff --git a/src/components/AddWindow.jsx b/src/components/AddWindow.jsx
@@ -17,10 +17,6 @@ const AddWindow = ({setCombinedState, setActive}) => {
 
     const handleButtonClick = () => {
 
-        if (name === "" || url === "" || cat === "") {
-            alert("Please fill all the fields");
-            return;
-        }
 
         const link = { name, url, type: cat };
         const existingLinks = JSON.parse(localStorage.getItem(cat) || "[]");
@@ -50,7 +46,8 @@ const AddWindow = ({setCombinedState, setActive}) => {
     };
 
     return (
-        <div className="flex rounded-lg bg-slate-500 p-2">
+        <div className="h-full bg-slate-700 flex flex-col justify-center z-50">
+        <div className="flex rounded-lg bg-slate-500 p-2 ">
             <form action="" className="flex  flex-col gap-1 w-full">
 
 
@@ -98,9 +95,18 @@ const AddWindow = ({setCombinedState, setActive}) => {
                 >
                     Create
                 </button>
+                <button
+                    type="button"
+                    className="bg-red-400 rounded-md p-1 w-full"
+                    onClick={() => setActive(false)}
+                >
+                    Cancel
+                </button>
 
             </form>
         </div>
+
+        </div>
     );
 };
 

diff --git a/src/components/List.jsx b/src/components/List.jsx
@@ -60,7 +60,7 @@ const List = ({ list, title, setCombinedState }) => {
     };
 
     return (
-        <div className="flex flex-col w-full p-3">
+        <div className="flex flex-col w-full p-3 overflow-y-auto h-48">
             <h1 className="p-1 pl-2 bg-orange-200 font-semibold text-lg">{title}</h1>
 
             {list.map((user, index) => (

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -58,7 +58,7 @@ const ListItem = ({ combinedState, setCombinedState }) => {
         <div className="flex gap-2 items-center w-[400px
         ] bg-blue-50 rounded-lg" >
             <div className="flex flex-col w-full p-3">
-                <div className="flex">
+                <div className="flex overflow-y-auto">
 
                     {/* social */}
                     <List list={socialList} setCombinedState={setCombinedState} title="Social" />
@@ -73,7 +73,7 @@ const ListItem = ({ combinedState, setCombinedState }) => {
                     {/* social */}
                     <List list={protfolioList} setCombinedState={setCombinedState} title="Protfolio" />
                 </div>
-                <div className="flex">
+                <div className="flex overflow-y-auto">
                     {/* social */}
                     <List list={otherList} setCombinedState={setCombinedState} title="Other" />
                 </div>