From 03b7ccaa5c152c8d7ed73374be8ad4d4d034845b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Thu, 7 Nov 2024 12:40:42 -0500
Subject: Implement sorting and refactor

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

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

diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx
new file mode 100644
index 0000000..2d7cc9e
--- /dev/null
+++ b/extension/src/components/FolderButton.tsx
@@ -0,0 +1,30 @@
+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";
+
+/**
+ * A component for the button used to open a bookmark folder.
+ * This is themed the same as a bookmark
+ *
+ * @param props.data The BookmarkTreeNode containing the data of the folder
+ */
+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 > 0
+                && (<FolderBody data={props.data}/>)}
+        </>
+);
+}
+
+export default FolderButton
\ No newline at end of file
-- 
cgit v1.2.3