Components

import React from 'react';

const PlusButton = ({ size, status }) => {

  const buttonClass = `plus-button ${size} ${status}`;

  return (

    <button className={buttonClass} disabled={status === 'Disabled'}>

      +

    </button>

  );

};

export default PlusButton;

import React from 'react';

const TextField = ({ placeholder }) => (

  <input type="text" placeholder={placeholder} />

);

const EmailField = ({ placeholder }) => (

  <input type="email" placeholder={placeholder} />

);

const PasswordField = ({ placeholder }) => (

  <input type="password" placeholder={placeholder} />

);

export { TextField, EmailField, PasswordField };

import React from 'react';

const Toggle = ({ status }) => {

  const toggleClass = status === 'On' ? 'toggle-on' : 'toggle-off';

  return (

    <div className={`toggle ${toggleClass}`}>

      <span>{status}</span>

    </div>

  );

};

export default Toggle;