ui: Redesign the settings page and move it to its own layout

1 files changed, 34 insertions, 0 deletions

diff --git a/apps/web/components/settings/sidebar/items.tsx b/apps/web/components/settings/sidebar/items.tsx
new file mode 100644
index 00000000..999825db
--- /dev/null
+++ b/apps/web/components/settings/sidebar/items.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { ArrowLeft, Download, KeyRound, Sparkles, User } from "lucide-react";
+
+export const settingsSidebarItems: {
+  name: string;
+  icon: JSX.Element;
+  path: string;
+}[] = [
+  {
+    name: "Back To App",
+    icon: <ArrowLeft size={18} />,
+    path: "/dashboard/bookmarks",
+  },
+  {
+    name: "User Info",
+    icon: <User size={18} />,
+    path: "/settings/info",
+  },
+  {
+    name: "AI Settings",
+    icon: <Sparkles size={18} />,
+    path: "/settings/ai",
+  },
+  {
+    name: "Import / Export",
+    icon: <Download size={18} />,
+    path: "/settings/import",
+  },
+  {
+    name: "API Keys",
+    icon: <KeyRound size={18} />,
+    path: "/settings/api-keys",
+  },
+];