Browse Source

🔧 Refactor SwitchDarkMode2 component

🌟 Improved code structure and readability
🚀 Ready for better dark mode handling
🛠️ Simplified styles and class names
📦 Updated component for theme mode
main
John Doe 1 year ago
parent
commit
a7a64e0795
  1. 28
      src/shared/SwitchDarkMode.tsx

28
src/shared/SwitchDarkMode.tsx

@ -0,0 +1,28 @@
"use client";
import React from "react";
import { MoonIcon } from "@heroicons/react/24/solid";
import { SunIcon } from "@heroicons/react/24/outline";
import { useThemeMode } from "@/utils/useThemeMode";
export interface SwitchDarkModeProps {
className?: string;
}
const SwitchDarkMode: React.FC<SwitchDarkModeProps> = ({ className = "" }) => {
const { _toogleDarkMode, isDarkMode, toDark, toLight } = useThemeMode();
return (
<button
onClick={_toogleDarkMode}
className={`self-center text-2xl md:text-3xl w-12 h-12 rounded-full text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none flex items-center justify-center ${className}`}
>
<span className="sr-only">Enable dark mode</span>
{isDarkMode ? (
<MoonIcon className="w-7 h-7" aria-hidden="true" />
) : (
<SunIcon className="w-7 h-7" aria-hidden="true" />
)}
</button>
);
};
export default SwitchDarkMode;
Loading…
Cancel
Save