I am trying to change the header part of my react app dynamically.
I want a different font size, font weight, title, and subtitle for the homepage and other pages of my react web app.
This is what I want on the homepage.
Hello there should be smaller on Homepage but Welcome Back should be large
This is what I want on other pages.
Hello there should be bigger on Homepage but lorem ipsum lorem ipsum should be small
This is my code for the homepage heading
const Hero = ({ fontSize, fontWeight, title, subTitle }) => {
return (
<div className="mt-2 mb-8">
<p className="font-heading text-lg font-normal text-white">Hello There 👋,</p>
<p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
// another react component
</div>
)
}
export default Hero
I want to know how to change this code dynamically so I can use it for other pages bypassing different props for font weight, font size, title, and subtitle. I am using react and tailwind css
Anyone Please help me with this issue. Thank You Edited:
{pathName === '/' ? (
<>
<p className="font-heading text-lg font-normal text-white">`Hello There 👋,</p>
<p className="font-heading text-3xl font-semibold text-white">{subTitle}</p>
</>
) : (
<>
<p className="font-heading text-3xl font-semibold text-white">Hello There 👋,</p>
<p className="font-heading text-lg font-normal text-white">subTitle</p>
</>
)}