hey guys were back in the up here so the
next thing I’ll do is I’ll actually
create a new file and we’re gonna call
it store GS now this file will basically
contain the initial data set for the
exercises and it’s also going to contain
a list of categories for T muscles so
it’s doing number of things here I’m
gonna do export console and muscles and
this will basically be a list of body
parts okay so we’re gonna have shoulders
we’re gonna have chest we’re gonna have
arms let’s also do back and maybe legs
okay so like I said this would be a list
of muscles that we can categorize the
exercises by and the list of exercises
themselves would be all of course–i
list of exercises and this is going to
be an array as well now here we’re gonna
have a list of object and I’m thinking
every exercise would have a title right
it might also have a description and
then we’ll also have the muscles
themselves
so this muscles property would be one of
those categories from above and we’re
also gonna have an idea right and we’re
gonna need this for the key property
when we’re basically iterating over the
exercises inside of the app so I think
this is good enough for an exercise
object and like I said we’re basically
simplifying things here of course every
exercise will involve a bunch of
different muscles in it and of course
the categories themselves that are also
composite meaning there’s different
muscles involved but for the sake of
demo we’re gonna keep it simple and
we’re just gonna narrow it down to those
five different body parts and the
exercises are also going to be targeted
at one of those bike parts specifically
up in right so I went ahead and created
a list of exercises here basically one
or two for each of the categories and
I’m actually gonna include the link to
this wheat Bowl so that you can actually
open it up and copy over the list of
exercises for your demo but for the time
being we’re gonna move on to layout
splitter and what I’d like to do is I’d
like to actually display the list of
categories inside of the footer now the
first thing we need to do though is we
need to grab those muscles those
categories basically as well as the
exercises themselves and we need to
import them
from the store so let’s grab the muscles
fourth also grab the exercises from the
store so we need to go one level up up
let’s say that now the muscles
themselves are going to be static so
that’s one of the assumptions we’re
gonna make the list of categories is not
going to change throughout the app
however the list of exercises might
actually change because we’ll be adding
exercises editing them as well as
deleting them so the exercises
themselves need to go to the state okay
I’m gonna pass on the exercises through
the states on this app.js class and this
would be a container component that
basically passes down all the data to
all the other components they’re gonna
be functional and they’re gonna be also
presentational so they’re basically an
accept the data as props and they’re
just gonna display it whatever the props
happen to be at the time of rendering
now for the muscles were actually gonna
pass them down to the floor so let’s
have muscles and that’s going to be
equal to the muscles themselves so let’s
move on to the footer now and like I
said the properties are going to contain
the muscles now what would you do with
the muscles is who can actually map
through them so I’m gonna say it let’s
help me muscle so I’m gonna map through
them we’re gonna get a set of muscles
for that callback okay and even though
I’m calling it muscles as well you know
call it anything you can call it a
category or a group actually let’s call
it a group just for clarity but you
could also call it muscles and the
reason it works is those muscles are
only going to be accessible within that
callback function so nothing else on the
outside is gonna be affected by that and
once we do that let’s grab on the tops
here and I’m actually gonna use a
different label so the label would
basically be the muscle group from that
map function okay and the rest of them
can go okay let’s say that and as you
can see here we get a list of different
body parts now the one thing I’ll do
though is I’m actually gonna copy over
the staff and I’m going to copy it or
here and instead of an object I’m
actually gonna pass the string I’m going
to call it all so this would be the very
first tab and as if you see here gets
selected because we hard-coded at the
index top zero to the tabs and the
reason I want to do that is well if you
select all from the list of tabs you’re
going to be able to see all the
different categories but let’s say if
you click on shoulders you were only
going to be able to select the list of
shoulder exercises okay and the list of
exercises themselves we’re probably
going to put it on the left pane over
there so let’s go back to op GS and
we’re going to need to pass down those
exercises in there so exercises equals
something now the thing about this is of
course we have a list of exercises right
back in the store we basically got a
list of unordered objects that pertain
to different categories and they’re
really not sorted by anything now the
problem with that is like I said if I
just remove this for the time being the
bringing back like I said we have
different categories that pertain to
different muscle groups and I would like
to be able to display or basically sort
the list of exercises depending on the
category that’s being selected now in
order to do that well we can’t do it in
the moment because the list of exercises
like I said is not ordered so we’re
gonna have to play with the data before
we actually pass it to the exercises
component and of course we could do the
flattening inside of index GS or
whatever but because we are inside of
the container itself I’d like to keep
that responsibility for app GS or app
component itself so let’s create another
method I’m gonna call it you get the
exercises by muscles
okay or you could call it by category by
group whatever the case might be so what
I’m gonna do is I’m gonna actually
return this state exercises and we’re
going to need to play with that a little
bit well first of all let’s do
console.log of that
so let’s first call a – method and let’s
open up the console let’s see what its
gonna give us I’m gonna save the file
and it looks like I made a typo of
course it’s not States was I thinking
about that state and we’re basically
assigning the exercises island okay so
we get a list of objects here and as you
might expect these are basically all the
different exercise objects that we
define in this store so if anything in
the store changes if the initial data
set changes it’s also going to affect
the state now this is not enough of
course so we need to transform that
state somehow and we’re actually going
to do is we’re actually going to reduce
that state to something else and in fact
it’s going to be an object and when you
call the reduce function and like that
it’s gonna expect a callback as the
first router with a function now that
callback is gonna receive a number of
arguments the very first thing would be
the accumulator itself and I kind of
call it the exercises and the second
parameter would be the object that’s
being looped over at the moment so if
you go back to the store so when we’re
looking through all the different
exercises for example the very first
element would be this object over here
so back in FGS this would be exactly
that object and what do we actually want
to do here well first of all let’s get
the muscles from the exercise and by the
way the muscles would obviously be the
muscles probably here so up for example
shoulders or arms okay we’re just gonna
need structure it then we’re gonna do is
we’re gonna say well we’ve got the
exercises the problem here is that the
exercises variable is first going to be
assigned a value of a very first element
that we are reducing on this array so
when you call reduce or where first
iteration it’s gonna get the value off
the exercise object so in this case it’s
gonna be overhead press let’s guy over
here and it’s gonna assign that value to
exercises it’s not exactly we want to do
in fact what we actually want to use as
the initial value and you can
see the description for that second
parameter popping up but either full
value like I said is going to be an
active jekt and the next thing we’ll do
is we’ll grab that object and we’re
gonna sign a property on it and the
property on it would be the muscles so
for instance arms or chest or back okay
and we actually want to assign it
conditionally so I’m gonna say do we
already have something stored in that
property at the moment well if we do
it’s actually going to be an array and
we need to spread out the elements from
that array into a new array okay so it’s
gonna create another ray and lastly
we’re just gonna pass it the exercise
object itself into it otherwise we’re
gonna create a new array with the
exercise alone like that okay and
finally we need to return the exercises
themselves okay
so let’s save that and let’s actually
see what the output becomes so in the
past if you remember we were getting a
list of different objects basically an
array just the exact same thing as the
exercises from the store but now we’re
actually getting an object that contains
all the different by parts and those by
parts contain all the different
exercises that pertain to them okay so
now we’re basically done is we’ve
created an object that is containing all
the different exercises sorted by the
category or the body part and this is
exactly what we want however the problem
with the object is we cannot really map
over that object at a moment so we found
once you go to exercises and I want to
pass down the exercises and basically
loop through them in the left pane but I
can’t really do that because the
exercises that we returned the end from
the reduced function becomes an object
and we can’t really iterate over in an
object
with a math function as we do with the
erase so what I’m actually gonna do the
very last thing I’m gonna call object
entries and object entries is a
fantastic method from es8 I believe one
of the latest additions of echo script
and what this object does is well it’s
actually open up the console and let’s
see all Det
we get an array that contains a bunch of
different arrays inside of it so
basically subarrays well let’s see what
the very first one is we get an array
that contains the category for instance
shoulders and we also get another array
that contains the list of all of the
exercises pertaining to that category
okay and what we can actually do with
that is we can actually iterate over the
largest array or the basically wrapper
array in order to display or the
different elements inside of the left
pane like I said so now with all of that
transformation out of the way let’s
actually grab this goal I’m gonna create
a constant here I’m gonna collect
exercises and we’re gonna get the
exercises from that method okay and
finally we’re gonna pass the exercises
to the exercises component okay
so let’s pass it down and like I said an
index show yes let’s first of all
refactor it a little bit no thought
about it I’m actually not gonna have any
pains here because a lot of the stuff is
basically going to be duplicated and I
don’t think it makes much sense to do it
so let’s bring it back to the paper
elements and I keep left being there for
now and I’m just gonna copy it over and
I’m gonna create a right
so same thing here and the style is
object well we already have identical
those two panes and the one thing that’s
missing is the paper element at the
moment you save index yes and we can
remove left pane and we can also remove
the right pane okay so now we actually
get a props object so I don’t need the
whole thing of course I just need the
exercises for the time being now what do
we actually want to do with that what we
want to iterate over them so let’s do
exactly that I’m gonna call the map
function right now so let’s provide a
call back inside and that callback is
actually going to receive an array but
I’m actually going to structure it so
I’m gonna get the group or the category
you can think of it as a body part and
I’m gonna get all the different
exercises that pertain to that specific
group known as case the exercises here
is not going to overwrite the other
exercises that we get from the props
it’s actually going to mask those
exercises within the callback because
within the callback I don’t actually
need to get hold of the whole entire
exercises object that we get as a props
I just need to get those specific
exercises that pertain to my specific
group that we are iterating over at the
moment so once we get that I’m going to
actually create a typography element
here okay
the typography element is going to be
sort of like the title for that category
or group I’m just gonna say okay and we
are going to get that for a filament of
course okay let’s say that so as you can
see here we get a list of different
categories or body parts now let’s
actually go to the documentation of
material UI so I’d like to see some of
the options that we can use for that
type of a filament so let’s good so you
get started let’s actually go to style
typography and over here as you can see
we’ve got all these different elements
no the one I’m interested in the
headline
so over here typography with the variant
of headline so that’s the one I’ll use
so let’s have a typography element I’m
gonna set the variant to headline let’s
save it no the other thing I’ll do is
I’m also bad pass and inline style
object here and I’m gonna say text
transform to capitalize or just
basically gonna capitalize those
categories okay
now the next thing we also need to do is
I’d like to have a list of the exercises
just below be different categories so
let’s go to component demos and we’re
gonna head over to list and we can open
up the very first one of course there’s
a bunch of different examples here are
the would be news and we could tweak it
eventually but for now I’m just gonna
grab a list here the very primitive
simple markup and I paste it over here
now first things first we need to import
actually the list we can get from
material UI itself but for the auto
means for example list item as well as
list item text well that actually needs
to come from a bit of a different but we
need to also have a list at the end and
one thing I’ll mention though for the
time being is there’s actually proposal
to flatten the path for a lot of
different components inside of the
library meaning that if you import let’s
say list item or list item text you will
have to have a pulls fixed off slash
list so in the future it’s very probable
that you just need to do that same thing
but from a chill UI so that you can
actually copy over these elements and
just put them over there on the same
line so that you’ll have to like I said
have the list both six at the end but
for the time being this is what the
library provides us with if there’s the
breaking change I’ll let you know and a
comments down the little so just stay
tuned or just make sure to go back to
the documentation
check yourself okay but I’m gonna say
that for the time being and of course we
get an error here because we need a
wrapping element and for that I’m gonna
use a fragment a very convenient element
that react provide itself and I’m going
to wrap the typography with the fragment
and the list of course with the fragment
I’m gonna help the closing tag let’s
indent this and let’s save it now for
the component on the list itself I’m
actually going to use an unordered list
and finally what we need to do is we
need to map through those exercises okay
let’s call the map function we’re going
to get the exercise object and finally
once we do that we can actually output
the list item for each of the exercises
right and that can go away that and for
the text we can actually pass the title
of the exercise so let’s actually grab
it from the object so I’m going to need
to use in those parentheses and the
curly braces I’m gonna instruct the
title from there and let’s say that in
as you can see here on the left we get a
list of different exercises now for the
right pane I’m actually gonna do the
following so let’s have if you took a
few lemons here let’s close that off and
let’s copy it what I’d like to do here
is well if you select an exercise from
the list we’re gonna display the title
and description basically the details of
that exercise but when you land on the
page of course nothing is selected by
default
so we’re basically I have a simple
welcome message I think and let’s have a
variant over here I’m gonna pass a rank
equals display one for instance okay now
for the second one this would be a
program actually if we go back to the
documentation
let’s go back to demos actually it’s in
style typography so for the actual text
we could use body or we could even use
subheading so I’m gonna say a variant
gonna be equal to something and for the
text let’s actually put something like
this
please select an exercise from the list
on the left
okay let’s say that and maybe you could
also add a margin – maybe I’ll include a
style this would be an object and we’re
just gonna pass margin top that’s gonna
give you for instance 20 pixels okay
that doesn’t look too bad now the only
thing is I’d like to make this pain and
this same height as the first one so
maybe I’m gonna give from both of them
aesthetic height maybe 500 pixels and as
you can see here it’s actually not cut
off at the list of exercises so I’m
gonna do overflow why I’m gonna set it
to auto that’s gonna allow our list of
exercises to be scrollable and I’m just
going to just this thing over here all
the different styles so that it’s nice
and clean and readable it’s bringing
back the Comal that’s just that okay so
that looks pretty good for the time being so we can save that
next thing I’ll do is I’ll actually
create a new file and we’re gonna call
it store GS now this file will basically
contain the initial data set for the
exercises and it’s also going to contain
a list of categories for T muscles so
it’s doing number of things here I’m
gonna do export console and muscles and
this will basically be a list of body
parts okay so we’re gonna have shoulders
we’re gonna have chest we’re gonna have
arms let’s also do back and maybe legs
okay so like I said this would be a list
of muscles that we can categorize the
exercises by and the list of exercises
themselves would be all of course–i
list of exercises and this is going to
be an array as well now here we’re gonna
have a list of object and I’m thinking
every exercise would have a title right
it might also have a description and
then we’ll also have the muscles
themselves
so this muscles property would be one of
those categories from above and we’re
also gonna have an idea right and we’re
gonna need this for the key property
when we’re basically iterating over the
exercises inside of the app so I think
this is good enough for an exercise
object and like I said we’re basically
simplifying things here of course every
exercise will involve a bunch of
different muscles in it and of course
the categories themselves that are also
composite meaning there’s different
muscles involved but for the sake of
demo we’re gonna keep it simple and
we’re just gonna narrow it down to those
five different body parts and the
exercises are also going to be targeted
at one of those bike parts specifically
up in right so I went ahead and created
a list of exercises here basically one
or two for each of the categories and
I’m actually gonna include the link to
this wheat Bowl so that you can actually
open it up and copy over the list of
exercises for your demo but for the time
being we’re gonna move on to layout
splitter and what I’d like to do is I’d
like to actually display the list of
categories inside of the footer now the
first thing we need to do though is we
need to grab those muscles those
categories basically as well as the
exercises themselves and we need to
import them
from the store so let’s grab the muscles
fourth also grab the exercises from the
store so we need to go one level up up
let’s say that now the muscles
themselves are going to be static so
that’s one of the assumptions we’re
gonna make the list of categories is not
going to change throughout the app
however the list of exercises might
actually change because we’ll be adding
exercises editing them as well as
deleting them so the exercises
themselves need to go to the state okay
I’m gonna pass on the exercises through
the states on this app.js class and this
would be a container component that
basically passes down all the data to
all the other components they’re gonna
be functional and they’re gonna be also
presentational so they’re basically an
accept the data as props and they’re
just gonna display it whatever the props
happen to be at the time of rendering
now for the muscles were actually gonna
pass them down to the floor so let’s
have muscles and that’s going to be
equal to the muscles themselves so let’s
move on to the footer now and like I
said the properties are going to contain
the muscles now what would you do with
the muscles is who can actually map
through them so I’m gonna say it let’s
help me muscle so I’m gonna map through
them we’re gonna get a set of muscles
for that callback okay and even though
I’m calling it muscles as well you know
call it anything you can call it a
category or a group actually let’s call
it a group just for clarity but you
could also call it muscles and the
reason it works is those muscles are
only going to be accessible within that
callback function so nothing else on the
outside is gonna be affected by that and
once we do that let’s grab on the tops
here and I’m actually gonna use a
different label so the label would
basically be the muscle group from that
map function okay and the rest of them
can go okay let’s say that and as you
can see here we get a list of different
body parts now the one thing I’ll do
though is I’m actually gonna copy over
the staff and I’m going to copy it or
here and instead of an object I’m
actually gonna pass the string I’m going
to call it all so this would be the very
first tab and as if you see here gets
selected because we hard-coded at the
index top zero to the tabs and the
reason I want to do that is well if you
select all from the list of tabs you’re
going to be able to see all the
different categories but let’s say if
you click on shoulders you were only
going to be able to select the list of
shoulder exercises okay and the list of
exercises themselves we’re probably
going to put it on the left pane over
there so let’s go back to op GS and
we’re going to need to pass down those
exercises in there so exercises equals
something now the thing about this is of
course we have a list of exercises right
back in the store we basically got a
list of unordered objects that pertain
to different categories and they’re
really not sorted by anything now the
problem with that is like I said if I
just remove this for the time being the
bringing back like I said we have
different categories that pertain to
different muscle groups and I would like
to be able to display or basically sort
the list of exercises depending on the
category that’s being selected now in
order to do that well we can’t do it in
the moment because the list of exercises
like I said is not ordered so we’re
gonna have to play with the data before
we actually pass it to the exercises
component and of course we could do the
flattening inside of index GS or
whatever but because we are inside of
the container itself I’d like to keep
that responsibility for app GS or app
component itself so let’s create another
method I’m gonna call it you get the
exercises by muscles
okay or you could call it by category by
group whatever the case might be so what
I’m gonna do is I’m gonna actually
return this state exercises and we’re
going to need to play with that a little
bit well first of all let’s do
console.log of that
so let’s first call a – method and let’s
open up the console let’s see what its
gonna give us I’m gonna save the file
and it looks like I made a typo of
course it’s not States was I thinking
about that state and we’re basically
assigning the exercises island okay so
we get a list of objects here and as you
might expect these are basically all the
different exercise objects that we
define in this store so if anything in
the store changes if the initial data
set changes it’s also going to affect
the state now this is not enough of
course so we need to transform that
state somehow and we’re actually going
to do is we’re actually going to reduce
that state to something else and in fact
it’s going to be an object and when you
call the reduce function and like that
it’s gonna expect a callback as the
first router with a function now that
callback is gonna receive a number of
arguments the very first thing would be
the accumulator itself and I kind of
call it the exercises and the second
parameter would be the object that’s
being looped over at the moment so if
you go back to the store so when we’re
looking through all the different
exercises for example the very first
element would be this object over here
so back in FGS this would be exactly
that object and what do we actually want
to do here well first of all let’s get
the muscles from the exercise and by the
way the muscles would obviously be the
muscles probably here so up for example
shoulders or arms okay we’re just gonna
need structure it then we’re gonna do is
we’re gonna say well we’ve got the
exercises the problem here is that the
exercises variable is first going to be
assigned a value of a very first element
that we are reducing on this array so
when you call reduce or where first
iteration it’s gonna get the value off
the exercise object so in this case it’s
gonna be overhead press let’s guy over
here and it’s gonna assign that value to
exercises it’s not exactly we want to do
in fact what we actually want to use as
the initial value and you can
see the description for that second
parameter popping up but either full
value like I said is going to be an
active jekt and the next thing we’ll do
is we’ll grab that object and we’re
gonna sign a property on it and the
property on it would be the muscles so
for instance arms or chest or back okay
and we actually want to assign it
conditionally so I’m gonna say do we
already have something stored in that
property at the moment well if we do
it’s actually going to be an array and
we need to spread out the elements from
that array into a new array okay so it’s
gonna create another ray and lastly
we’re just gonna pass it the exercise
object itself into it otherwise we’re
gonna create a new array with the
exercise alone like that okay and
finally we need to return the exercises
themselves okay
so let’s save that and let’s actually
see what the output becomes so in the
past if you remember we were getting a
list of different objects basically an
array just the exact same thing as the
exercises from the store but now we’re
actually getting an object that contains
all the different by parts and those by
parts contain all the different
exercises that pertain to them okay so
now we’re basically done is we’ve
created an object that is containing all
the different exercises sorted by the
category or the body part and this is
exactly what we want however the problem
with the object is we cannot really map
over that object at a moment so we found
once you go to exercises and I want to
pass down the exercises and basically
loop through them in the left pane but I
can’t really do that because the
exercises that we returned the end from
the reduced function becomes an object
and we can’t really iterate over in an
object
with a math function as we do with the
erase so what I’m actually gonna do the
very last thing I’m gonna call object
entries and object entries is a
fantastic method from es8 I believe one
of the latest additions of echo script
and what this object does is well it’s
actually open up the console and let’s
see all Det
we get an array that contains a bunch of
different arrays inside of it so
basically subarrays well let’s see what
the very first one is we get an array
that contains the category for instance
shoulders and we also get another array
that contains the list of all of the
exercises pertaining to that category
okay and what we can actually do with
that is we can actually iterate over the
largest array or the basically wrapper
array in order to display or the
different elements inside of the left
pane like I said so now with all of that
transformation out of the way let’s
actually grab this goal I’m gonna create
a constant here I’m gonna collect
exercises and we’re gonna get the
exercises from that method okay and
finally we’re gonna pass the exercises
to the exercises component okay
so let’s pass it down and like I said an
index show yes let’s first of all
refactor it a little bit no thought
about it I’m actually not gonna have any
pains here because a lot of the stuff is
basically going to be duplicated and I
don’t think it makes much sense to do it
so let’s bring it back to the paper
elements and I keep left being there for
now and I’m just gonna copy it over and
I’m gonna create a right
so same thing here and the style is
object well we already have identical
those two panes and the one thing that’s
missing is the paper element at the
moment you save index yes and we can
remove left pane and we can also remove
the right pane okay so now we actually
get a props object so I don’t need the
whole thing of course I just need the
exercises for the time being now what do
we actually want to do with that what we
want to iterate over them so let’s do
exactly that I’m gonna call the map
function right now so let’s provide a
call back inside and that callback is
actually going to receive an array but
I’m actually going to structure it so
I’m gonna get the group or the category
you can think of it as a body part and
I’m gonna get all the different
exercises that pertain to that specific
group known as case the exercises here
is not going to overwrite the other
exercises that we get from the props
it’s actually going to mask those
exercises within the callback because
within the callback I don’t actually
need to get hold of the whole entire
exercises object that we get as a props
I just need to get those specific
exercises that pertain to my specific
group that we are iterating over at the
moment so once we get that I’m going to
actually create a typography element
here okay
the typography element is going to be
sort of like the title for that category
or group I’m just gonna say okay and we
are going to get that for a filament of
course okay let’s say that so as you can
see here we get a list of different
categories or body parts now let’s
actually go to the documentation of
material UI so I’d like to see some of
the options that we can use for that
type of a filament so let’s good so you
get started let’s actually go to style
typography and over here as you can see
we’ve got all these different elements
no the one I’m interested in the
headline
so over here typography with the variant
of headline so that’s the one I’ll use
so let’s have a typography element I’m
gonna set the variant to headline let’s
save it no the other thing I’ll do is
I’m also bad pass and inline style
object here and I’m gonna say text
transform to capitalize or just
basically gonna capitalize those
categories okay
now the next thing we also need to do is
I’d like to have a list of the exercises
just below be different categories so
let’s go to component demos and we’re
gonna head over to list and we can open
up the very first one of course there’s
a bunch of different examples here are
the would be news and we could tweak it
eventually but for now I’m just gonna
grab a list here the very primitive
simple markup and I paste it over here
now first things first we need to import
actually the list we can get from
material UI itself but for the auto
means for example list item as well as
list item text well that actually needs
to come from a bit of a different but we
need to also have a list at the end and
one thing I’ll mention though for the
time being is there’s actually proposal
to flatten the path for a lot of
different components inside of the
library meaning that if you import let’s
say list item or list item text you will
have to have a pulls fixed off slash
list so in the future it’s very probable
that you just need to do that same thing
but from a chill UI so that you can
actually copy over these elements and
just put them over there on the same
line so that you’ll have to like I said
have the list both six at the end but
for the time being this is what the
library provides us with if there’s the
breaking change I’ll let you know and a
comments down the little so just stay
tuned or just make sure to go back to
the documentation
check yourself okay but I’m gonna say
that for the time being and of course we
get an error here because we need a
wrapping element and for that I’m gonna
use a fragment a very convenient element
that react provide itself and I’m going
to wrap the typography with the fragment
and the list of course with the fragment
I’m gonna help the closing tag let’s
indent this and let’s save it now for
the component on the list itself I’m
actually going to use an unordered list
and finally what we need to do is we
need to map through those exercises okay
let’s call the map function we’re going
to get the exercise object and finally
once we do that we can actually output
the list item for each of the exercises
right and that can go away that and for
the text we can actually pass the title
of the exercise so let’s actually grab
it from the object so I’m going to need
to use in those parentheses and the
curly braces I’m gonna instruct the
title from there and let’s say that in
as you can see here on the left we get a
list of different exercises now for the
right pane I’m actually gonna do the
following so let’s have if you took a
few lemons here let’s close that off and
let’s copy it what I’d like to do here
is well if you select an exercise from
the list we’re gonna display the title
and description basically the details of
that exercise but when you land on the
page of course nothing is selected by
default
so we’re basically I have a simple
welcome message I think and let’s have a
variant over here I’m gonna pass a rank
equals display one for instance okay now
for the second one this would be a
program actually if we go back to the
documentation
let’s go back to demos actually it’s in
style typography so for the actual text
we could use body or we could even use
subheading so I’m gonna say a variant
gonna be equal to something and for the
text let’s actually put something like
this
please select an exercise from the list
on the left
okay let’s say that and maybe you could
also add a margin – maybe I’ll include a
style this would be an object and we’re
just gonna pass margin top that’s gonna
give you for instance 20 pixels okay
that doesn’t look too bad now the only
thing is I’d like to make this pain and
this same height as the first one so
maybe I’m gonna give from both of them
aesthetic height maybe 500 pixels and as
you can see here it’s actually not cut
off at the list of exercises so I’m
gonna do overflow why I’m gonna set it
to auto that’s gonna allow our list of
exercises to be scrollable and I’m just
going to just this thing over here all
the different styles so that it’s nice
and clean and readable it’s bringing
back the Comal that’s just that okay so
that looks pretty good for the time being so we can save that
Please follow and like us: