Merge pull request #60 from Sokilskill/modal2

css
Sokilskill · Jan 22, 2024 · d5ecc97 · d5ecc97
2 parents 97ec9f2 + e76ae5d
commit d5ecc97
Show file tree

Hide file tree

Showing 13 changed files with 498 additions and 309 deletions.
diff --git a/src/assets/images/pause-square.png b/src/assets/images/pause-square.png
diff --git a/src/assets/images/play.png b/src/assets/images/play.png
diff --git a/src/components/AddExerciseForm/AddExerciseForm.jsx b/src/components/AddExerciseForm/AddExerciseForm.jsx
@@ -1,24 +1,10 @@
 import { useEffect, useState, useCallback } from 'react';
-import { MdClose } from "react-icons/md";
-import { Backdrop, ModalContainer, Close, Image, Div,TimerContainer, TimerButton, Text, Button} from "./AddExerciseForm.styled";
+import { RiCloseLine, RiPlayLine, RiPauseLine } from "react-icons/ri";
+import { Backdrop, ModalContainer, Close, Image, Div, Container,Flex,TimerContainer, TimerButton, ButtonDiv,Text, StyledList, StyledListItem, Workout,WorkoutName, Button} from "./AddExerciseForm.styled";
 import BlockIcon from "../../assets/images/block.png";
 import { CountdownCircleTimer } from 'react-countdown-circle-timer'
 
