Add padding based on isReverse prop (image on top or bottom) of hero on smaller screens

minimalsm · minimalsm · commit ce042390790d · 2023-06-06T18:33:11.000+01:00
diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
@@ -56,8 +56,8 @@ const PageHero: React.FC<IProps> = ({
       >
         <Box
           maxW={{ base: "full", lg: "container.sm" }}
-          pt={{ base: 0, lg: 32 }}
-          pb={{ base: 8, lg: 32 }}
+          pt={{ base: isReverse ? 0 : 8, lg: 32 }}
+          pb={{ base: isReverse ? 8 : 0, lg: 32 }}
           pl={{ base: 0, lg: 8 }}
           mr={{ base: "0px", lg: 4 }}
         >

Original file line number	Diff line number	Diff line change
`@@ -56,8 +56,8 @@ const PageHero: React.FC<IProps> = ({`
`56`	`56`	`>`
`57`	`57`	`<Box`
`58`	`58`	`maxW={{ base: "full", lg: "container.sm" }}`
`59`		`- pt={{ base: 0, lg: 32 }}`
`60`		`- pb={{ base: 8, lg: 32 }}`
	`59`	`+ pt={{ base: isReverse ? 0 : 8, lg: 32 }}`
	`60`	`+ pb={{ base: isReverse ? 8 : 0, lg: 32 }}`
`61`	`61`	`pl={{ base: 0, lg: 8 }}`
`62`	`62`	`mr={{ base: "0px", lg: 4 }}`
`63`	`63`	`>`