From d2a4a88e333a82e7ca39fba5d2ca056c732b4148 Mon Sep 17 00:00:00 2001 From: yazen firas Date: Thu, 30 Jul 2020 21:05:03 +0300 Subject: [PATCH 1/6] add & style workout card --- src/components/Card/WorkoutCard.js | 52 ++++++++++++++++++++++++++++++ src/tailwind.css | 1 + 2 files changed, 53 insertions(+) create mode 100644 src/components/Card/WorkoutCard.js diff --git a/src/components/Card/WorkoutCard.js b/src/components/Card/WorkoutCard.js new file mode 100644 index 0000000..e0b1787 --- /dev/null +++ b/src/components/Card/WorkoutCard.js @@ -0,0 +1,52 @@ +import React from 'react'; + +function WorkoutCard(props) { + return ( +
+ Sunset in the mountains +
+
+ FAT LOSE WORKOUTS +
+
+
+
+ + + + + begineer +
+
+
+ + + + + 60min +
+
+
+ ); +} + +export default WorkoutCard; diff --git a/src/tailwind.css b/src/tailwind.css index b5c61c9..89120ff 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; From 84331f7e32499be25e8f4587a7da54e9ba0961c1 Mon Sep 17 00:00:00 2001 From: yazen firas Date: Sun, 2 Aug 2020 16:56:22 +0300 Subject: [PATCH 2/6] change the color of icon & font --- src/components/Card/WorkoutCard.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Card/WorkoutCard.js b/src/components/Card/WorkoutCard.js index e0b1787..be7978b 100644 --- a/src/components/Card/WorkoutCard.js +++ b/src/components/Card/WorkoutCard.js @@ -2,32 +2,32 @@ import React from 'react'; function WorkoutCard(props) { return ( -
+
Sunset in the mountains
-
+
FAT LOSE WORKOUTS
- begineer + beginner
- 60min + 60min
From c7ee0dece9ed31cca2fd9913fa119011320ebcaf Mon Sep 17 00:00:00 2001 From: yazen firas Date: Sun, 2 Aug 2020 17:43:23 +0300 Subject: [PATCH 3/6] fix color --- src/components/Card/WorkoutCard.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Card/WorkoutCard.js b/src/components/Card/WorkoutCard.js index be7978b..a93f815 100644 --- a/src/components/Card/WorkoutCard.js +++ b/src/components/Card/WorkoutCard.js @@ -1,5 +1,4 @@ import React from 'react'; - function WorkoutCard(props) { return (
From 52e0fd29f375d065fa3232715957511173c1b859 Mon Sep 17 00:00:00 2001 From: yazen firas Date: Thu, 6 Aug 2020 15:45:54 +0300 Subject: [PATCH 4/6] make workoutcard inside card folder&make svg file --- src/components/Card/WorkoutCard.js | 51 ------------------- .../Card/WorkoutCard/WorkoutCard.js | 29 +++++++++++ .../Card/WorkoutCard/icons/clockicon.svg | 6 +++ .../Card/WorkoutCard/icons/trainingicon.svg | 14 +++++ 4 files changed, 49 insertions(+), 51 deletions(-) delete mode 100644 src/components/Card/WorkoutCard.js create mode 100644 src/components/Card/WorkoutCard/WorkoutCard.js create mode 100644 src/components/Card/WorkoutCard/icons/clockicon.svg create mode 100644 src/components/Card/WorkoutCard/icons/trainingicon.svg diff --git a/src/components/Card/WorkoutCard.js b/src/components/Card/WorkoutCard.js deleted file mode 100644 index a93f815..0000000 --- a/src/components/Card/WorkoutCard.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -function WorkoutCard(props) { - return ( -
- Sunset in the mountains -
-
- FAT LOSE WORKOUTS -
-
-
-
- - - - - beginner -
-
-
- - - - - 60min -
-
-
- ); -} - -export default WorkoutCard; diff --git a/src/components/Card/WorkoutCard/WorkoutCard.js b/src/components/Card/WorkoutCard/WorkoutCard.js new file mode 100644 index 0000000..74f31f8 --- /dev/null +++ b/src/components/Card/WorkoutCard/WorkoutCard.js @@ -0,0 +1,29 @@ +import React from 'react'; +import clockicon from './icons/clockicon.svg'; +import trainingicon from './icons/trainingicon.svg'; + +function WorkoutCard({ image, title, duration, type, id }) { + return ( +
+ {title} +
+
+ {title} +
+
+
+
+ trainingicon + {type} +
+
+
+ clockicon + {duration} +
+
+
+ ); +} + +export default WorkoutCard; diff --git a/src/components/Card/WorkoutCard/icons/clockicon.svg b/src/components/Card/WorkoutCard/icons/clockicon.svg new file mode 100644 index 0000000..e00428b --- /dev/null +++ b/src/components/Card/WorkoutCard/icons/clockicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Card/WorkoutCard/icons/trainingicon.svg b/src/components/Card/WorkoutCard/icons/trainingicon.svg new file mode 100644 index 0000000..1c980c1 --- /dev/null +++ b/src/components/Card/WorkoutCard/icons/trainingicon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + From fd67c7be0d99be23e3cc924f6afafc76d7e31a8a Mon Sep 17 00:00:00 2001 From: osamaakb Date: Thu, 6 Aug 2020 16:43:28 +0300 Subject: [PATCH 5/6] Style: reduced paddings and removed margins reduced svg icons sizes --- .../Card/WorkoutCard/WorkoutCard.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Card/WorkoutCard/WorkoutCard.js b/src/components/Card/WorkoutCard/WorkoutCard.js index 74f31f8..9be9822 100644 --- a/src/components/Card/WorkoutCard/WorkoutCard.js +++ b/src/components/Card/WorkoutCard/WorkoutCard.js @@ -2,24 +2,24 @@ import React from 'react'; import clockicon from './icons/clockicon.svg'; import trainingicon from './icons/trainingicon.svg'; -function WorkoutCard({ image, title, duration, type, id }) { +function WorkoutCard({ workout }) { return ( -
- {title} -
-
- {title} +
+ {workout.title} +
+
+ {workout.title}
-
-
- trainingicon - {type} +
+
+ trainingicon + {workout.type}
-
-
- clockicon - {duration} +
+
+ clockicon + {workout.duration}
From 42e49076342365c24a3d77234305d64f4252708d Mon Sep 17 00:00:00 2001 From: osamaakb Date: Thu, 6 Aug 2020 16:52:47 +0300 Subject: [PATCH 6/6] Fix: add props types to workoutCard --- src/components/Card/WorkoutCard/WorkoutCard.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/Card/WorkoutCard/WorkoutCard.js b/src/components/Card/WorkoutCard/WorkoutCard.js index 9be9822..a52405c 100644 --- a/src/components/Card/WorkoutCard/WorkoutCard.js +++ b/src/components/Card/WorkoutCard/WorkoutCard.js @@ -1,5 +1,6 @@ import React from 'react'; import clockicon from './icons/clockicon.svg'; +import propTypes from 'prop-types'; import trainingicon from './icons/trainingicon.svg'; function WorkoutCard({ workout }) { @@ -26,4 +27,8 @@ function WorkoutCard({ workout }) { ); } +WorkoutCard.propTypes = { + workout: propTypes.object, +}; + export default WorkoutCard;