From e6f658d9ebaff4a72b1a28fc8b394b2c58d03f61 Mon Sep 17 00:00:00 2001
From: fiqryq <fiqrychoerudin48@gmail.com>
Date: Sat, 17 Dec 2022 17:34:23 +0700
Subject: [PATCH 1/4] feat: add toggle theme on sample pages #69

---
 pages/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index c00deca..1f87d6c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,15 @@
+import ThemeToggle from '@/src/components/themeToggle';
 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>
+            <ThemeToggle />
+          </li>
+        </ul>
       </div>
     </div>
   );

From 31c39e8c98596e54a614b16ba53ccbc5a4c9fa69 Mon Sep 17 00:00:00 2001
From: fiqryq <fiqrychoerudin48@gmail.com>
Date: Sat, 17 Dec 2022 17:45:11 +0700
Subject: [PATCH 2/4] fix: toggle export #69

---
 pages/index.tsx                      | 2 +-
 src/components/ThemeToggle/index.tsx | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 1f87d6c..b63e773 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import ThemeToggle from '@/src/components/themeToggle';
+import { ThemeToggle } from '@/src/components/themeToggle';
 import type { NextPage } from 'next';
 
 const Home: NextPage = () => {
diff --git a/src/components/ThemeToggle/index.tsx b/src/components/ThemeToggle/index.tsx
index c4d4d2e..d889bed 100644
--- a/src/components/ThemeToggle/index.tsx
+++ b/src/components/ThemeToggle/index.tsx
@@ -7,9 +7,9 @@ import { themes } from '@/src/constant/theme';
 interface Props {
   className?: string;
 }
-
-const ThemeToggle: React.FC<Props> = ({ className, ...props }) => {
+export const ThemeToggle = ({ className, ...props }: Props) => {
   const [selectedTheme, setSelectedTheme] = useState<any>();
+
   useEffect(() => {
     if (selectedTheme) {
       document.documentElement.setAttribute('data-theme', selectedTheme.value);
@@ -92,5 +92,3 @@ const ThemeToggle: React.FC<Props> = ({ className, ...props }) => {
     </Listbox>
   );
 };
-
-export default ThemeToggle;

From 75fc1db7dd8c9a8f1128f69f178f48743f29baba Mon Sep 17 00:00:00 2001
From: fiqryq <fiqrychoerudin48@gmail.com>
Date: Mon, 19 Dec 2022 17:43:52 +0700
Subject: [PATCH 3/4] test: just test

---
 pages/index.tsx                      | 4 ++--
 src/components/ThemeToggle/index.tsx | 2 ++
 src/components/test/index.tsx        | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 src/components/test/index.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index b63e773..231d1aa 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { ThemeToggle } from '@/src/components/themeToggle';
+import Test from '@/src/components/test';
 import type { NextPage } from 'next';
 
 const Home: NextPage = () => {
@@ -7,7 +7,7 @@ const Home: NextPage = () => {
       <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">
           <li>
-            <ThemeToggle />
+            <Test />
           </li>
         </ul>
       </div>
diff --git a/src/components/ThemeToggle/index.tsx b/src/components/ThemeToggle/index.tsx
index d889bed..3b34fb9 100644
--- a/src/components/ThemeToggle/index.tsx
+++ b/src/components/ThemeToggle/index.tsx
@@ -7,6 +7,7 @@ import { themes } from '@/src/constant/theme';
 interface Props {
   className?: string;
 }
+
 export const ThemeToggle = ({ className, ...props }: Props) => {
   const [selectedTheme, setSelectedTheme] = useState<any>();
 
@@ -54,6 +55,7 @@ export const ThemeToggle = ({ className, ...props }: 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
diff --git a/src/components/test/index.tsx b/src/components/test/index.tsx
new file mode 100644
index 0000000..bc65ca6
--- /dev/null
+++ b/src/components/test/index.tsx
@@ -0,0 +1,3 @@
+export default function Test() {
+  return <div>Test</div>;
+}

From 78c6fff63387224d1d39d525aceac88d0b0dea72 Mon Sep 17 00:00:00 2001
From: fiqryq <fiqrychoerudin48@gmail.com>
Date: Mon, 19 Dec 2022 17:50:13 +0700
Subject: [PATCH 4/4] refactor: theme toggle #69

---
 pages/index.tsx                                         | 4 ++--
 src/components/{ThemeToggle => themeSelector}/index.tsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)
 rename src/components/{ThemeToggle => themeSelector}/index.tsx (97%)

diff --git a/pages/index.tsx b/pages/index.tsx
index 231d1aa..afa6d1b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import Test from '@/src/components/test';
+import ThemeSelector from '@/src/components/themeSelector';
 import type { NextPage } from 'next';
 
 const Home: NextPage = () => {
@@ -7,7 +7,7 @@ const Home: NextPage = () => {
       <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">
           <li>
-            <Test />
+            <ThemeSelector />
           </li>
         </ul>
       </div>
diff --git a/src/components/ThemeToggle/index.tsx b/src/components/themeSelector/index.tsx
similarity index 97%
rename from src/components/ThemeToggle/index.tsx
rename to src/components/themeSelector/index.tsx
index 3b34fb9..27aded0 100644
--- a/src/components/ThemeToggle/index.tsx
+++ b/src/components/themeSelector/index.tsx
@@ -8,7 +8,7 @@ interface Props {
   className?: string;
 }
 
-export const ThemeToggle = ({ className, ...props }: Props) => {
+const ThemeSelector: React.FC<Props> = ({ className, ...props }) => {
   const [selectedTheme, setSelectedTheme] = useState<any>();
 
   useEffect(() => {
@@ -94,3 +94,5 @@ export const ThemeToggle = ({ className, ...props }: Props) => {
     </Listbox>
   );
 };
+
+export default ThemeSelector;