andrzejewsky

.item:hover ~ .item {
   transform: translateX(25%);
}

andrzejewsky

.item:hover {
  transform: scale(1.5) !important;
}

andrzejewsky

  <div class="content">
    <div class="background">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="content-container">content here...</div>
  </div>

andrzejewsky

.content {
  margin-top: 40px;
  height: 300px;
  position: relative;
}

.background {
  display: flex;
  height: 100%;
}

andrzejewsky

import React, { useState } from 'react';
import cx from 'classnames';
import SliderContext from './context'
import Content from './Content'
import SlideButton from './SlideButton'
import SliderWrapper from './SliderWrapper'
import useSliding from './useSliding'
import useSizeElement from './useSizeElement'
import './Slider.scss'

andrzejewsky

import React from 'react';
import cx from 'classnames';
import SliderContext from './context'
import ShowDetailsButton from './ShowDetailsButton'
import Mark from './Mark'
import './Item.scss'

const Item = ({ movie }) => (
  <SliderContext.Consumer>
    {({ onSelectSlide, currentSlide, elementRef }) => {

andrzejewsky

import { useState, useRef, useEffect } from 'react'

const useSizeElement = () => {
  const elementRef = useRef(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    setWidth(elementRef.current.clientWidth);
  }, [elementRef.current]);

andrzejewsky

import { useState, useRef, useEffect } from 'react'

const PADDINGS = 110;

const useSliding = (elementWidth, countElements) => {
  const containerRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState(0);
  const [distance, setDistance] = useState(0);
  const [totalInViewport, setTotalInViewport] = useState(0)
  const [viewed, setViewed] = useState(0);

andrzejewsky

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const AddTodo = ({ onClickAdd }) => {
  const [todo, setTodo] = useState({ name: "", checked: false });

  const handleChangeTodo = evt => {
    setTodo({ name: evt.target.value, checked: false });
  };

andrzejewsky

import React, { useState, useCallback, useContext, useReducer } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const TodoContext = React.createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];