Merge pull request #6 from arayavalencia96/feature/MEMO-6-change-theme

feature/MEMO-6-change-theme

next.config.mjs

@@ -1,23 +1,16 @@
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
 await import("./src/env.mjs");
 
 /** @type {import("next").NextConfig} */
+
 const config = {
   reactStrictMode: true,
-
-  /**
-   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
-   * out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
   i18n: {
     locales: ["en"],
     defaultLocale: "en",
   },
+  images: {
+    domains: ["lh3.googleusercontent.com", "avatars.githubusercontent.com"],
+  },
 };
 
 export default config;

package.json

@@ -26,6 +26,7 @@
     "@trpc/server": "^10.26.0",
     "@uiw/react-codemirror": "^4.21.7",
     "codemirror": "^6.0.1",
+    "js-cookie": "^3.0.5",
     "next": "^13.4.2",
     "next-auth": "^4.22.1",
     "react": "18.2.0",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "@types/eslint": "^8.37.0",
+    "@types/js-cookie": "^3.0.3",
     "@types/node": "^18.16.0",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.2.6",

src/components/Content.tsx

@@ -9,7 +9,7 @@ export const Content: React.FC = () => {
     return (
       <div className="min-h col-span-3 flex w-full flex-col items-center justify-center md:w-3/4">
         <FaInfoCircle className="mb-2 text-6xl" />
-        <p className="text-xl font-medium">Seleccionar un tema</p>
+        <p className="text-xl font-medium">Seleccionar tópico</p>
       </div>
     );
   };

src/components/Header.tsx

@@ -1,6 +1,7 @@
-/* eslint-disable @next/next/no-img-element */
 import { signIn, signOut, useSession } from "next-auth/react";
 import Link from "next/link";
+import SelectTheme from "./SelectTheme";
+import Image from "next/image";
 
 export default function Header() {
   const { data: sessionData } = useSession();
@@ -13,39 +14,53 @@ export default function Header() {
           aria-label="HomePage"
           className="flex-0 btn btn-ghost gap-1 px-2 md:gap-2"
         >
-          <img src="/note.svg" alt="icono" width={48} height={48} />
+          <Image src="/note.svg" alt="icono" width={48} height={48} />
           <div className="font-title inline-flex text-lg md:text-2xl">
             <span className="uppercase">M</span>
             <span className="lowercase">emowise</span>
           </div>
         </Link>
       </div>
       <div className="text-1xl flex-1 justify-end pl-5 font-bold">
-        {sessionData?.user?.name ? sessionData.user.name : ""}
-        <div className="flex-none justify-between gap-2">
-          <div className="dropdown dropdown-end">
-            {sessionData?.user ? (
-              <label
-                tabIndex={0}
-                className="avatar btn btn-circle btn-ghost"
-                onClick={() => void signOut()}
-              >
+        <SelectTheme />
+        <div className="dropdown dropdown-end">
+          {sessionData?.user ? (
+            <div>
+              <label tabIndex={0} className="avatar btn btn-circle btn-ghost">
                 <div className="w-10 rounded-full">
-                  <img
+                  <Image
+                    width={48}
+                    height={48}
                     src={sessionData?.user?.image ?? ""}
                     alt={sessionData?.user?.name ?? ""}
                   />
                 </div>
               </label>
-            ) : (
-              <button
-                className="btn-ghost.rounded-btn.btn"
-                onClick={() => void signIn()}
+              <ul
+                tabIndex={0}
+                className="w-30 menu dropdown-content rounded-box menu-sm z-[1] mt-3 bg-base-100 p-2 shadow"
               >
-                Sign In
-              </button>
-            )}
-          </div>
+                <li>
+                  <a className="text-1xl flex-1 justify-center font-bold">
+                    {sessionData?.user?.name ?? ""}
+                  </a>
+                </li>
+                <li
+                  className="text-1xl flex-1 justify-center font-bold"
+                  onClick={() => void signOut()}
+                >
+                  <a>Logout</a>
+                </li>
+              </ul>
+            </div>
+          ) : (
+            <button
+              className="btn-ghost.rounded-btn.btn"
+              onClick={() => void signIn()}
+            >
+              Sign In
+            </button>
+          )}
         </div>
       </div>
     </div>

src/components/SelectTheme.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { getThemeFromCookie, setThemeToCookie } from "../utils/cookie";
+import { FaGlasses } from "react-icons/fa";
+
+const SelectTheme = () => {
+  const [selectedTheme, setSelectedTheme] = useState<string>(
+    getThemeFromCookie()
+  );
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", selectedTheme);
+    setThemeToCookie(selectedTheme);
+  }, [selectedTheme]);
+
+  const handleChangeTheme = (theme: string) => {
+    setSelectedTheme(theme);
+  };
+
+  const toggleDropdown = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  return (
+    <details className={`dropdown mr-3 ${dropdownOpen ? "open" : ""}`}>
+      <summary
+        className="btn"
+        onClick={toggleDropdown}
+        aria-label="Toggle Dropdown"
+      >
+        <FaGlasses />
+      </summary>
+      <ul className="w-30 menu dropdown-content rounded-box right-0 z-[1] bg-base-100 p-2 shadow">
+        <li>
+          <a onClick={() => handleChangeTheme("light")}>Light Theme</a>
+        </li>
+        <li>
+          <a onClick={() => handleChangeTheme("dark")}>Dark Theme</a>
+        </li>
+        <li>
+          <a onClick={() => handleChangeTheme("cupcake")}>Cupcake Theme</a>
+        </li>
+        <li>
+          <a onClick={() => handleChangeTheme("retro")}>Retro Theme</a>
+        </li>
+      </ul>
+    </details>
+  );
+};
+
+export default SelectTheme;

src/components/Sidebar.tsx

@@ -33,10 +33,10 @@ export const Sidebar: React.FC = () => {
   const createTopic = api.topic.create.useMutation({
     onSuccess: () => {
       void refetchTopics();
-      toast.success("Tema Creado");
+      toast.success("Tópico Creado");
     },
     onError: () => {
-      toast.error("No se pudo crear el tema");
+      toast.error("No se pudo crear el tópico");
     },
   });
 
@@ -50,10 +50,10 @@ export const Sidebar: React.FC = () => {
       setSelectedTopic(null);
       setAction("");
       void refetchTopics();
-      toast.success("Tema Actualizado");
+      toast.success("Tópico Actualizado");
     },
     onError: () => {
-      toast.error("No se pudo actualizar el tema");
+      toast.error("No se pudo actualizar el tópico");
     },
   });
 
