Merge pull request #59 from MargoMarm/addProductForm

added component AddProductForm
MargoMarm · Sep 21, 2023 · 81a8fd8 · 81a8fd8
2 parents 6f1c91c + 2201a56
commit 81a8fd8
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 5 deletions.
diff --git a/src/components/AddProductForm/AddProductForm.jsx b/src/components/AddProductForm/AddProductForm.jsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  AddButton,
+  ButtonContainer,
+  Calories,
+  CloseButton,
+  InputContainer,
+  InputQuantity,
+  InputTitle,
+  TitleCalories,
+} from './AddProductForm.styled';
+
+function AddProductForm({ data, closeModal }) {
+  const [quantity, setQuantity] = useState(0);
+
+  const amount = Math.round((quantity * data.calories) / 100);
+
+  return (
+    <form>
+      <InputContainer>
+        <label>
+          <InputTitle type="text" value={data.title} disabled />
+        </label>
+
+        <label>
+          <InputQuantity
+            placeholder="grams"
+            type="number"
+            value={quantity}
+            onChange={e => setQuantity(e.target.value)}
+          />
+        </label>
+      </InputContainer>
+
+      <Calories>
+        <TitleCalories>Calories:</TitleCalories> {amount}
+      </Calories>
+
+      <ButtonContainer>
+        <AddButton type="button">Add to diary</AddButton>
+        <CloseButton type="button" onClick={closeModal}>
+          Cancel
+        </CloseButton>
+      </ButtonContainer>
+    </form>
+  );
+}
+
+AddProductForm.propTypes = {
+  data: PropTypes.object,
+  closeModal: PropTypes.func,
+};
+
+export default AddProductForm;
diff --git a/src/components/AddProductForm/AddProductForm.styled.jsx b/src/components/AddProductForm/AddProductForm.styled.jsx
@@ -0,0 +1,127 @@
+import styled from '@emotion/styled';
+import { colors, mq } from '../../utils';
+
+export const Container = styled.div`
+  background-color: ${colors.modalBlack};
+  border-radius: 12px;
+  padding: 48px 24px;
+  ${mq.tablet} {
+    padding: 48px 32px;
+  }
+`;
+
+export const InputContainer = styled.div`
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  ${mq.tablet} {
+    flex-direction: row;
+  }
+`;
+
+export const InputTitle = styled.input`
+  width: 287px;
+  height: 34px;
+  padding: 8px 14px;
+  border-radius: 12px;
+  border: 1px solid ${colors.orange};
+  gap: 10px;
+  background-color: inherit;
+  color: ${colors.textWhite03};
+
+  ${mq.tablet} {
+    width: 244px;
+    height: 40px;
+  }
+`;
+
+export const InputQuantity = styled.input`
+  width: 287px;
+  height: 34px;
+  padding: 8px 14px;
+  border-radius: 12px;
+  border: 1px solid ${colors.orange};
+  gap: 10px;
+  background-color: inherit;
+  color: ${colors.white};
+
+  &::placeholder {
+    color: ${colors.textWhite03};
+    text-align: right;
+  }
+
+  ${mq.tablet} {
+    width: 155px;
+    height: 40px;
+    margin-top: 0;
+  }
+`;
+
+export const Calories = styled.p`
+  font-size: 12px;
+  align-items: end;
+  color: ${colors.white};
+`;
+
+export const TitleCalories = styled.span`
+  font-family: Roboto;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+  color: ${colors.textWhite04};
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  margin-top: 24px;
+  ${mq.tablet} {
+    margin-top: 64px;
+  }
+`;
+
+export const AddButton = styled.button`
+  display: flex;
+  padding: 12px 32px;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: ${colors.orange};
+  color: ${colors.white};
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: calc(18 / 16);
+  border: 1px solid ${colors.textWhite03};
+  transition: background 0.3s ease-out;
+  margin-right: 14px;
+
+  &:hover {
+    background: #ef8964;
+  }
+
+  ${mq.tablet} {
+    margin-right: 16px;
+  }
+`;
+
+export const CloseButton = styled.button`
+  display: flex;
+  padding: 12px 36px;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: inherit;
+  color: ${colors.white};
+  border-radius: 12px;
+  border: 1px solid ${colors.textWhite03};
+  font-size: 16px;
+  font-weight: 500;
+  line-height: calc(18 / 16);
+
+  ${mq.tablet} {
+    padding: 12px 40px;
+  }
+`;
diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -22,8 +22,8 @@ export const ModalWrap = styled.div`
   justify-content: center;
   align-items: center;
 
-  max-width: 400px;
-  min-width: 300px;
+  // max-width: 400px;
+  // min-width: 300px;
   padding: 48px 32px;
   border-radius: 8px;
   background-color: ${colors.modalBlack};

diff --git a/src/components/ProductsOrExercisesItem/ProductsOrExercisesItem.jsx b/src/components/ProductsOrExercisesItem/ProductsOrExercisesItem.jsx
@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react';
 
 import { pageContentToRender } from '../../utils';
 
-const ProductsOrExercisesItem = ({ page, data }) => {
+const ProductsOrExercisesItem = ({ page, data, openModal }) => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {
@@ -49,14 +49,15 @@ const ProductsOrExercisesItem = ({ page, data }) => {
   };
 
   const contentToRender = pageContentToRender(page, data);
-//   console.log(contentToRender);
+  //   console.log(contentToRender);
 
   return (
     <Item>
       <SubDiv>
         <TextDiet>{contentToRender.subtitle}</TextDiet>
         {page === 'product' && <TextRecommended>Recommended</TextRecommended>}
-        <AddBtn>
+
+        <AddBtn onClick={() => openModal()}>
           {contentToRender.button}
           <ArrowRight>
             <use href={sprite + `#arrow-right`}></use>
@@ -94,6 +95,7 @@ const ProductsOrExercisesItem = ({ page, data }) => {
 ProductsOrExercisesItem.propTypes = {
   page: PropTypes.string,
   data: PropTypes.object,
+  openModal: PropTypes.func,
 };
 
 export default ProductsOrExercisesItem;