implement table styling for seasonal planting guide

calblueprint · Dec 2, 2024 · 4571599 · 4571599
1 parent f261738
commit 4571599
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 112 deletions.
diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
@@ -6,6 +6,7 @@ import FilterDropdownSingle from '@/components/FilterDropdownSingle';
 import { PlantCalendarList } from '@/components/PlantCalendarList';
 import SearchBar from '@/components/SearchBar';
 import COLORS from '@/styles/colors';
+import { Box } from '@/styles/containers';
 import { H1, H3 } from '@/styles/text';
 import { DropdownOption, PlantingTypeEnum, SeasonEnum } from '@/types/schema';
 import { useProfile } from '@/utils/ProfileProvider';
@@ -14,7 +15,6 @@ import {
   HeaderContainer,
   PageContainer,
   PageTitle,
-  PlantListContainer,
   StateOptionsContainer,
 } from './styles';
 
@@ -130,15 +130,15 @@ export default function SeasonalPlantingGuide() {
           />
         </StateOptionsContainer>
       ) : (
-        <PlantListContainer>
+        <Box $pl="16px" $pt="12px">
           <PlantCalendarList
             growingSeasonFilterValue={selectedGrowingSeason}
             harvestSeasonFilterValue={selectedHarvestSeason}
             plantingTypeFilterValue={selectedPlantingType}
             usStateFilterValue={selectedUsState}
             searchTerm={searchTerm}
           />
-        </PlantListContainer>
+        </Box>
       )}
     </PageContainer>
   );

diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts
@@ -4,7 +4,7 @@ export const PageContainer = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  gap: 1rem;
+  /* width: max-content; */
 `;
 
 export const HeaderContainer = styled.div`
@@ -40,9 +40,3 @@ export const PageTitle = styled.div`
   gap: 12px;
   align-items: center;
 `;
-
-export const PlantListContainer = styled.div`
-  width: 100%;
-  overflow-x: auto; // Enable horizontal scrolling
-  /* white-space: nowrap; */
-`;
diff --git a/components/MonthHeader/index.tsx b/components/MonthHeader/index.tsx
@@ -1,28 +1,27 @@
-import {
-  MonthHeaderContainer,
-  MonthsContainer,
-  MonthsText,
-  WhiteSpace,
-} from './styles';
+import { P3 } from '@/styles/text';
+import { MonthsContainer } from './styles';
+
+const months = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
 
 export default function MonthHeader() {
   return (
-    <MonthHeaderContainer>
-      <WhiteSpace />
-      <MonthsContainer>
-        <MonthsText>Jan</MonthsText>
-        <MonthsText>Feb</MonthsText>
-        <MonthsText>Mar</MonthsText>
-        <MonthsText>Apr</MonthsText>
-        <MonthsText>May</MonthsText>
-        <MonthsText>Jun</MonthsText>
-        <MonthsText>Jul</MonthsText>
-        <MonthsText>Aug</MonthsText>
-        <MonthsText>Sep</MonthsText>
-        <MonthsText>Oct</MonthsText>
-        <MonthsText>Nov</MonthsText>
-        <MonthsText>Dec</MonthsText>
-      </MonthsContainer>
-    </MonthHeaderContainer>
+    <MonthsContainer>
+      {months.map((month, index) => (
+        <P3 key={index}>{month}</P3>
+      ))}
+    </MonthsContainer>
   );
 }
diff --git a/components/MonthHeader/styles.ts b/components/MonthHeader/styles.ts
@@ -1,30 +1,9 @@
 import styled from 'styled-components';
 
-export const MonthHeaderContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  gap: 0.75rem;
-`;
-
 export const MonthsContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  gap: 0.75rem;
+  /* gap: 0.75rem; */
   width: 100%;
   justify-items: center;
 `;
