React

Props

props-challenge-output.png

const Avatar = ({ isActive, size, shape, imageUrl, userName }) => {
  const borderRadius = { square: 0, rounded: 10, circle: size / 2 };

  return (
    <img
      src={imageUrl}
      style={{
        borderStyle: "solid",
        borderWidth: 3,
      }}
    />
  );
};

const App = () => <Avatar imageUrl="https://i.pravatar.cc/150?img=2" />;

export default App;


const Avatar = ({ isActive, size, shape, imageUrl, userName }) => {
  const borderRadius = { square: 0, rounded: 10, circle: size / 2 };

  const borderColor = isActive ? "lightgreen" : "lightgrey";

  return (
    <img
      alt={userName}
      height={size}
      src={imageUrl}
      width={size}
      style={{
        borderRadius: borderRadius[shape],
        borderColor,
        borderStyle: "solid",
        borderWidth: 3,
      }}
    />
  );
};

const App = () => (
  <Avatar
    isActive
    imageUrl="https://i.pravatar.cc/150?img=2"
    shape="circle"
    size={90}
    userName="Oliver"
  />
);

export default App;
