- Edit src/App.js and save to reload.
-
+
+
+
);
}
diff --git a/src/assets/widgets/button.png b/src/assets/widgets/button.png
new file mode 100644
index 0000000..2d45182
Binary files /dev/null and b/src/assets/widgets/button.png differ
diff --git a/src/canvas/main.js b/src/canvas/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/utils/draggable.js b/src/components/utils/draggable.js
new file mode 100644
index 0000000..237b0af
--- /dev/null
+++ b/src/components/utils/draggable.js
@@ -0,0 +1,22 @@
+import React from "react"
+import {useDraggable} from "@dnd-kit/core"
+
+
+function Draggable(props) {
+ const {attributes, listeners, setNodeRef, transform} = useDraggable({
+ id: 'draggable',
+ })
+ const style = transform ? {
+ transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+ } : undefined
+
+
+ return (
+
+ )
+}
+
+
+export default Draggable
\ No newline at end of file
diff --git a/src/components/utils/widgetCard.js b/src/components/utils/widgetCard.js
new file mode 100644
index 0000000..362d7f1
--- /dev/null
+++ b/src/components/utils/widgetCard.js
@@ -0,0 +1,49 @@
+import { useEffect, useMemo } from "react"
+import Draggable from "./draggable"
+
+import { GithubOutlined, GitlabOutlined, LinkOutlined } from "@ant-design/icons"
+
+
+function DraggableWidgetCard({name, img, url}){
+
+ const urlIcon = useMemo(() => {
+ if (url){
+ const host = new URL(url).hostname.toLowerCase()
+
+ if (host === "github.com"){
+ return
+
+
+
+ );
+
+}
+
+
+export default Sidebar;
\ No newline at end of file
diff --git a/src/sidebar/widgetsContainer.js b/src/sidebar/widgetsContainer.js
new file mode 100644
index 0000000..cea9e9e
--- /dev/null
+++ 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 (
+
+ {
+ sidebarTabs.map((tab, index) => {
+ return (
+
+
+ {
+ openSidebar()
+ setHoverIndex(index)
+ }}
+ onClick={() => {
+ setActiveTab(index)
+ }}
+ >
+
+
+ )
+ })
+ }
+
+ {tab.icon}
+
+ {tab.name}
+
+
+
+
+
+
+
+
+ {(activeTab > -1 || hoverIndex > -1) && tabs[activeTab > -1 ? activeTab : hoverIndex].content}
+
+
+
+
+
+ )
+
+}
+
+
+export default WidgetsContainer
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index ec2585e..1843b03 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,13 +1,25 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+*{
+ box-sizing: border-box !important;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
+
+
+.input{
+ border: 2px solid #e3e5e8;
+ padding: 2px 8px;
+ min-height: 40px;
+ border-radius: 10px;
+ outline: none;
+}
+
+.input:active, .input:focus, .input:focus-within{
+ border-color: #60a5fa;
+}
\ No newline at end of file
diff --git a/src/utils/filter.js b/src/utils/filter.js
new file mode 100644
index 0000000..385600c
--- /dev/null
+++ b/src/utils/filter.js
@@ -0,0 +1,21 @@
+/**
+ * given a list of objects filters out objects starting with specific value for a given key
+ * @param {any[]} list
+ * @param {string} key
+ * @param {string} valueStart
+ * @param {boolean} ignoreCase - default true
+ */
+export function filterObjectListStartingWith(list, key, valueStart, ignoreCase = true) {
+ if (ignoreCase)
+ valueStart = valueStart.toLocaleLowerCase()
+
+ return list.filter(obj => {
+ const value = obj[key]
+
+ if (ignoreCase)
+ return value.toLowerCase().startsWith(valueStart)
+
+ else
+ return value.startsWith(valueStart)
+ })
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index b952fc1..b6ff4d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
theme: {
extend: {
colors: {
+ primaryBg: "#f6f7f8"
}
},
},
+
+
+ {
+ searchValue.length > 0 &&
+
+ setSearchValue("")}>
+
+ }
+
+ {
+ widgetData.map((widget, index) => {
+ return (
+
+