delete function added

src/App.jsx

@@ -16,7 +16,7 @@ function App() {
     const setCombinedState = {setSocialList, setProtfolioList, setBlogList, setOtherList, setCodingProfileList}
     console.log(addWindowBtn);
     return (
-        <div className="flex w-96 gap-2 flex-col">
+        <div className="flex w-[500px] gap-2 flex-col">
 
             <ListItem combinedState={commbinedState} setCombinedState={setCombinedState}/>
             {addWindowBtn? <AddWindow setCombinedState={setCombinedState}/> : null}

src/components/List.jsx

@@ -1,38 +1,85 @@
 import PropTypes from "prop-types";
 import React from "react";
 
-const List = ({list, title}) => {
+const List = ({ list, title, setCombinedState  }) => {
     const [copy, setCopy] = React.useState("copy");
+    const {
+        setProtfolioList,
+        setSocialList,
+        setBlogList,
+        setOtherList,
+        setCodingProfileList,
+    } = setCombinedState;
+
 
     return (
         <div className="flex flex-col w-full p-3">
+            <h1 className="p-1 pl-2 bg-orange-200">{title}</h1>
 
-                <h1 className="p-1 bg-orange-200">{title}</h1>
+            {list.map((user, index) => (
+                <div className="flex flex-col gap-1" key={index}>
+                    <div className="flex justify-between items-center mt-1">
+                        <h2>{user.name}</h2>
 
-                {list.map((user, index) => (
-                    <div className="flex flex-col gap-1" key={index}>
-                        <div className="flex justify-between items-center">
-                            <h2>{user.name}</h2>
+                        <div className="flex gap-1">
                             <button
+                                className="bg-green-500 p-1 rounded-md"
                                 onClick={() => {
                                     navigator.clipboard.writeText(user.url);
                                     setCopy("copied");
                                 }}
                             >
                                 {copy}
                             </button>
+                            <button
+                                className="bg-red-500 p-1 rounded-md"
+                                onClick={() => {
+                                    const socialData =
+                                        JSON.parse(
+                                            localStorage.getItem(user.type)
+                                        ) || [];
+
+                                    // Filter out the item to remove
+                                    const updatedData = socialData.filter(
+                                        (item) => item.name !== user.name
+                                    );
+
+                                    // Update the local storage with the modified data
+                                    localStorage.setItem(
+                                        user.type,
+                                        JSON.stringify(updatedData)
+                                    );
+
+                                    if(user.type === "social"){
+                                        setSocialList(updatedData);
+                                    }else if(user.type === "portfolio"){
+                                        setProtfolioList(updatedData);
+                                    }
+                                    else if(user.type === "blog"){
+                                        setBlogList(updatedData);
+                                    }
+                                    else if(user.type === "other"){
+                                        setOtherList(updatedData);
+                                    }
+                                    else if(user.type === "coding_profile"){
+                                        setCodingProfileList(updatedData);
+                                    }
+                                }}
+                            >
+                                delete
+                            </button>
                         </div>
                     </div>
-                ))}
-            </div>
+                </div>
+            ))}
+        </div>
     );
-}
-
+};
 
 List.propTypes = {
     list: PropTypes.array.isRequired,
     title: PropTypes.string.isRequired,
+    setCombinedState: PropTypes.object.isRequired,
 };
 
-
 export default List;

src/components/ListItem.jsx

@@ -55,25 +55,27 @@ const ListItem = ({ combinedState, setCombinedState }) => {
     }, []);
 
     return (
-        <div className="flex gap-2 items-center w-96 bg-blue-50">
+        <div className="flex gap-2 items-center w-[400px
+        ] bg-blue-50">
             <div className="flex flex-col w-full p-3">
                 <div className="flex">
+
                     {/* social */}
-                    <List list={socialList} title="Social" />
+                    <List list={socialList} setCombinedState={setCombinedState} title="Social" />
 
                     {/* social */}
-                    <List list={codingProfileList} title="Coding Profile" />
+                    <List list={codingProfileList} setCombinedState={setCombinedState} title="Coding Profile" />
                 </div>
                 <div className="flex">
                     {/* social */}
-                    <List list={blogList} title="Blog" />
+                    <List list={blogList} setCombinedState={setCombinedState} title="Blog" />
 
                     {/* social */}
-                    <List list={protfolioList} title="Protfolio" />
+                    <List list={protfolioList} setCombinedState={setCombinedState} title="Protfolio" />
                 </div>
                 <div className="flex">
                     {/* social */}
-                    <List list={otherList} title="Other" />
+                    <List list={otherList} setCombinedState={setCombinedState} title="Other" />
                 </div>
             </div>
         </div>