All buttons should take the same size as the one with most content
I have a grid setup here having 2 colums and I am passing buttons with different content size inside them , The problem is whenever the screen size is reduced the buttons become uneven and I want to avoid that any help regarding this will be appreciated thanks
1 Reply
This is the buttons code
import React from "react";
import { useTranslation } from 'react-i18next';
export default function CustomButton({ children, onClick, maxWidth, selected, value, def ,buttonStyle}) {
const { t } = useTranslation();
const activeColor =
bg-gradient-to-b from-white to-yellow-400 to-10%;
const color = bg-[#e8e2e3];
const buttonName = children.split("-")?.join(" ")
console.log(buttonName)
const dynamicPadding = ${children.split(" ").length > 1 ? "py-2" : "py-2"}; // Adjust this condition as needed
return (
<button
ref={def}
className={${selected === children ? activeColor : color} w-full max-w-[${maxWidth}] ${dynamicPadding} px-2 uppercase md:text-2xl text-sm
font-bold rounded-lg hover:bg-gradient-to-b from-white to-yellow-400 to-10% select-none}
onClick={() => onClick(value ? value : children)}
style={buttonStyle}
>
{t(children.split("-")?.join(" "))}
</button>
);
}
This is the layout component that is setting up the grid
import React, { useContext, useEffect, useState } from "react";
import UserContext from "../../context/UserContext";
export default function GridLayout({children , title, onChange,selected, otherFieldValue }) {
const {setIsVisible } = useContext(UserContext)
useEffect(()=>{
setIsVisible(true)
},[])
return (
<div className="w-full h-full flex flex-col gap-4 items-center">
<label className='font-bold text-md md:text-5xl text-yellow-500 underline uppercase'>{title}</label>
<div className="md:w-4/6 lg:w-4/6 w-full h-full flex flex-col items-center gap-5">
<div className="grid grid-cols-2 gap-x-10 gap-y-3 w-4/6 p-2 overflow-auto scrollbar-thin scrollbar-track-slate-200 scrollbar-thumb-gray-800 ">
{children}
</div>
{selected === "other" && (
<div className="flex flex-col gap-2 items-center">
<label className="text-white text-2 xl font-semibold flex gap-2 items-center">Explanation:
<input
type="text"
value={otherFieldValue}
onChange={(e)=>onChange(e)}
className="p-2 rounded-lg text-black"
/>
</label>
</div>
)}
</div>
</div>
);
}