From 76c0756b6b440ed7244b54bd4fd7913b09c0b073 Mon Sep 17 00:00:00 2001 From: Dallas Richmond Date: Wed, 11 Dec 2024 14:17:12 -0800 Subject: [PATCH] Reusable Card component implemented in both views --- frontend/src/components/common/Card/Card.tsx | 31 +++++++++++++++++++ .../src/components/common/Card/card.styles.ts | 30 ++++++++++++++++++ frontend/src/components/common/index.ts | 3 +- .../views/FarmInformation/FarmInformation.tsx | 9 ++++-- .../FarmInformation/farmInformation.styles.ts | 11 ------- .../src/views/LandingPage/LandingPage.tsx | 10 ++++-- .../views/LandingPage/landingPage.styles.ts | 14 ++------- 7 files changed, 78 insertions(+), 30 deletions(-) create mode 100644 frontend/src/components/common/Card/Card.tsx create mode 100644 frontend/src/components/common/Card/card.styles.ts diff --git a/frontend/src/components/common/Card/Card.tsx b/frontend/src/components/common/Card/Card.tsx new file mode 100644 index 0000000..d03515c --- /dev/null +++ b/frontend/src/components/common/Card/Card.tsx @@ -0,0 +1,31 @@ +/** + * @summary A reusable Card component + */ +import React from 'react'; +import { CardWrapper } from './card.styles'; + +interface CardProps { + children: React.ReactNode; + width?: string; + height?: string; + justifyContent?: string; +} + +function Card({ + children, + width = '500px', + height = '500px', + justifyContent = 'center', +}: CardProps) { + return ( + + {children} + + ); +} + +export default Card; diff --git a/frontend/src/components/common/Card/card.styles.ts b/frontend/src/components/common/Card/card.styles.ts new file mode 100644 index 0000000..4fa0ab9 --- /dev/null +++ b/frontend/src/components/common/Card/card.styles.ts @@ -0,0 +1,30 @@ +/** + * @summary Styling for Card component + */ +import styled from '@emotion/styled'; + +type CardWrapperProps = { + width: string; + height: string; + justifyContent?: string; +}; + +export const CardWrapper = styled.div` + background-color: rgba(255, 255, 255, 0.8); + height: ${(props) => props.height}; + width: ${(props) => props.width}; + padding-top: 0; + justify-content: flex-start; + align-items: center; + display: flex; + flex-direction: column; + object-fit: scale-down; + border-radius: 8px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + padding: 20px; + text-align: center; + position: relative; + justify-content: ${(props) => props.justifyContent}; +`; + +export default CardWrapper; diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts index 59ab5cc..a1aa5b0 100644 --- a/frontend/src/components/common/index.ts +++ b/frontend/src/components/common/index.ts @@ -5,5 +5,6 @@ import InputField from './InputField/InputField'; import RadioButton from './RadioButton/RadioButton'; import Checkbox from './Checkbox/Checkbox'; import Dropdown from './DropDown/DropDown'; +import Card from './Card/Card'; -export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown }; +export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown, Card }; diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx index 82527ae..2c3c260 100644 --- a/frontend/src/views/FarmInformation/FarmInformation.tsx +++ b/frontend/src/views/FarmInformation/FarmInformation.tsx @@ -5,7 +5,6 @@ import React, { useState, useEffect } from 'react'; import { localStorageKeyExists } from '../../utils/AppLocalStorage'; import constants from '../../constants/Constants'; import { - Card, CardHeader, Banner, Heading, @@ -13,7 +12,7 @@ import { SelectorContainer, RegionContainer, } from './farmInformation.styles'; -import { InputField, RadioButton, Checkbox, Dropdown } from '../../components/common'; +import { InputField, RadioButton, Checkbox, Dropdown, Card } from '../../components/common'; export default function FarmInformation() { const [formData, setFormData] = useState({ @@ -60,7 +59,11 @@ export default function FarmInformation() { ]; return ( - + Farm Information diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts index bbeb3cd..cf7ffb7 100644 --- a/frontend/src/views/FarmInformation/farmInformation.styles.ts +++ b/frontend/src/views/FarmInformation/farmInformation.styles.ts @@ -4,17 +4,6 @@ import styled from '@emotion/styled'; import screenSizes from '../../constants/screenSizes'; -export const ViewContainer = styled.div` - position: absolute; - top: 0; - left: 0; - display: flex; - height: 100svh; - justify-content: center; - width: 100%; - align-items: center; -`; - export const Card = styled.div` background-color: rgba(255, 255, 255, 0.8); height: 500px; diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx index b069fb4..87d57f4 100644 --- a/frontend/src/views/LandingPage/LandingPage.tsx +++ b/frontend/src/views/LandingPage/LandingPage.tsx @@ -5,8 +5,8 @@ import { useNavigate } from 'react-router-dom'; import constants from '../../constants/Constants'; import useAppService from '../../services/app/useAppService'; import { deleteLocalStorageKey } from '../../utils/AppLocalStorage'; -import { ButtonWrapper, StyledDivider, StyledContent, Card } from './landingPage.styles'; -import { Button } from '../../components/common'; +import { ButtonWrapper, StyledDivider, StyledContent } from './landingPage.styles'; +import { Button, Card } from '../../components/common'; export default function LandingPage() { const { setNMPFile } = useAppService(); @@ -42,7 +42,11 @@ export default function LandingPage() { }; return ( - +

Nutrient Management Calculator

diff --git a/frontend/src/views/LandingPage/landingPage.styles.ts b/frontend/src/views/LandingPage/landingPage.styles.ts index 569fa94..233c182 100644 --- a/frontend/src/views/LandingPage/landingPage.styles.ts +++ b/frontend/src/views/LandingPage/landingPage.styles.ts @@ -1,21 +1,10 @@ /** - * Styling for LandingPage view + * @summary Styling for LandingPage view */ import styled from '@emotion/styled'; import * as tokens from '@bcgov/design-tokens/js'; import screenSizes from '../../constants/screenSizes'; -export const ViewContainer = styled.div` - position: absolute; - top: 0; - left: 0; - display: flex; - height: 100svh; - justify-content: center; - width: 100%; - align-items: center; -`; - export const Card = styled.div` background-color: rgba(255, 255, 255, 0.8); height: 500px; @@ -30,6 +19,7 @@ export const Card = styled.div` box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; + position: relative; `; export const ButtonWrapper = styled.div`