React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
}

.card {
  margin: 20px auto;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.button {
  border-radius: 20px;
  text-align: center;
  padding: 10px;
  color: white;
  border: 1px solid teal;
  background: teal;
}

.link {
  text-align: center;
  color: teal;
}

React

function App() {
	return (
  	<React.Fragment>
      <CardWithAction actionType='button' actionText='Button' />
      <CardWithAction actionType='link' actionText='Link' />
      <CardWithAction2>
        <Button>
          Button
        </Button>
      </CardWithAction2>
      <CardWithAction2>
        <Link>
          Link
        </Link>
      </CardWithAction2>
    </React.Fragment>
  );
}

// - passing a component prop
function CardWithAction2({ children }) {
	return (
  	<div className='card'>
  	  { children }
  	</div>
  );
}

// - passing a conditional prop
function CardWithAction({ actionType, actionText }) {
	let actionComponent;
	if (actionType === 'button') {
  	actionComponent = (
    	<Button>
    	  { actionText }
    	</Button>
    );
  } else {
    actionComponent = (
      <Link>
        { actionText }
      </Link>
    );
  }
  
	return (
  	<div className='card'>
  	  { actionComponent }
  	</div>
  );
}

function Button({ children }) {
	return (
  	<div className='button'>
  	  { children }
  	</div>
  );
}

function Link({ children }) {
	return (
  	<div className='link'>
  	   { children }
  	</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))