I want to change the size of a button on the basis of props data if props data is there then the button size should be different and if props data is not there then button size should be different.

<div className='projectBtn'>
  <a href={props.liveWebsite} target='_blank'>
    <button className='liveWebsiteBtn'>Live Website</button>
  </a>

  <a href={props.github} target='_blank'>
    <button className='githubBtn' hidden={!props.github}>
      Github Code
    </button>
  </a>
</div>;

Why I am supposed to hidden because if there is no data then the GitHub button should be disabled.

Here is my data source file Sdata.jsx

const Sdata = [
{
    imgsrc: jokes,
    title: "Jokes Web App using API",
    desc: "This React-JS Jokes App built up using API.",
    tech1: "React",
    tech2: "Jokes API",
    tech3: "Axios",
    tech4: "Github",
    liveWebsite:"example.com",
    github: "example.com"
},