Merge pull request #12 from fac30/Jason-Warren/Mood-Data

Jason warren/mood data

src/app/moods/components/Cube.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { useContext } from 'react'
+import { NeurochemContext } from '../page'
+
+export function Cube() {
+  const context = useContext(NeurochemContext)
+
+  if (!context) {
+    throw new Error('Cube must be used within a NeurochemContext Provider')
+  }
+
+  const { neuroState } = context
+
+  return (
+    <div className="p-4 border rounded">
+      <h3 className="text-white">Coordinates:</h3>
+      <p className="text-white">x (dopamine): {neuroState.dopamine}</p>
+      <p className="text-white">y (serotonin): {neuroState.serotonin}</p>
+      <p className="text-white">z (adrenaline): {neuroState.adrenaline}</p>
+    </div>
+  )
+} 

src/app/moods/components/Slider.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useContext } from 'react'
+import { NeurochemContext } from '../page'
+
+interface SliderProps {
+  chem: 'dopamine' | 'serotonin' | 'adrenaline'
+}
+
+export function Slider({ chem }: SliderProps) {
+  const context = useContext(NeurochemContext)
+
+  if (!context) {
+    throw new Error('Slider must be used within a NeurochemContext Provider')
+  }
+
+  const { neuroState, setNeuroState } = context
+
+  const handleChange = (value: number) => {
+    setNeuroState((prev) => ({
+      ...prev,
+      [chem]: value
+    }))
+  }
+
+  return (
+    <div>
+      <label className="text-white">{chem}</label>
+      <input 
+        type="range"
+        min="0"
+        max="10"
+        value={neuroState[chem]}
+        onChange={(e) => handleChange(parseInt(e.target.value))}
+      />
+    </div>
+  )
+} 

src/app/moods/components/SliderBox.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { Slider } from './Slider'
+
+export function SliderBox() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Slider chem="dopamine" />
+      <Slider chem="serotonin" />
+      <Slider chem="adrenaline" />
+    </div>
+  )
+} 

src/app/moods/page.tsx

@@ -1,7 +1,35 @@
-export default function Page() {
+'use client'
+
+import { createContext, useState } from 'react'
+import { Cube } from './components/Cube'
+import { SliderBox } from './components/SliderBox'
+
+interface NeurochemState {
+  dopamine: number;
+  serotonin: number;
+  adrenaline: number;
+}
+
+interface NeurochemContextType {
+  neuroState: NeurochemState;
+  setNeuroState: React.Dispatch<React.SetStateAction<NeurochemState>>;
+}
+
+export const NeurochemContext = createContext<NeurochemContextType | null>(null)
+
+export default function MoodsPage() {
+  const [neuroState, setNeuroState] = useState({
+    dopamine: 5,
+    serotonin: 5,
+    adrenaline: 5
+  })
+
   return (
-    <>
-      <h1 className="text-white">this is the moods page</h1>
-    </>
-  );
+    <NeurochemContext.Provider value={{ neuroState, setNeuroState }}>
+      <div className="flex flex-col gap-4">
+        <Cube />
+        <SliderBox />
+      </div>
+    </NeurochemContext.Provider>
+  )
 }