I need help setting dynamic CSS, can someone please guide me on the code snippet where I am supposed to set it?
export default function DynamicCard({
title,
background = "#2B5CEA",
icon,
href,
}: DynamicCardProps) {
return (
<Link
href={href}
rel="noreferrer"
target="_blank"
className={`hover:bg-[${background}] p-2 rounded-xl text-gray-400 bg-gray-800 hover:shadow-xl transition-all flex items-center`}
>
<span
className="inline-flex items-center justify-center w-8 h-8 md:w-11 md:h-11 bg-gray-800 rounded-lg mr-3 shrink-0"
style={{ backgroundColor: background }}
>
<span className="relative w-4 h-4 md:w-6 md:h-6">
<Image
src={icon}
fill
alt={title}
/>
</span>
</span>
<h4 className="text-sm md:text-base lg:text-lg font-bold text-gray-200 truncate">
{title}
</h4>
</Link>
);
}
and here is how I am sending props:
<DynamicCard
title="VS Code"
background="#0065A9"
icon="/svg/stacks/vscode.svg"
href="https://code.visualstudio.com/"
/>
<DynamicCard
title="Github"
background="#070A52"
icon="/svg/stacks/github.svg"
href="https://hyper.is/"
/>
The issue I'm facing is that the background color works fine in the VS Code card but not in the Github card. Can anyone help understand why this is happening?