From 7da292aa485760ec564c58dbe609692152f9123a Mon Sep 17 00:00:00 2001
From: Graeme Ross <graeme.ross@rossathome.co.uk>
Date: Sun, 13 Oct 2024 21:03:27 +0100
Subject: [PATCH] themes setting option

---
 .../ThemeChanger/ThemeChanger.stories.tsx     | 26 +++++++++++++++++
 .../ThemeChanger/ThemeChanger.test.tsx        | 14 +++++++++
 .../components/ThemeChanger/ThemeChanger.tsx  | 29 +++++++++++++++++++
 web/src/layouts/ClientLayout/ClientLayout.tsx |  3 ++
 4 files changed, 72 insertions(+)
 create mode 100644 web/src/components/ThemeChanger/ThemeChanger.stories.tsx
 create mode 100644 web/src/components/ThemeChanger/ThemeChanger.test.tsx
 create mode 100644 web/src/components/ThemeChanger/ThemeChanger.tsx

diff --git a/web/src/components/ThemeChanger/ThemeChanger.stories.tsx b/web/src/components/ThemeChanger/ThemeChanger.stories.tsx
new file mode 100644
index 0000000..c16b988
--- /dev/null
+++ b/web/src/components/ThemeChanger/ThemeChanger.stories.tsx
@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ThemeChanger from './ThemeChanger'
+
+const meta: Meta<typeof ThemeChanger> = {
+  component: ThemeChanger,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ThemeChanger>
+
+export const Primary: Story = {}
diff --git a/web/src/components/ThemeChanger/ThemeChanger.test.tsx b/web/src/components/ThemeChanger/ThemeChanger.test.tsx
new file mode 100644
index 0000000..04fb847
--- /dev/null
+++ b/web/src/components/ThemeChanger/ThemeChanger.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ThemeChanger from './ThemeChanger'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ThemeChanger', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ThemeChanger />)
+    }).not.toThrow()
+  })
+})
diff --git a/web/src/components/ThemeChanger/ThemeChanger.tsx b/web/src/components/ThemeChanger/ThemeChanger.tsx
new file mode 100644
index 0000000..a25c40d
--- /dev/null
+++ b/web/src/components/ThemeChanger/ThemeChanger.tsx
@@ -0,0 +1,29 @@
+const ThemeChanger = () => {
+  return (
+    <details>
+      <summary>Themes</summary>
+      <ul>
+          <li>
+            <label className="label cursor-pointer gap-4">
+              <span className="label-text">Dark</span>
+              <input type="radio" name="theme-radios" className="radio theme-controller" value="dark" />
+            </label>
+          </li>
+          <li>
+            <label className="label cursor-pointer gap-4">
+              <span className="label-text">Light</span>
+              <input type="radio" name="theme-radios" className="radio theme-controller" value="light" />
+            </label>
+          </li>
+          <li>
+            <label className="label cursor-pointer gap-4">
+              <span className="label-text">Cupcake</span>
+              <input type="radio" name="theme-radios" className="radio theme-controller" value="cupcake" />
+            </label>
+          </li>
+      </ul>
+    </details>
+  )
+}
+
+export default ThemeChanger
diff --git a/web/src/layouts/ClientLayout/ClientLayout.tsx b/web/src/layouts/ClientLayout/ClientLayout.tsx
index 9e227cf..66080d2 100644
--- a/web/src/layouts/ClientLayout/ClientLayout.tsx
+++ b/web/src/layouts/ClientLayout/ClientLayout.tsx
@@ -1,4 +1,5 @@
 import { Link, routes } from '@redwoodjs/router'
+import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger'
 
 type ClientLayoutProps = {
   children?: React.ReactNode
@@ -88,6 +89,7 @@ const ClientLayout = ({ children }: ClientLayoutProps) => {
           </a>
         </li>
         <li><a>Settings</a></li>
+        <li><ThemeChanger/></li>
         <li><a>Logout</a></li>
       </ul>
 
@@ -137,6 +139,7 @@ const ClientLayout = ({ children }: ClientLayoutProps) => {
             Providing reliable tech since 1992
           </p>
         </aside>
+
         <nav className="md:place-self-center md:justify-self-end">
           <div className="grid grid-flow-col gap-4">
             <a>