From 8f0e9b182e971dff98b18c707d3eb6238abf286e Mon Sep 17 00:00:00 2001
From: Md Saban <45597394+mdsaban@users.noreply.github.com>
Date: Sun, 23 Jun 2024 17:08:34 +0530
Subject: ui(web): move layout selector to main screen (#252)

---
 apps/web/components/dashboard/ChangeLayout.tsx | 50 ++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 apps/web/components/dashboard/ChangeLayout.tsx

(limited to 'apps/web/components/dashboard/ChangeLayout.tsx')

diff --git a/apps/web/components/dashboard/ChangeLayout.tsx b/apps/web/components/dashboard/ChangeLayout.tsx
new file mode 100644
index 00000000..59acb6bd
--- /dev/null
+++ b/apps/web/components/dashboard/ChangeLayout.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useBookmarkLayout } from "@/lib/userLocalSettings/bookmarksLayout";
+import { updateBookmarksLayout } from "@/lib/userLocalSettings/userLocalSettings";
+import { Check, LayoutDashboard, LayoutGrid, LayoutList } from "lucide-react";
+
+type LayoutType = "masonry" | "grid" | "list";
+
+const iconMap = {
+  masonry: LayoutDashboard,
+  grid: LayoutGrid,
+  list: LayoutList,
+};
+
+export default function SidebarProfileOptions() {
+  const layout = useBookmarkLayout();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          {React.createElement(iconMap[layout], { size: 18 })}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-fit">
+        {Object.keys(iconMap).map((key) => (
+          <DropdownMenuItem
+            key={key}
+            className="cursor-pointer justify-between"
+            onClick={async () => await updateBookmarksLayout(key as LayoutType)}
+          >
+            <div className="flex items-center gap-2">
+              {React.createElement(iconMap[key as LayoutType], { size: 18 })}
+              <span className="capitalize">{key}</span>
+            </div>
+            {layout == key && <Check className="ml-2 size-4" />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
-- 
cgit v1.2.3-70-g09d2