Merge pull request #70 from fiqryq/69-fix-toggle-cant-be-imported

feat: add toggle theme on sample pages #69

pages/index.tsx

@@ -1,10 +1,15 @@
+import ThemeSelector from '@/src/components/themeSelector';
 import type { NextPage } from 'next';
 
 const Home: NextPage = () => {
   return (
     <div className="bg-[#fafafa]">
       <div className="relative mx-auto h-screen w-full max-w-7xl bg-white dark:bg-gray-900">
-        <ul className="absolute top-0 flex w-full flex-row-reverse items-center bg-gray-100/50 p-5 dark:bg-gray-800"></ul>
+        <ul className="absolute top-0 flex w-full flex-row-reverse items-center bg-gray-100/50 p-5 dark:bg-gray-800">
+          <li>
+            <ThemeSelector />
+          </li>
+        </ul>
       </div>
     </div>
   );

src/components/test/index.tsx

@@ -0,0 +1,3 @@
+export default function Test() {
+  return <div>Test</div>;
+}

src/components/ThemeToggle/index.tsx → src/components/themeSelector/index.tsx

@@ -8,8 +8,9 @@ interface Props {
   className?: string;
 }
 
-const ThemeToggle: React.FC<Props> = ({ className, ...props }) => {
+const ThemeSelector: React.FC<Props> = ({ className, ...props }) => {
   const [selectedTheme, setSelectedTheme] = useState<any>();
+
   useEffect(() => {
     if (selectedTheme) {
       document.documentElement.setAttribute('data-theme', selectedTheme.value);
@@ -54,6 +55,7 @@ const ThemeToggle: React.FC<Props> = ({ className, ...props }) => {
         <LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
         <DarkIcon className="hidden h-4 w-4 fill-slate-400 [.dark[data-theme=system]_&]:block" />
       </Listbox.Button>
+
       <Listbox.Options className="absolute top-full left-1/2 mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
         {themes.map(theme => (
           <Listbox.Option
@@ -93,4 +95,4 @@ const ThemeToggle: React.FC<Props> = ({ className, ...props }) => {
   );
 };
 
-export default ThemeToggle;
+export default ThemeSelector;