Molecules

Bardziej złożone komponenty takie jak elementy listy czy inputy.

Input.js

import React from 'react';
import { Button } from 'components/atoms/Button/Button';
import { Wrapper, StyledInput } from './Input.styles';
import { ReactComponent as SearchIcon } from 'assets/icons/search.svg';

const Input = (props) => {
  return (
    <Wrapper>
      <StyledInput placeholder="Szukaj" onChange={(e) => props.changeValue(e.target.value)} />
      <Button>
        <SearchIcon />
      </Button>
    </Wrapper>
  );
};

export default Input;

Input.styles.js

import styled from 'styled-components';
import { Button } from 'components/atoms/Button/Button';

export const Wrapper = styled.div`
  display: flex;
  align-items: center;
  margin: 0 7px;
  padding: 5px;
  height: 60px;
  border-radius: 10px 10px 0 0;
  background-color: ${({ theme }) => theme.colors.bateau};
  box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.25);

  ${Button} {
    width: 56px;
    height: 50px;
    border-radius: 0 5px 5px 0;

    svg {
      width: 27px;
      height: 27px;
    }
  }
`;

export const StyledInput = styled.input`
  padding: 15px;
  width: 100%;
  height: 100%;
  font-size: ${({ theme }) => theme.fontSize.m};
  border-radius: 5px 0 0 5px;
  border: none;
  outline: none;
`;