I am trying to get a press animation on the card once I click the button. I am doing that by changing the className back and forth every time the button is clicked. But the issue is that clicking the button changes the className of all the elements inside the map. Does anyone has any idea where I am messing up?
If you hover over the shoulders card:
If you click on it, ideally only one card should show pressing animation, but here all cards are showing the animation.
Here is the code:
const [chosenRoutine, setChosenRoutine] = useState("");
useEffect(() => {
setChosenRoutine("");
}, []);
<Stack
direction="row"
sx={{
justifyContent: "center",
gap: "80px",
flexWrap: "wrap",
}}>
{chosenRegimeData.routine.map((routine, index) => (
<Box
key={index}
sx={{
borderRadius: "30px",
}}>
<Box
className={classNames}
sx={{
display: "grid",
width: "400px",
height: "370px",
borderRadius: "30px",
p: "10px",
background: "rgba(10, 18, 38, 1)",
position: "relative",
}}>
<img
src={routine.image}
alt="image"
style={{
width: "100%",
height: "70%",
borderRadius: "30px",
}}
/>
<Stack
alignItems="center"
spacing={1}
sx={{
width: "100%",
background: "rgba(10, 18, 38, 1)",
position: "absolute",
bottom: "20px",
pt: "2px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-2"
sx={{
width: "100%",
color: "#fff",
textTransform: "capitalize",
textAlign: "center",
fontSize: "24px",
}}>
{routine.name}
</Typography>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
size="large"
variant="outlined"
className="gradient-text-5"
onClick={() => {
setClassNames("pressed-2");
console.log("pressed", index);
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
// showRoutineExercises(routine);
}, 300);
}}>
See Exercises in this Routine
</Button>
</Stack>
</Stack>
</Box>
</Box>
))}
</Stack>
Formate of chosenRegimeData
{
name: "calisthenics",
warmup: [
{
name: "neck rotations",
time: "20 seconds",
image: neckRotation,
},
{
name: "arm rotations",
time: "10 seconds",
image: armRotation,
},
{
name: "arm side swings",
time: "10 seconds",
image: armSideSwings,
},
{
name: "jumping jacks",
time: "10 seconds",
image: jumpingJacks,
},
{
name: "heel flicks",
time: "10 seconds",
image: heelFlicks,
},
{
name: "high knees",
time: "10 seconds",
image: highKnees,
},
{
name: "dynamic quad pull",
reps: "5 each side",
image: quadPull,
},
{
name: "toe hand touch",
reps: "10 each side",
image: toeHandTouch,
},
{
name: "wide stance side to side",
reps: "5 each side",
image: wideStanceSideToSide,
},
{
name: "wide stance forward bend",
reps: "10 each side",
image: wideStanceForwardBend,
},
],
routine: [
{
name: "chest and triceps",
image: chest,
exercise: [
{
name: "pushups",
sets: 3,
reps: 10,
image: pushups,
},
{
name: "diamond pushups",
sets: 3,
reps: 10,
image: diamondPushups,
},
{
name: "wide pushups",
sets: 3,
reps: 10,
image: widePushups,
},
{
name: "tricep dips",
sets: 3,
reps: 10,
image: tricepDips,
},
{
name: "tricep extensions",
sets: 3,
reps: 10,
image: tricepExtensions,
},
{
name: "decline pushups",
sets: 3,
reps: 10,
image: declinePushups,
},
{
name: "incline pushups",
sets: 3,
reps: 10,
image: inclinePushups,
},
{
name: "explosive pushups",
sets: 2,
reps: 10,
image: explosivePushups,
},
{
name: "archer pushups",
sets: 2,
reps: 4,
image: archerPushups,
},
],
},
{
name: "shoulders",
image: shoulders,
exercise: [
{
name: "pike pushups",
sets: 3,
reps: 10,
image: pikePushups,
},
{
name: "raised pike pushups",
sets: 3,
reps: 8,
image: raisedPikePushups,
},
{
name: "wall walk",
sets: 3,
reps: 10,
image: wallWalk,
},
{
name: "handstand against the wall",
sets: 3,
time: "20 seconds",
image: handstandAgainstWall,
},
{
name: "handstand pushups against wall",
sets: 3,
reps: 5,
image: handstand,
},
],
},
{
name: "back and biceps",
image: back,
exercise: [
{
name: "pullups",
sets: 3,
reps: 6,
image: pullups,
},
{
name: "chinups",
sets: 3,
reps: 6,
image: chinups,
},
{
name: "wide pullups",
sets: 3,
reps: 5,
image: widePullups,
},
{
name: "close grip pullups",
sets: 3,
reps: 5,
image: closeGripPullups,
},
{
name: "assisted pullups",
sets: 3,
reps: 7,
image: assistedPullups,
},
{
name: "assisted chinups",
sets: 3,
reps: 7,
image: assistedChinups,
},
{
name: "scapula shrugs",
sets: 3,
reps: 10,
image: scapulaShrugs,
},
{
name: "australian pullups",
sets: 3,
reps: 25,
image: australianPullups,
},
],
},
{
name: "legs",
image: legs,
exercise: [
{
name: "squats",
sets: 3,
reps: 50,
image: squats,
},
{
name: "lunges",
sets: 3,
reps: 50,
image: lunges,
},
{
name: "calf raises",
sets: 3,
reps: 50,
image: calfRaises,
},
{
name: "jump squats",
sets: 3,
reps: 20,
image: jumpSquats,
},
{
name: "jump lunges",
sets: 3,
reps: 20,
image: jumpLunges,
},
{
name: "pistol squats",
sets: 3,
reps: 5,
image: pistolSquats,
},
{
name: "single leg calf raises",
sets: 3,
reps: 20,
image: singleLegCalfRaises,
},
],
},
{
name: "core",
image: core,
exercise: [
{
name: "plank",
sets: 3,
time: "90 seconds",
image: plank,
},
{
name: "side plank",
sets: 3,
time: "60 seconds",
image: sidePlank,
},
{
name: "reverse plank",
sets: 3,
time: "60 seconds",
image: reversePlank,
},
{
name: "russian twists",
sets: 3,
reps: 40,
image: russianTwists,
},
{
name: "leg raises",
sets: 3,
reps: 40,
image: legRaises,
},
{
name: "bicycle crunches",
sets: 3,
reps: 40,
image: bicycleCrunches,
},
{
name: "flutter kicks",
sets: 3,
reps: 40,
image: flutterKicks,
},
{
name: "chair situps",
sets: 3,
reps: 40,
image: chairSitups,
},
{
name: "v situps",
sets: 3,
reps: 20,
image: vSitups,
},
{
name: "crucifix",
sets: 3,
reps: 20,
image: crucifix,
},
{
name: "side plank up and down",
sets: 3,
reps: 15,
image: sidePlankUpAndDown,
},
],
},
{
name: "cardio",
image: cardio,
exercise: [
{
name: "jumping jacks",
time: "45 seconds",
image: jumpingJacks,
},
{
name: "high knees",
time: "45 seconds",
image: highKnees,
},
{
name: "butt kicks",
time: "45 seconds",
image: heelFlicks,
},
{
name: "burpees",
reps: 10,
image: jumpingJacks,
},
{
name: "mountain climbers",
time: "45 seconds",
image: crossMountainClimbers,
},
{
name: "jump rope",
time: "45 seconds",
image: jumpRope,
},
{
name: "sprint",
time: "20 seconds",
image: running,
},
{
name: "explosive pushups",
time: "30 seconds",
image: explosivePushups,
},
{
name: "jump squats",
time: "30 seconds",
image: jumpSquats,
},
],
},
],
cooldown: [
{
name: "toe touch",
time: "20 seconds",
sets: 2,
image: toeTouch,
},
{
name: "toe touch with leg spread",
time: "20 seconds",
sets: 2,
image: toeTouchWithLegSpread,
},
{
name: "single leg hamstring stretch",
time: "20 seconds",
sets: 2,
image: singleLegHamstringStretch,
},
{
name: "butterfly stretch",
time: "20 seconds",
sets: 1,
image: butterflyStretch,
},
{
name: "knee to chest",
time: "5 seconds",
sets: 4,
image: kneeToChest,
},
{
name: "waist twist",
time: "10 seconds",
sets: 2,
image: waistTwist,
},
{
name: "cobra stretch",
time: "20 seconds",
sets: 1,
image: cobraStretch,
},
],
},
Here are the corresponding styles
.pressed-2,
.pressed-2:hover {
animation: press-2 0.3s ease-in-out !important;
}
@keyframes press-2 {
0% {
transform: scale(1);
box-shadow: 1px 10px 5px 1px #c471ed;
}
50% {
transform: translateY(5px);
box-shadow: 3px 4px 5px 1px #24fe41;
}
100% {
transform: scale(1) translateX(0) translateY(0);
box-shadow: 1px 10px 5px 1px #c471ed;
}
}
.increase-shadow-on-hover {
box-shadow: 1px 3px 5px 1px #12c2e9 !important;
transition: all 0.3s ease !important;
}
.increase-shadow-on-hover:hover {
box-shadow: 1px 10px 5px 1px #c471ed !important;
transform: translateY(-5px) !important;
transition: all 0.3s ease !important;
}
In the other places, the same thing is working properly. For eg:
const WorkoutCard = ({
image,
name,
btnContent,
btnAction,
isDelete,
deleteAction,
}) => {
const [classNames, setClassNames] = useState("increase-shadow-on-hover");
return (
<Stack
className={classNames}
alignItems="center"
sx={{
width: "260px",
height: "240px",
borderRadius: "30px",
p: "10px",
background: "rgba(10, 18, 38, 1)",
position: "relative",
}}>
<img
src={image}
alt="image"
style={{
width: "100%",
height: "70%",
borderRadius: "30px",
}}
/>
<Stack
alignItems="center"
spacing={1}
sx={{
width: "100%",
background: "rgba(10, 18, 38, 1)",
position: "absolute",
bottom: "7px",
pt: "2px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-2"
sx={{
width: "100%",
color: "#fff",
textTransform: "capitalize",
textAlign: "center",
fontSize: "18px",
}}>
{name}
</Typography>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
size="medium"
variant="outlined"
className="gradient-text-5"
onClick={() => {
setClassNames("pressed-2");
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
btnAction();
}, 300);
}}>
{btnContent}
</Button>
{isDelete && (
<DeleteIcon
onClick={() => {
setClassNames("pressed-2");
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
deleteAction();
}, 300);
}}
sx={{
color: "#ff3232",
ml: "10px",
cursor: "pointer",
}}
/>
)}
</Stack>
</Stack>
</Stack>
);
};
Here is the full code of the component that isn't working properly, if you need:)
const RoutineSection = ({
chosenRegimeData,
addWorkout,
removeWorkout,
hide,
setHide,
rows,
columns,
handleCellEditStop,
}) => {
const [chosenRoutine, setChosenRoutine] = useState("");
useEffect(() => {
setChosenRoutine("");
}, []);
const showRoutineExercises = (routine) => {
setChosenRoutine(routine);
};
const [classNames, setClassNames] = useState(
"increase-shadow-on-hover routine-card"
);
return (
<Stack
// className="decrease-shadow-on-hover-2"
spacing={5}
alignItems="center"
sx={{
width: "97vw",
background: "rgba(8, 12, 30, 1)",
mt: "120px",
py: "40px",
px: "10px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-4"
sx={{
fontSize: "80px",
fontWeight: "bold",
mb: "20px",
}}>
Routines
</Typography>
{chosenRoutine === "" ? (
<Stack
sx={{
px: "30px",
py: "20px",
pb: "40px",
borderRadius: "30px",
}}>
<Stack
direction="row"
sx={{
justifyContent: "center",
gap: "80px",
flexWrap: "wrap",
}}>
{chosenRegimeData.routine.map((routine, index) => (
<Box
key={index}
sx={{
borderRadius: "30px",
}}>
<Box
className={classNames}
sx={{
display: "grid",
width: "400px",
height: "370px",
borderRadius: "30px",
p: "10px",
background: "rgba(10, 18, 38, 1)",
position: "relative",
}}>
<img
src={routine.image}
alt="image"
style={{
width: "100%",
height: "70%",
borderRadius: "30px",
}}
/>
<Stack
alignItems="center"
spacing={1}
sx={{
width: "100%",
background: "rgba(10, 18, 38, 1)",
position: "absolute",
bottom: "20px",
pt: "2px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-2"
sx={{
width: "100%",
color: "#fff",
textTransform: "capitalize",
textAlign: "center",
fontSize: "24px",
}}>
{routine.name}
</Typography>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
size="large"
variant="outlined"
className="gradient-text-5"
onClick={() => {
setClassNames("pressed-2");
console.log("pressed", index);
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
showRoutineExercises(routine);
}, 300);
}}>
See Exercises in this Routine
</Button>
</Stack>
</Stack>
</Box>
</Box>
))}
</Stack>
<Stack
direction="row"
className="datagrid-container"
sx={{
mt: "150px !important",
height: "fit-content",
width: "fit-content",
display: "grid",
placeItems: "center",
mx: "auto !important",
}}>
<DataGrid
onRowClick={(params, event) => {
console.log(params, event);
setHide((prev) => (prev === "hide" ? "" : ", hide"));
}}
// initialState={{
// pagination: {
// paginationModel: { pageSize: 5, page: 0 },
// },
// }}
onCellEditStop={handleCellEditStop}
rows={rows}
columns={columns}
sx={{
color: "#fff",
height: "fit-content",
}}
/>
<DeleteIcon
onClick={() => {}}
className={hide}
sx={{
width: "40px",
height: "40px",
color: "#ff3232",
ml: "10px",
cursor: "pointer",
}}
/>
</Stack>
</Stack>
) : (
<ExercisesOfRoutine
routine={chosenRoutine}
addFunction={addWorkout}
removeFunction={removeWorkout}
setChosenRoutine={setChosenRoutine}
handleCellEditStop={handleCellEditStop}
rows={rows}
columns={columns}
hide={hide}
setHide={setHide}
/>
)}
</Stack>
);
};
