From 364e82c7f2f10759b437c0282021d5dfef98c922 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 10 Mar 2024 20:27:59 +0000
Subject: feature: Change top nav to include search and move add link to a
 modal

---
 .../web/components/dashboard/bookmarks/TopNav.tsx  | 43 ++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/web/components/dashboard/bookmarks/TopNav.tsx

(limited to 'packages/web/components/dashboard/bookmarks/TopNav.tsx')

diff --git a/packages/web/components/dashboard/bookmarks/TopNav.tsx b/packages/web/components/dashboard/bookmarks/TopNav.tsx
new file mode 100644
index 00000000..6c0f18e5
--- /dev/null
+++ b/packages/web/components/dashboard/bookmarks/TopNav.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Link, NotebookPen } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
+import { useState } from "react";
+import { AddLinkButton } from "./AddLinkButton";
+import { SearchInput } from "../search/SearchInput";
+
+function AddText() {
+  const [isEditorOpen, setEditorOpen] = useState(false);
+
+  return (
+    <div className="flex">
+      <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} />
+      <Button className="m-auto" onClick={() => setEditorOpen(true)}>
+        <NotebookPen />
+      </Button>
+    </div>
+  );
+}
+
+function AddLink() {
+  return (
+    <div className="flex">
+      <AddLinkButton>
+        <Button className="m-auto">
+          <Link />
+        </Button>
+      </AddLinkButton>
+    </div>
+  );
+}
+
+export default function TopNav() {
+  return (
+    <div className="container flex gap-2 py-4">
+      <SearchInput />
+      <AddLink />
+      <AddText />
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2