style plant calendar row for PlantPages

app/plant-page/all-plants/[plantId]/page.tsx

@@ -98,6 +98,7 @@ export default function GeneralPlantPage() {
               indoorsEnd={currentPlant.indoors_end}
               outdoorsStart={currentPlant.outdoors_start}
               outdoorsEnd={currentPlant.outdoors_end}
+              singleDisplay
             />
           </Flex>
         </ComponentWrapper>

app/plant-page/my-garden/[userPlantId]/page.tsx

@@ -115,6 +115,7 @@ export default function UserPlantPage() {
               indoorsEnd={currentPlant.indoors_end}
               outdoorsStart={currentPlant.outdoors_start}
               outdoorsEnd={currentPlant.outdoors_end}
+              singleDisplay
             />
           </Flex>
         </ComponentWrapper>

components/PlantCalendarRow/index.tsx

@@ -1,6 +1,9 @@
 import React, { memo, useMemo } from 'react';
 import COLORS from '@/styles/colors';
+import { Flex } from '@/styles/containers';
 import { fillCalendarGridArrayRowWithColor } from '@/utils/helpers';
+import MonthHeader from '../MonthHeader';
+import SeasonColorKey from '../SeasonColorKey';
 import { CalendarCell, CalendarGrid } from './styles';
 
 interface PlantCalendarRowProps {
@@ -12,6 +15,7 @@ interface PlantCalendarRowProps {
   indoorsEnd: string;
   outdoorsStart: string;
   outdoorsEnd: string;
+  singleDisplay?: boolean;
 }
 
 const PlantCalendarRow = memo(function PlantCalendarRow({
@@ -23,6 +27,7 @@ const PlantCalendarRow = memo(function PlantCalendarRow({
   indoorsEnd,
   outdoorsStart,
   outdoorsEnd,
+  singleDisplay = false,
 }: PlantCalendarRowProps) {
   // translate all the starts and ends to corresponding colours in an array
   const CalendarGridArray: string[] = useMemo(() => {
@@ -73,11 +78,21 @@ const PlantCalendarRow = memo(function PlantCalendarRow({
   ]);
 
   return (
-    <CalendarGrid>
-      {CalendarGridArray.map((color, index) => (
-        <CalendarCell key={index} $color={color} />
-      ))}
-    </CalendarGrid>
+    <>
+      {singleDisplay && (
+        <>
+          <Flex $justify="center">
+            <SeasonColorKey />
+          </Flex>
+          <MonthHeader />
+        </>
+      )}
+      <CalendarGrid>
+        {CalendarGridArray.map((color, index) => (
+          <CalendarCell key={index} $color={color} />
+        ))}
+      </CalendarGrid>
+    </>
   );
 });
 

components/SeasonColorKey/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import COLORS from '@/styles/colors';
+import { P3 } from '@/styles/text';
+import {
+  ColorCell,
+  ColorKeyItemContainer,
+  SeasonColorKeyContainer,
+} from './styles';
+
+function ColorKeyItem({ label, color }: { label: string; color: string }) {
+  return (
+    <ColorKeyItemContainer>
+      <ColorCell $color={color} />
+      <P3>{label}</P3>
+    </ColorKeyItemContainer>
+  );
+}
+
+export default function SeasonColorKey() {
+  return (
+    <SeasonColorKeyContainer>
+      <ColorKeyItem label="Indoor Season" color={COLORS.indoors} />
+      <ColorKeyItem label="Transplant" color={COLORS.transplant} />
+      <ColorKeyItem label="Outdoor Season" color={COLORS.outdoors} />
+      <ColorKeyItem label="Harvest Season" color={COLORS.harvest} />
+    </SeasonColorKeyContainer>
+  );
+}

components/SeasonColorKey/styles.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const SeasonColorKeyContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  column-gap: 32px;
+  row-gap: 12px;
+  width: max-content;
+  margin-bottom: 12px;
+`;
+
+export const ColorKeyItemContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  min-width: 108px;
+`;
+
+export const ColorCell = styled.div<{ $color: string }>`
+  width: 20px;
+  height: 8px;
+  background-color: ${({ $color }) => $color};
+`;