There is a component mapping card elements that look like this:
https://i.stack.imgur.com/CktsE.png
The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then set the height of the other cards to match it? I tried the following code snippet but it doesn't seem to work, possibly because it lacks access to the actual rendered size:
Code:
const [maxHeight, setMaxHeight] = useState<number | undefined>();
useEffect(() => {
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
if (maxHeight) {
if (card.getBoundingClientRect().height > maxHeight) {
setMaxHeight(card.getBoundingClientRect().height);
}
}
});
}, []);
return (
<div className="grid grid-cols-1 gap-6 px-2 mx-auto md:grid-cols-3">
{BestPractices.map((bestPractice) => (
<Link href={bestPractice.href} key={bestPractice.name}>
<div
style={{ height: maxHeight }}
className="relative p-6 transition-all ease-in-out border rounded-lg drop-shadow-card duration-120 hover:border-brand-dark border-slate-100 bg-slate-100 hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
<div
className={clsx(
// base styles independent what type of button it is
"absolute right-6 rounded-full px-3 py-1 text-xs lg:text-sm",
// different styles depending on type
bestPractice.category === "Boost Retention" &&
"bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",
bestPractice.category === "Increase Revenue" &&
"bg-blue-100 text-blue-500 dark:bg-blue-800 dark:text-blue-200",
bestPractice.category === "Understand Users" &&
"bg-orange-100 text-orange-500 dark:bg-orange-800 dark:text-orange-200"
)}>
{bestPractice.category}
</div>
<div className="w-12 h-12">
<bestPractice.icon className="w-12 h-12 " />
</div>
<h3 className="mt-3 mb-1 text-xl font-bold text-slate-700 dark:text-slate-200">
{bestPractice.name}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400">{bestPractice.description}</p>
</div>
</Link>
))}
</div>
)
EDIT: Utilizing server components.