[feat] created PlantPage components (#44)

Co-authored-by: Catherine Tan <[email protected]>
calblueprint · Nov 21, 2024 · c2edc30 · c2edc30
1 parent a3f4ffe
commit c2edc30
Show file tree

Hide file tree

Showing 12 changed files with 527 additions and 0 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,4 +1,7 @@
+'use client';
+
 import React from 'react';
+import styled from 'styled-components';
 
 export const Button = React.forwardRef<
   HTMLButtonElement,
@@ -7,3 +10,31 @@ export const Button = React.forwardRef<
   return <button {...props}>{children}</button>;
 });
 Button.displayName = 'Button';
+
+interface SmallRoundedButtonProps {
+  $primaryColor?: string;
+  $secondaryColor: string;
+}
+
+export const SmallRoundedButton = styled.button<SmallRoundedButtonProps>`
+  padding: 10px 20px;
+  border-radius: 50px;
+  border: 2px solid ${({ $secondaryColor }) => $secondaryColor};
+  background-color: ${({ $primaryColor }) =>
+    $primaryColor ? $primaryColor : 'white'};
+  color: ${({ $primaryColor, $secondaryColor }) =>
+    $primaryColor ? 'white' : $secondaryColor};
+  font-size: 16px;
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+
+  &:hover {
+    background-color: ${({ $primaryColor, $secondaryColor }) =>
+      $primaryColor ? $primaryColor : $secondaryColor};
+    color: ${({ $primaryColor, $secondaryColor }) =>
+      $primaryColor ? $secondaryColor : 'white'};
+    border-color: ${({ $secondaryColor }) => $secondaryColor};
+  }
+`;
diff --git a/components/DifficultyLevelBar/index.tsx b/components/DifficultyLevelBar/index.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { DifficultyLevelEnum } from '@/types/schema';
+import Icon from '../Icon';
+
+export default function DifficultyLevelBar({
+  difficultyLevel,
+}: {
+  difficultyLevel: DifficultyLevelEnum;
+}) {
+  if (difficultyLevel === 'EASY') {
+    return <Icon type="easy_bar" />;
+  } else if (difficultyLevel === 'MODERATE') {
+    return <Icon type="moderate_bar" />;
+  } else {
+    // difficultyLevel === 'HARD'
+    return <Icon type="hard_bar" />;
+  }
+}
diff --git a/components/GardeningTips/index.tsx b/components/GardeningTips/index.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import COLORS from '@/styles/colors';
+import { H3 } from '@/styles/text';
+import Icon from '../Icon';
+import { Container, IconWrapper, TipsList, TitleWrapper } from './style';
+
+export default function GardeningTips({
+  plantName,
+  plantTips,
+}: {
+  plantName: string;
+  plantTips: string;
+}) {
+  const tipsArray = plantTips.split(/\d\.\s/).filter(Boolean);
+
+  return (
+    <Container>
+      <TitleWrapper>
+        <IconWrapper>
+          <Icon type="lightbulb" />
+        </IconWrapper>
+        <H3 $color={COLORS.shrub}>Gardening Tips for {plantName}</H3>
+      </TitleWrapper>
+      <TipsList>
+        {tipsArray.map((tip, index) => (
+          <li key={index}>{tip.trim()}</li>
+        ))}
+      </TipsList>
+    </Container>
+  );
+}
diff --git a/components/GardeningTips/style.ts b/components/GardeningTips/style.ts
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: #f9f9f9;
+  padding: 1.5rem;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: #333;
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+`;
+
+export const IconWrapper = styled.span`
+  margin-right: 6px;
+  color: #8bc34a;
+`;
+
+export const TipsList = styled.ol`
+  margin: 0;
+  padding-left: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  list-style-position: inside;
+`;
diff --git a/components/PlantCareDescription/index.tsx b/components/PlantCareDescription/index.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import Icon from '../Icon';
+import { CareItem, CareText, Container, IconWrapper, Title } from './style';
+
+export default function PlantCareDescription({
+  waterFreq,
+  weedingFreq,
+  sunlightMinHours,
+  sunlightMaxHours,
+}: {
+  waterFreq: string;
+  weedingFreq: string;
+  sunlightMinHours: number;
+  sunlightMaxHours: number;
+}) {
+  return (
+    <Container>
+      <Title>Plant Description</Title>
+      <CareItem>
+        <IconWrapper>
+          <Icon type="watering_can" />
+        </IconWrapper>
+        <CareText>
+          <strong>Water Frequency:</strong> {waterFreq}
+        </CareText>
+      </CareItem>
+      <CareItem>
+        <IconWrapper>
+          <Icon type="watering_can" />
+        </IconWrapper>
+        <CareText>
+          <strong>Weeding Frequency:</strong> {weedingFreq}
+        </CareText>
+      </CareItem>
+      <CareItem>
+        <IconWrapper>
+          <Icon type="sun" />
+        </IconWrapper>
+        <CareText>
+          <strong>Sunlight Requirement:</strong> {sunlightMinHours}-
+          {sunlightMaxHours} hours (Full Sun)
+        </CareText>
+      </CareItem>
+    </Container>
+  );
+}
diff --git a/components/PlantCareDescription/style.ts b/components/PlantCareDescription/style.ts
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  color: #333;
+`;
+
+export const Title = styled.h2`
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+`;
+
+export const CareItem = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+export const IconWrapper = styled.div`
+  margin-right: 6px;
+  color: #8bc34a;
+`;
+
+export const CareText = styled.span`
+  font-size: 1rem;
+`;
diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import COLORS from '@/styles/colors';
+import { H3 } from '@/styles/text';
+import { PlantingTypeEnum } from '@/types/schema';
+import { formatTimestamp, useTitleCase } from '@/utils/helpers';
+import Icon from '../Icon';
+import {
+  Container,
+  DetailRow,
+  DetailsContainer,
+  DetailText,
+  EditButton,
+  Header,
+  StyledIcon,
+} from './style';
+
+export default function YourPlantDetails({
+  datePlanted,
+  plantingType,
+  recentHarvestDate,
+}: {
+  datePlanted: string;
+  plantingType: PlantingTypeEnum;
+  recentHarvestDate: string | null;
+}) {
+  return (
+    <Container>
+      <Header>
+        <H3 $color={COLORS.shrub}>Your Plant Details</H3>
+        <EditButton $secondaryColor={COLORS.shrub}>Edit</EditButton>
+      </Header>
+      <DetailsContainer>
+        <DetailRow>
+          <StyledIcon>
+            <Icon type="calendar" />
+          </StyledIcon>
+          <DetailText>Date Planted: {formatTimestamp(datePlanted)}</DetailText>
+        </DetailRow>
+
+        <DetailRow>
+          <StyledIcon>
+            <Icon type="plant_hand" />
+          </StyledIcon>
+          <DetailText>Planting Type: {useTitleCase(plantingType)}</DetailText>
+        </DetailRow>
+
+        {recentHarvestDate && (
+          <DetailRow>
+            <StyledIcon>
+              <Icon type="plant" />
+            </StyledIcon>
+            <DetailText>
+              Most Recent Harvest Date: {formatTimestamp(recentHarvestDate)}
+            </DetailText>
+          </DetailRow>
+        )}
+      </DetailsContainer>
+    </Container>
+  );
+}
diff --git a/components/YourPlantDetails/style.ts b/components/YourPlantDetails/style.ts
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+import { SmallRoundedButton } from '../Button';
+
+export const Container = styled.div`
+  padding: 16px;
+  background-color: ${COLORS.backgroundGrey};
+  border-radius: 5px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 18px;
+`;
+
+export const EditButton = styled(SmallRoundedButton)`
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+`;
+export const DetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export const DetailRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+export const DetailText = styled.span`
+  color: ${COLORS.black};
+`;
+
+export const StyledIcon = styled.div`
+  color: ${COLORS.shrub};
+  display: flex;
+  align-items: center;
+`;