Completed with the settings Page

rebeljelly2147 · Dec 17, 2024 · 2827ec7 · 2827ec7
1 parent 9c148cc
commit 2827ec7
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 5 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -9,12 +9,15 @@ import ProfilePage from './pages/ProfilePage.jsx'
 import { useAuthStore } from './store/useAuthStore.js'
 import { Loader } from 'lucide-react'
 import { Toaster } from 'react-hot-toast'
+import { useThemeStore } from './store/useThemeStore.js'
 
 
 const App = () => {
 
   const {authUser,checkAuth,isCheckingAuth}=useAuthStore();
 
+  const {theme}=useThemeStore();
+
   useEffect(()=>{
     checkAuth();
   },[checkAuth]);
@@ -30,7 +33,7 @@ const App = () => {
   }
 
   return (
-    <div>
+    <div data-theme={theme}>
       <Navbar />
       <Routes>
         <Route path='/' element={authUser?<HomePage />:<Navigate to="/login"/>}/>
@@ -40,7 +43,7 @@ const App = () => {
         <Route path='/profile' element={authUser?<ProfilePage />:<Navigate to="/login"/>}/>
       </Routes>
 
-      <Toaster />
+      <Toaster/>
     </div>
   )
 }

diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.js
@@ -0,0 +1,34 @@
+export const THEMES = [
+    "light",
+    "dark",
+    "cupcake",
+    "bumblebee",
+    "emerald",
+    "corporate",
+    "synthwave",
+    "retro",
+    "cyberpunk",
+    "valentine",
+    "halloween",
+    "garden",
+    "forest",
+    "aqua",
+    "lofi",
+    "pastel",
+    "fantasy",
+    "wireframe",
+    "black",
+    "luxury",
+    "dracula",
+    "cmyk",
+    "autumn",
+    "business",
+    "acid",
+    "lemonade",
+    "night",
+    "coffee",
+    "winter",
+    "dim",
+    "nord",
+    "sunset",
+  ];
diff --git a/frontend/src/pages/SettingsPage.jsx b/frontend/src/pages/SettingsPage.jsx
@@ -1,7 +1,125 @@
-import React from "react";
+import { THEMES } from "../constants";
+import { useThemeStore } from "../store/useThemeStore";
+import { Send } from "lucide-react";
+
+const PREVIEW_MESSAGES = [
+  { id: 1, content: "Hey! How's it going?", isSent: false },
+  {
+    id: 2,
+    content: "I'm doing great! Just working on some new features.",
+    isSent: true,
+  },
+];
 
 const SettingsPage = () => {
-  return <div>SettingsPage</div>;
-};
+  const { theme, setTheme } = useThemeStore();
+
+  return (
+    <div className="h-screen container mx-auto px-4 pt-20 max-w-5xl">
+      <div className="space-y-6">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-lg font-semibold">Theme</h2>
+          <p className="text-sm text-base-content/70">
+            Choose a theme for your chat interface
+          </p>
+        </div>
+
+        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
+          {THEMES.map((t) => (
+            <button
+              key={t}
+              className={`
+                group flex flex-col items-center gap-1.5 p-2 rounded-lg transition-colors
+                ${theme === t ? "bg-base-200" : "hover:bg-base-200/50"}
+              `}
+              onClick={() => setTheme(t)}
+            >
+              <div
+                className="relative h-8 w-full rounded-md overflow-hidden"
+                data-theme={t}
+              >
+                <div className="absolute inset-0 grid grid-cols-4 gap-px p-1">
+                  <div className="rounded bg-primary"></div>
+                  <div className="rounded bg-secondary"></div>
+                  <div className="rounded bg-accent"></div>
+                  <div className="rounded bg-neutral"></div>
+                </div>
+              </div>
+              <span className="text-[11px] font-medium truncate w-full text-center">
+                {t.charAt(0).toUpperCase() + t.slice(1)}
+              </span>
+            </button>
+          ))}
+        </div>
 
+        {/* Preview Section */}
+        <h3 className="text-lg font-semibold mb-3">Preview</h3>
+        <div className="rounded-xl border border-base-300 overflow-hidden bg-base-100 shadow-lg">
+          <div className="p-4 bg-base-200">
+            <div className="max-w-lg mx-auto">
+              {/* Mock Chat UI */}
+              <div className="bg-base-100 rounded-xl shadow-sm overflow-hidden">
+                {/* Chat Header */}
+                <div className="px-4 py-3 border-b border-base-300 bg-base-100">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-content font-medium">
+                      J
+                    </div>
+                    <div>
+                      <h3 className="font-medium text-sm">John Doe</h3>
+                      <p className="text-xs text-base-content/70">Online</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Chat Messages */}
+                <div className="p-4 space-y-4 min-h-[200px] max-h-[200px] overflow-y-auto bg-base-100">
+                  {PREVIEW_MESSAGES.map((message) => (
+                    <div
+                      key={message.id}
+                      className={`flex ${message.isSent ? "justify-end" : "justify-start"}`}
+                    >
+                      <div
+                        className={`
+                          max-w-[80%] rounded-xl p-3 shadow-sm
+                          ${message.isSent ? "bg-primary text-primary-content" : "bg-base-200"}
+                        `}
+                      >
+                        <p className="text-sm">{message.content}</p>
+                        <p
+                          className={`
+                            text-[10px] mt-1.5
+                            ${message.isSent ? "text-primary-content/70" : "text-base-content/70"}
+                          `}
+                        >
+                          12:00 PM
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Chat Input */}
+                <div className="p-4 border-t border-base-300 bg-base-100">
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      className="input input-bordered flex-1 text-sm h-10"
+                      placeholder="Type a message..."
+                      value="This is a preview"
+                      readOnly
+                    />
+                    <button className="btn btn-primary h-10 min-h-0">
+                      <Send size={18} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 export default SettingsPage;
diff --git a/frontend/src/store/useThemeStore.js b/frontend/src/store/useThemeStore.js
@@ -0,0 +1,9 @@
+import {create}  from 'zustand';
+
+export const useThemeStore=create((set)=>({
+    theme:localStorage.getItem('chat-theme')||'coffee',
+    setTheme:(theme)=>{
+        localStorage.setItem('chat-theme',theme);
+        set({theme});
+    }
+}));
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -12,4 +12,40 @@ export default {
   plugins: [
     daisyui
   ],
+  daisyui:{
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+    ],
+  }
 }