From da39fa8b18055cdd8ca2094da6fab9946de33de4 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 5 Nov 2024 20:48:13 -0500
Subject: New Folder design

---
 extension/src/FolderButton.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 extension/src/FolderButton.tsx

(limited to 'extension/src/FolderButton.tsx')

diff --git a/extension/src/FolderButton.tsx b/extension/src/FolderButton.tsx
new file mode 100644
index 0000000..b0115de
--- /dev/null
+++ b/extension/src/FolderButton.tsx
@@ -0,0 +1,25 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import FolderBody from "./FolderBody.tsx";
+import folderIcon from "./assets/folder.svg"
+import folderIconOpen from "./assets/folder_open.svg"
+import {useState} from "react";
+
+function FolderButton(props: {data: BookmarkTreeNode}) {
+
+    const [folderOpen, setFolderOpen] = useState(false);
+
+    return(
+        <>
+            <a className={"bookmark draggable"} onClick={() => setFolderOpen(!folderOpen)}>
+                <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/>
+                <span>{props.data.title}</span>
+            </a>
+            { folderOpen
+                && props.data.children
+                && props.data.children.length > 1
+                && (<FolderBody data={props.data}/>)}
+        </>
+);
+}
+
+export default FolderButton
\ No newline at end of file
-- 
cgit v1.2.3