Create Bar component

src/app/types.ts

@@ -1,2 +1,18 @@
 export type MoodValue = -2 | -1 | 0 | 1 | 2;
 export type SleepValue = 1 | 3.5 | 5.5 | 7.5 | 9;
+
+export const MOOD = {
+  [-2]: "Very Sad",
+  [-1]: "Sad",
+  0: "Neutral",
+  1: "Happy",
+  2: "Very Happy",
+};
+
+export const COLOR = {
+  [-2]: "bg-red-300",
+  [-1]: "bg-indigo-200",
+  0: "bg-blue-300",
+  1: "bg-green-300",
+  2: "bg-amber-300",
+};

src/components/AverageMood/AverageMood.tsx

@@ -1,24 +1,8 @@
 import { twMerge } from "tailwind-merge";
 import PrevCheckins from "../PrevCheckins/PrevCheckins";
-import { MoodValue } from "@/app/types";
+import { MoodValue, MOOD, COLOR } from "@/app/types";
 import MoodIcon from "../MoodIcon/MoodIcon";
 
-const MOOD = {
-  [-2]: "Very Sad",
-  [-1]: "Sad",
-  0: "Neutral",
-  1: "Happy",
-  2: "Very Happy",
-};
-
-const COLOR = {
-  [-2]: "bg-red-300",
-  [-1]: "bg-indigo-200",
-  0: "bg-blue-300",
-  1: "bg-green-300",
-  2: "bg-amber-300",
-};
-
 interface AverageMoodProps extends React.BaseHTMLAttributes<HTMLDivElement> {
   className?: string;
   current?: MoodValue;

src/components/MoodBar/MoodBar.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import MoodBar from "./MoodBar";
+
+const meta = {
+  title: "Dashboard/MoodBar",
+  component: MoodBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mood: {
+      control: { type: "select" },
+      options: [-2, -1, 0, 1, 2],
+    },
+    sleep: {
+      control: { type: "select" },
+      options: [1, 3.5, 5.5, 7.5, 9]
+    },
+  },
+  args: {},
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', alignItems: 'flex-end', width: '400px', height: '300px', padding: '1rem', backgroundColor: 'white' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+
+} satisfies Meta<typeof MoodBar>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    mood: 2,
+    sleep: 5.5,
+  },
+};
+
+export default meta;

src/components/MoodBar/MoodBar.tsx

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+import { MoodValue, SleepValue, COLOR } from "@/app/types";
+import MoodIcon from "@/components/MoodIcon/MoodIcon";
+
+interface MoodBarProps {
+  mood: MoodValue;
+  sleep: SleepValue;
+  className?: string;
+}
+
+
+const moodBarVariants = cva(
+  "rounded-full p-1",
+  {
+    variants: {
+        sleep: {
+            1: 'h-1/5',
+            3.5: 'h-2/5',
+            5.5: 'h-3/5',
+            7.5: 'h-4/5',
+            9: 'h-5/5',
+            undefined: ''
+      },
+    },
+  }
+);
+
+export default function MoodBar({ mood, sleep, className }: MoodBarProps) {
+
+
+
+  return <div className={twMerge(moodBarVariants({sleep}), COLOR[mood], className)}>{mood && <MoodIcon className="inline-block" mood={mood} />}</div>;
+
+}