added sidebar

2024-08-04 22:47:43 +05:30
parent 12431e0c2b
commit 940fe815c6
14 changed files with 1351 additions and 29 deletions
--- a/src/sidebar/widgetsContainer.js
+++ b/src/sidebar/widgetsContainer.js
@@ -0,0 +1,100 @@
+import { useEffect, useMemo, useState } from "react"
+
+import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons"
+
+import DraggableWidgetCard from "../components/utils/widgetCard"
+
+import ButtonWidget from "../assets/widgets/button.png"
+
+import { filterObjectListStartingWith } from "../utils/filter"
+
+function WidgetsContainer(){
+
+    const widgets = useMemo(() => {
+        return [
+            {
+                name: "TopLevel",
+                img: ButtonWidget,
+                link: "https://github.com"
+            },
+            {
+                name: "Frame",
+                img: ButtonWidget,
+                link: "https://github.com"
+            },
+            {
+                name: "Button",
+                img: ButtonWidget,
+                link: "https://github.com"
+            },
+            {
+                name: "Input",
+                img: ButtonWidget,
+                link: "https://github.com"
+            },
+        ]
+    }, [])
+
+    const [searchValue, setSearchValue] = useState("")
+    const [widgetData, setWidgetData] = useState(widgets)
+ 
+    useEffect(() => {
+
+        setWidgetData(widgets)
+
+    }, [widgets])
+
+    useEffect(() => {
+
+        if (searchValue.length > 0){
+            const searchData = filterObjectListStartingWith(widgets, "name", searchValue)
+            setWidgetData(searchData)
+        }else{
+            setWidgetData(widgets)
+        }
+
+    }, [searchValue])
+
+    function onSearch(event){
+
+        setSearchValue(event.target.value)
+
+    }
+
+    return (
+        <div className="tw-w-full tw-p-2 tw-gap-4 tw-flex tw-flex-col">
+
+            <div className="tw-flex tw-gap-2 input tw-place-items-center">
+                <SearchOutlined />
+                <input type="text" placeholder="Search" className="tw-outline-none tw-w-full tw-border-none" 
+                    id="" onInput={onSearch} value={searchValue}/>
+                <div className="">
+                    {
+                        searchValue.length > 0 && 
+                                    <div className="tw-cursor-pointer tw-text-gray-600" onClick={() => setSearchValue("")}>
+                                        <CloseCircleFilled />
+                                    </div>
+                    }
+                </div>
+            </div>
+            <div className="tw-flex tw-flex-col tw-gap-2 tw-h-full tw-p-1">
+                {
+                    widgetData.map((widget, index) => {
+                        return (    
+                            <DraggableWidgetCard key={widget.name} 
+                                                  name={widget.name}
+                                                  img={widget.img}
+                                                  url={widget.link}
+                                                  />
+                                
+                        )
+                    })
+                }
+            </div>
+        </div>
+    )
+
+}
+
+
+export default WidgetsContainer