-const AddExerciseForm = ({onClose, open}) => {
-
-  const StartIcon = () => (
-    <svg width="24" height="24" xmlns="../../assets/images/play.svg">
-
-    </svg>
-  );
-
-  const PauseIcon = () => (
-    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-      {/* SVG-иконка для "Пауза" */}
-      <path d="M3 3h18v18H3V3zm6 12h3V9H9v6zm4 0h3V9h-3v6z"/>
-    </svg>
-  );
-
+const AddExerciseForm = ({onClose, calories, time, open}) => {
   const handleKeyDown = useCallback((event) => {
     if (event.key === 'Escape') {
       onClose();
@@ -34,41 +20,77 @@ const AddExerciseForm = ({onClose, open}) => {
   }, [handleKeyDown]); 
 
   const [isTimerRunning, setIsTimerRunning] = useState(false);
+  const [caloriesBurned, setCaloriesBurned] = useState(0);
 
   const startPauseTimer = () => {
-    setIsTimerRunning((prevState) => !prevState);
+    setIsTimerRunning(!isTimerRunning);
   };
 
+  const saveBurnedCalories = (remainingTime) => {
+    const elapsedTime = time - remainingTime;
+    setCaloriesBurned(Math.floor(elapsedTime * calories / time))
+    // TODO: save burned calories with API call
+  }
 
   return (
     <>
       <Backdrop onClick={onClose} style={{display: open ? 'flex' : 'none'}}>
           <ModalContainer onClick={event => event.stopPropagation()}>
-           <Close>
-               <MdClose onClick={onClose} size='22px' />
+            <Close>
+              <RiCloseLine onClick={onClose} size='22px' />
             </Close>
-              <Div>
-                <Image src={BlockIcon} alt="" />
-              </Div>
-              <Text>Time</Text>
-              <TimerContainer>
-                <CountdownCircleTimer
-                    isPlaying
-                    duration={180}
-                    colors={['#E6533C']}
-                    colorsTime={[7, 5, 2, 0]}
-                    strokeWidth={[4]}
-                  >
-                  {({ remainingTime }) => remainingTime}
-                </CountdownCircleTimer>
-
-              </TimerContainer>
-              <TimerButton onClick={startPauseTimer}>
-                {isTimerRunning ? <PauseIcon /> : <StartIcon />}
-              </TimerButton>
-              <Text>Burned calories:</Text>
-              <Button>Next product</Button>
-
+              <Flex>
+                <Container>
+                  <Div>
+                    <Image src={BlockIcon} alt="" />
+                  </Div>
+                  <Text>Time</Text>
+                  <TimerContainer>
+                    <CountdownCircleTimer
+                        isPlaying={isTimerRunning}
+                        duration={time}
+                        colors={['#E6533C']}
+                        colorsTime={[7, 5, 2, 0]}
+                        strokeWidth={[4]}
+                      >
+                      {({ remainingTime }) => {
+                        const minutes = String(Math.floor(remainingTime / 60)).padStart(2, '0')
+                        const seconds = String(remainingTime % 60).padStart(2, '0')
+                        saveBurnedCalories(remainingTime);
+
+                        return `${minutes}:${seconds}`
+                      }}
+                    </CountdownCircleTimer>
+                  </TimerContainer>
+                  <ButtonDiv>
+                    <TimerButton onClick={startPauseTimer}>
+                      {isTimerRunning ? <RiPauseLine /> : <RiPlayLine />}
+                    </TimerButton>
+                  </ButtonDiv>
+                  <Text>Burned calories: {caloriesBurned}</Text>
+                </Container>
+                <Container>
+                  <StyledList>
+                    <StyledListItem>
+                      <Workout>Name</Workout>
+                      <WorkoutName>Air bike</WorkoutName>
+                    </StyledListItem>
+                    <StyledListItem>
+                      <Workout>Name</Workout>
+                      <WorkoutName>Air bike</WorkoutName>
+                    </StyledListItem>
+                    <StyledListItem>
+                      <Workout>Name</Workout>
+                      <WorkoutName>Air bike</WorkoutName>
+                    </StyledListItem>
+                    <StyledListItem>
+                      <Workout>Name</Workout>
+                      <WorkoutName>Air bike</WorkoutName>
+                    </StyledListItem>
+                  </StyledList>
+                  <Button>Add to diary</Button>
+                </Container> 
+              </Flex>
           </ModalContainer>
         </Backdrop>
 

diff --git a/src/components/AddExerciseForm/AddExerciseForm.styled.jsx b/src/components/AddExerciseForm/AddExerciseForm.styled.jsx
@@ -17,20 +17,39 @@ export const Backdrop  = styled.div`;
 export const ModalContainer = styled.div`
   position: absolute;
   width: 335px;
+
   padding: 48px 32px;
-  text-align: center;
+  
   border-radius: 12px;
   border: 1px;
   background: linear-gradient(0deg, #10100F, #10100F),
   linear-gradient(0deg, rgba(239, 237, 232, 0.2), rgba(239, 237, 232, 0.2));
+
+  @media (min-width: 768px) {
+    width: 694px;
+  }
 `;
 
 export const Close = styled.div`
   position: absolute;
   top: 14px;
-  left: 299px;
+  right: 14px;
   cursor: pointer;
 `
+export const Container = styled.div`
+  @media (min-width: 768px) {
+    display: inline-block;
+    width: 50%;
+  }
+
+`;
+export const Flex = styled.div`
+  @media (min-width: 768px) {
+    displey:flex;
+    flex-wrap: wrap;
+  }
+  
+`;
 export const Div = styled.div`
   text-align: center;
   margin-bottom: 14px;
@@ -56,19 +75,29 @@ export const TimerContainer = styled.div`
 `;
 
 export const TimerButton = styled.button`
-  background-color: #3498db;
-  color: #fff;
-  padding: 10px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.75rem;
+  padding: 0.5rem;
   cursor: pointer;
   border: none;
   outline: none;
   transition: background-color 0.3s ease;
-
+  color: #fff;
+  border-radius: 1px;
+  
+  background-color: #E6533C;
   &:hover {
-    background-color: #2980b9;
+    background-color: #D6432C;
   }
 `;
 
+export const ButtonDiv = styled.div`
+
+text-align: center;
+`;
+
 export const Text = styled.p`
 margin-bottom: 4px;
 font-family: Roboto;
@@ -77,10 +106,54 @@ font-weight: 400;
 line-height: 18px;
 letter-spacing: 0px;
 text-align: left;
-color: #EFEDE84D;
+color: var(--secondary-text-color);
 text-align: center;
 `;
 
+export const StyledList = styled.ul`
+  margin-top: 40px;
+  list-style: none;
+  displey:flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+
+  @media (min-width: 768px) {
+    margin-top: 0;
+  }
+}
+`;
+
+export const StyledListItem = styled.li`
+  margin:8px;
+  display: inline-block;
+  border: 1px solid var(--border);
+  width: 40%;
+
+  padding: 10px;
+  border-radius: 12px;
+  gap: 32px;
+  background: linear-gradient(0deg, rgba(239, 237, 232, 0.05), rgba(239, 237, 232, 0.05));
+`;
+
+export const Workout = styled.div`
+  font-family: Roboto;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
+  text-align: left;
+  color: var(--secondary-text-color);
+  
+`
+export const WorkoutName = styled.p`
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+  color: var(--whiter);
+`
 export const Button = styled.button`
 width: 157px;
 height: 42px;

diff --git a/src/components/AddExerciseSuccess/AddExerciseSuccess.jsx b/src/components/AddExerciseSuccess/AddExerciseSuccess.jsx
@@ -4,7 +4,7 @@ import { IoMdArrowForward } from "react-icons/io";
 import { Backdrop, ModalContainer, Close, Image, Div, Title, Text, Button, StyledLink} from "./AddExerciseSuccess.stiled";
 import ThumbIcon from "../../assets/images/thumb_up.png";
 
-const AddExerciseSuccess = ({onClose, open, linkTo}) => {
+const AddExerciseSuccess = ({onClose, open }) => {
   const handleKeyDown = useCallback((event) => {
     if (event.key === 'Escape') {
       onClose();
@@ -32,9 +32,9 @@ const AddExerciseSuccess = ({onClose, open, linkTo}) => {
               <Title>Well done</Title>
               <Text>Your  time: </Text>
               <Text>Burned calories:</Text>
-              <Button>Next product</Button>
+              <Button type='button' onClick={onClose}>Next product</Button>
               <Div>
-                <StyledLink to={linkTo}>To the diary<IoMdArrowForward /></StyledLink>
+                <StyledLink to="/diary">To the diary <IoMdArrowForward /></StyledLink>
               </Div>
           </ModalContainer>
         </Backdrop>