-
-export const MonthsText = styled.p`
-  color: #000;
-  font-style: normal;
-  font-size: 0.625rem;
-  font-weight: 400;
-  line-height: normal;
-  text-align: center;
-`;
-
-export const WhiteSpace = styled.div`
-  min-width: 10%;
-  max-width: 10%;
-`;
diff --git a/components/PlantCalendarList/index.tsx b/components/PlantCalendarList/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { getAllPlants } from '@/api/supabase/queries/plants';
+import { P3 } from '@/styles/text';
 import {
   DropdownOption,
   Plant,
@@ -15,7 +16,7 @@ import {
 } from '@/utils/helpers';
 import MonthHeader from '../MonthHeader';
 import PlantCalendarRow from '../PlantCalendarRow';
-import { CalendarRowsContainer } from './styles';
+import * as Styles from './styles';
 
 interface PlantListProps {
   harvestSeasonFilterValue: DropdownOption<SeasonEnum>[];
@@ -63,24 +64,36 @@ export const PlantCalendarList = ({
   ]);
 
   return (
-    <div>
-      <MonthHeader />
-      <CalendarRowsContainer>
+    <Styles.StyledTable>
+      <thead>
+        <tr>
+          <Styles.StickyTd></Styles.StickyTd>
+          <Styles.ScrollableTd>
+            <MonthHeader />
+          </Styles.ScrollableTd>
+        </tr>
+      </thead>
+      <tbody>
         {filteredPlantList.map(plant => (
-          <PlantCalendarRow
-            key={plant.id}
-            plantName={plant.plant_name}
-            harvestStart={plant.harvest_start}
-            harvestEnd={plant.harvest_end}
-            transplantStart={plant.transplant_start}
-            transplantEnd={plant.transplant_end}
-            indoorsStart={plant.indoors_start}
-            indoorsEnd={plant.indoors_end}
-            outdoorsStart={plant.outdoors_start}
-            outdoorsEnd={plant.outdoors_end}
-          />
+          <tr key={plant.id}>
+            <Styles.StickyTd>
+              <P3>{plant.plant_name}</P3>
+            </Styles.StickyTd>
+            <Styles.ScrollableTd>
+              <PlantCalendarRow
+                harvestStart={plant.harvest_start}
+                harvestEnd={plant.harvest_end}
+                transplantStart={plant.transplant_start}
+                transplantEnd={plant.transplant_end}
+                indoorsStart={plant.indoors_start}
+                indoorsEnd={plant.indoors_end}
+                outdoorsStart={plant.outdoors_start}
+                outdoorsEnd={plant.outdoors_end}
+              />
+            </Styles.ScrollableTd>
+          </tr>
         ))}
-      </CalendarRowsContainer>
-    </div>
+      </tbody>
+    </Styles.StyledTable>
   );
 };
diff --git a/components/PlantCalendarList/styles.ts b/components/PlantCalendarList/styles.ts
@@ -1,8 +1,28 @@
 import styled from 'styled-components';
+import { P3 } from '@/styles/text';
 
-export const CalendarRowsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+// Styled Table
+export const StyledTable = styled.table`
   width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+`;
+
+// Make the plant_name sticky
+export const StickyTd = styled(P3).attrs({
+  as: 'td',
+})`
+  // TODO: make this more compact
+  width: auto;
+  position: sticky;
+  left: 0;
+  background-color: white; // Optional: Adds a background color to keep text visible when scrolling
+  z-index: 2; // Ensures the sticky header is on top of other content
+`;
+
+// Scrollable container for PlantCalendarRow
+export const ScrollableTd = styled.td`
+  overflow-x: scroll;
+  padding-bottom: 8px;
+  // maybe replace with 4px above and below to center padding?
 `;
diff --git a/components/PlantCalendarRow/index.tsx b/components/PlantCalendarRow/index.tsx
@@ -1,15 +1,9 @@
 import React, { memo, useMemo } from 'react';
 import COLORS from '@/styles/colors';
 import { fillCalendarGridArrayRowWithColor } from '@/utils/helpers';
-import {
-  CalendarCell,
-  CalendarGrid,
-  PlantCalendarRowContainer,
-  PlantText,
-} from './styles';
+import { CalendarCell, CalendarGrid } from './styles';
 
 interface PlantCalendarRowProps {
-  plantName?: string;
   harvestStart: string;
   harvestEnd: string;
   transplantStart: string;
@@ -21,7 +15,6 @@ interface PlantCalendarRowProps {
 }
 
 const PlantCalendarRow = memo(function PlantCalendarRow({
-  plantName,
   harvestStart,
   harvestEnd,
   transplantStart,
@@ -80,14 +73,11 @@ const PlantCalendarRow = memo(function PlantCalendarRow({
   ]);
 
   return (
-    <PlantCalendarRowContainer>
-      <PlantText>{plantName}</PlantText>
-      <CalendarGrid>
-        {CalendarGridArray.map((color, index) => (
-          <CalendarCell key={index} $color={color} />
-        ))}
-      </CalendarGrid>
-    </PlantCalendarRowContainer>
+    <CalendarGrid>
+      {CalendarGridArray.map((color, index) => (
+        <CalendarCell key={index} $color={color} />
+      ))}
+    </CalendarGrid>
   );
 });
 

diff --git a/components/PlantCalendarRow/styles.ts b/components/PlantCalendarRow/styles.ts
@@ -1,27 +1,9 @@
 import styled from 'styled-components';
-import { P3 } from '@/styles/text';
-
-export const PlantCalendarRowContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: 30px;
-  flex-direction: row;
-  gap: 8px;
-`;
-
-export const PlantText = styled(P3)`
-  max-width: 10%;
-  min-width: 10%;
-  word-wrap: break-word;
-  align-self: center;
-  /* position: sticky;
-  left: 0; 
-  z-index: 1; */
-`;
 
 export const CalendarGrid = styled.div`
   display: grid;
   min-width: 272px;
+  height: 30px;
   width: 100%;
   grid-template-columns: repeat(24, 1fr);
   grid-template-rows: repeat(4, 1fr);