Molecules

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

ListItem.js

import React from 'react';
import { Wrapper } from './ListItem.styles';

const ListItem = ({ elem, address, setId }) => {
  return (
    <Wrapper to={address} onClick={() => setId(elem.id)}>
      {elem.name}
    </Wrapper>
  );
};

export default ListItem;

ListItem.styles.js

import styled from 'styled-components';
import { NavLink } from 'react-router-dom';

export const Wrapper = styled(NavLink)`
  display: flex;
  align-items: center;
  height: 50px;
  color: ${({ theme }) => theme.colors.black};
  font-size: ${({ theme }) => theme.fontSize.m};
  text-decoration: none;

  &:not(:last-of-type) {
    border-bottom: 2px solid ${({ theme }) => theme.colors.lightGray};
  }
`;