Restore folder name to original

src/components/navbar/Navbar.tsx

@@ -0,0 +1,47 @@
+import { ThemePicker } from "./ThemePicker";
+
+type Props = {
+  tab: "search" | "settings";
+  setTab: React.Dispatch<React.SetStateAction<"search" | "settings">>;
+};
+
+export function NavBar({ tab, setTab }: Props) {
+  return (
+    <div className="py-6 border-b flex justify-between items-center">
+      <div
+        className="flex gap-2 cursor-pointer items-center"
+        onClick={() => setTab("search")}
+      >
+        <img
+          src="/src/assets/detective.png"
+          alt="moving detective microsft emoji"
+          className="w-12 h-12"
+        />
+        <div>
+          <h1 className="font-bold text-2xl text-primary">
+            B<span className="italic text-secondary-focus font-serif">lam</span>
+            e Detective
+          </h1>
+          <span className="text-sm text-base-content/70 block -mt-1">
+            Empowering Developers to Track and Expose Code Alterations!
+          </span>
+        </div>
+      </div>
+      <div className="tabs tabs-boxed">
+        <a
+          className={`tab ${tab === "search" && "tab-active"}`}
+          onClick={() => setTab("search")}
+        >
+          Search
+        </a>
+        <a
+          className={`tab ${tab === "settings" && "tab-active"}`}
+          onClick={() => setTab("settings")}
+        >
+          Settings
+        </a>
+      </div>
+      <ThemePicker />
+    </div>
+  );
+}

src/components/navbar/ThemePicker.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+
+export function ThemePicker() {
+  const [selectedTheme, setSelectedTheme] = useState("");
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("selectedTheme");
+    if (savedTheme) {
+      setSelectedTheme(savedTheme);
+      document.documentElement.setAttribute("data-theme", savedTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", selectedTheme);
+  }, [selectedTheme]);
+
+  const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const theme = event.target.value;
+    setSelectedTheme(theme);
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("selectedTheme", theme);
+  };
+
+  return (
+    <div className="flex gap-2 items-center">
+      <label htmlFor="themeSelect">Select a theme:</label>
+      <select
+        id="themeSelect"
+        className="input input-bordered"
+        value={selectedTheme}
+        onChange={handleThemeChange}
+      >
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        <option value="cupcake">Cupcake</option>
+        <option value="bumblebee">Bumblebee</option>
+        <option value="emerald">Emerald</option>
+        <option value="corporate">Corporate</option>
+        <option value="synthwave">Synthwave</option>
+        <option value="retro">Retro</option>
+        <option value="cyberpunk">Cyberpunk</option>
+        <option value="valentine">Valentine</option>
+        <option value="halloween">Halloween</option>
+        <option value="garden">Garden</option>
+        <option value="forest">Forest</option>
+        <option value="aqua">Aqua</option>
+        <option value="lofi">Lo-fi</option>
+        <option value="pastel">Pastel</option>
+        <option value="fantasy">Fantasy</option>
+        <option value="wireframe">Wireframe</option>
+        <option value="black">Black</option>
+        <option value="luxury">Luxury</option>
+        <option value="dracula">Dracula</option>
+        <option value="cmyk">CMYK</option>
+        <option value="autumn">Autumn</option>
+        <option value="business">Business</option>
+        <option value="acid">Acid</option>
+        <option value="lemonade">Lemonade</option>
+        <option value="night">Night</option>
+        <option value="coffee">Coffee</option>
+        <option value="winter">Winter</option>
+      </select>
+    </div>
+  );
+}