terminal.tsx

const Terminal = () => {
  return (
    <TerminalContainer>
      <TerminalControls>
        <Control style={{ backgroundColor: '#FF5F56' }} />
        <Control style={{ backgroundColor: '#FFBD2E' }} />
        <Control style={{ backgroundColor: '#27C93F' }} />
      </TerminalControls>
      <TerminalCommand>yarn add @frogress/line</TerminalCommand>
    </TerminalContainer>
  )
}
const TerminalContainer = styled.div`
  margin-top: 36px;
  padding: 18px 18px 24px;
  border-radius: 5px;
  background-color: rgb(0, 34, 64);
  display: flex;
  flex-direction: column;
`
const TerminalControls = styled.div`
  display: flex;
`
const Control = styled.div`
  height: 12px;
  width: 12px;
  border-radius: 50%;

  &:not(:first-of-type) {
    margin-left: 7px;
  }
`
const TerminalCommand = styled.span`
  margin-top: 16px;
  padding: 0 4px;
  color: white;
`