feat(ui, config): add breadcrumbs component and update exports, enhance theme-switcher functionality with improved state management and accessibility features

Author: tyronejosee

src/components/ui/breadcrumbs.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Breadcrumbs as HeroBreadcrumbs, BreadcrumbItem } from "@heroui/react";
+
+export default function Breadcrumbs() {
+  return (
+    <HeroBreadcrumbs
+      itemClasses={{
+        separator: "px-2",
+      }}
+      separator="/"
+    >
+      <BreadcrumbItem>Home</BreadcrumbItem>
+      <BreadcrumbItem>Resources</BreadcrumbItem>
+      <BreadcrumbItem>Slug Details</BreadcrumbItem>
+    </HeroBreadcrumbs>
+  );
+}

src/components/ui/index.ts

@@ -1,2 +1,3 @@
 export { default as BackToTop } from "./back-to-top";
+export { default as Breadcrumbs } from "./breadcrumbs";
 export { default as ThemeSwitcher } from "./theme-switcher";

src/components/ui/theme-switcher.tsx

@@ -1,8 +1,7 @@
 "use client";
-
 import { useEffect, useState } from "react";
+import { Skeleton, useSwitch, VisuallyHidden } from "@heroui/react";
 import { useTheme } from "next-themes";
-import { Skeleton, Switch } from "@heroui/react";
 import { MoonIcon, SunIcon } from "lucide-react";
 
 function ThemeSwitcherSkeleton() {
@@ -12,36 +11,49 @@ function ThemeSwitcherSkeleton() {
 export default function ThemeSwitcher() {
   const { setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState<boolean>(false);
-  const [isSelected, setIsSelected] = useState<boolean>(false);
+  const [selected, setSelected] = useState<boolean>(false);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
   useEffect(() => {
     if (mounted) {
-      setIsSelected(resolvedTheme === "dark");
+      setSelected(resolvedTheme === "dark");
     }
   }, [resolvedTheme, mounted]);
 
-  if (!mounted) return <ThemeSwitcherSkeleton />;
+  const { Component, slots, getBaseProps, getInputProps, getWrapperProps } =
+    useSwitch({
+      isSelected: selected,
+      onChange: () => {
+        const newTheme = selected ? "light" : "dark";
+        setTheme(newTheme);
+        setSelected(!selected);
+      },
+    });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTheme = e.target.checked ? "dark" : "light";
-    setTheme(newTheme);
-  };
+  if (!mounted) return <ThemeSwitcherSkeleton />;
 
   return (
-    <Switch
-      size="sm"
-      color="primary"
-      isSelected={isSelected}
-      onChange={handleChange}
-      startContent={<SunIcon />}
-      endContent={<MoonIcon />}
-      classNames={{
-        wrapper: "group-data-[selected=true]:bg-red-500",
-      }}
-    />
+    <Component {...getBaseProps()}>
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <div
+        {...getWrapperProps()}
+        className={slots.wrapper({
+          class: [
+            "w-8 h-8",
+            "flex items-center justify-center",
+            "bg-white group-data-[selected=true]:bg-neutral-950",
+            "rounded-lg border-2 border-neutral-200 dark:border-neutral-800",
+            "transition-colors duration-200 ease-in-out",
+          ],
+        })}
+      >
+        {selected ? <SunIcon size={16} /> : <MoonIcon size={16} />}
+      </div>
+    </Component>
   );
 }

src/config/constants.tsx

@@ -69,3 +69,40 @@ export const FOOTER_LINKS = [
   { name: "Authors", href: "/authors" },
   { name: "Blog", href: "/blog" },
 ];
+
+export const SECTIONS = [
+  {
+    key: "4fbcd2fc-14cd-4048-83c5-c683ccd8c212",
+    title: "Explore",
+    items: [
+      { title: "Resources", path: "/resources" },
+      { title: "Authors", path: "/authors" },
+    ],
+  },
+  {
+    key: "4fbcd2fc-14cd-4048-83c5-c683ccd8c216",
+    title: "Languages",
+    items: [
+      { title: "Python", path: "/languages/python" },
+      { title: "JavaScript", path: "/languages/javascript" },
+      { title: "TypeScript", path: "/languages/typescript" },
+      { title: "Ruby", path: "/languages/ruby" },
+    ],
+  },
+  {
+    key: "b0f0c9a0-a4c0-4a5f-b3a8-e0a2f5a1c2b1",
+    title: "Frameworks & Libraries",
+    items: [
+      { title: "Django", path: "/frameworks-libraries/django" },
+      { title: "Flask", path: "/frameworks-libraries/flask" },
+      { title: "FastAPI", path: "/frameworks-libraries/fastapi" },
+      { title: "Express", path: "/frameworks-libraries/express" },
+    ],
+  },
+];
+
+export const SORT_OPTIONS = [
+  { key: "latest", label: "Recent" },
+  { key: "popular", label: "Popular" },
+  { key: "top", label: "Most popular" },
+];