@@ -85,7 +85,7 @@ export const Sidebar: React.FC = () => {
       <div className="flex items-center justify-between">
         <input
           type="text"
-          placeholder="Nuevo Tema"
+          placeholder="Nuevo Tópico"
           autoFocus
           className="input-borderer border-1 input input-primary input-sm w-full border-solid"
           value={inputValue}

src/components/TopicsList.tsx

@@ -64,9 +64,9 @@ export const TopicsList = () => {
       }
       await deleteTopic.mutateAsync({ id: topicId });
       setSelectedTopicId(null);
-      toast.success("Tema eliminado");
+      toast.success("Tópico eliminado");
     } catch (error) {
-      toast.error("Error al eliminar el tema");
+      toast.error("Error al eliminar el tópico");
     }
   }
 
@@ -85,7 +85,7 @@ export const TopicsList = () => {
   const WithoutTopics = () => {
     return (
       <div className="order mt-2 flex flex-col items-center">
-        <p className="mb-2 text-lg font-medium">Agregar un tema.</p>
+        <p className="mb-2 text-lg font-medium">Agregar tópico.</p>
         <FaRegHandPointUp className="text-3xl md:hidden" />
         <FaRegHandPointDown className="hide text-3xl" />
       </div>

src/server/api/routers/note.ts

@@ -60,7 +60,7 @@ export const noteRouter = createTRPCRouter({
         throw new Error(`No se encontró una nota con el ID: ${id}`);
       }
       if (topicId !== existingNote.topicId) {
-        throw new Error("No puedes cambiar el tema de una nota.");
+        throw new Error("No puedes cambiar el tópico de una nota.");
       }
       const updatedNote = await ctx.prisma.note.update({
         where: {

src/server/api/routers/topic.ts

@@ -41,7 +41,7 @@ export const topicRouter = createTRPCRouter({
         },
       });
       if (!existingTopic) {
-        throw new Error(`No se encontró un tema con el ID: ${id}`);
+        throw new Error(`No se encontró un tópico con el ID: ${id}`);
       }
       const updatedTopic = await ctx.prisma.topic.update({
         where: {

src/utils/cookie.ts

@@ -0,0 +1,9 @@
+import Cookies from "js-cookie";
+
+export const getThemeFromCookie = (): string => {
+  return Cookies.get("theme") || "light";
+};
+
+export const setThemeToCookie = (theme: string): void => {
+  Cookies.set("theme", theme, { expires: 365 });
+};

tailwind.config.ts

@@ -6,4 +6,7 @@ export default {
     extend: {},
   },
   plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark", "cupcake", "retro"],
+  },
 } satisfies Config;