Кто сможет помочь с версткой в React.js

Question

Функционал простой я нажимаю на кнопку и с помощью "transform" скрываю один контент и показываю другой и обратное когда на другую кнопку нажимаю. Проблема не получается реализовать верстку в React.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title></title>
</head>
<body>
    <div class="container">
        <div class="elem-1">
            <button class="btn" id="next">NEXT PAGE</button>
        </div>
        <div class="elem-2">
            <button class="btn" id="prev">PREVIOUS PAGE</button>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Iusto ut, autem ad nobis. Totam pariatur natus eveniet dolore sed, dolores atque consequatur ducimus consequuntur minus vel ipsum ab molestiae enim. Quis, repudiandae, aperiam? Suscipit, ad quo adipisci eos consequatur commodi soluta odio dicta fugit! Ipsa vel ad laudantium veritatis eum veniam sed error, illo quas esse optio similique, officia eius.</p>
        </div>
    </div>

    <script src="./codewars.js"></script>
</body>
</html>

style.css

.container {
        position: relative;
        width: 300px;
        background: gray;
        font-size: 20px;
        overflow: hidden;
    }

.btn {
    position: absolute;
    cursor: pointer;
}

.elem-1 {
    transition: 1s ease-out;
}

.elem-2 {
    transition: 1s ease-out;
    transform: translateX(100%);
}

codewars.js

const next = document.querySelector('#next')
    const prev = document.querySelector('#prev')
    const elem1 = document.querySelector('.elem-1')
    const elem2 = document.querySelector('.elem-2')

const showNextPage = () => {
    elem1.style.transform = 'translateX(-100%)'
    elem2.style.transform = 'translateX(0%)'
}

const showPrevPage = () => {
    elem1.style.transform = 'translateX(0%)'
    elem2.style.transform = 'translateX(100%)'
}

next.addEventListener('click', showNextPage)
prev.addEventListener('click', showPrevPage)

Вот код на React.js

import {FaTimes, FaArrowRight, FaArrowLeft} from 'react-icons/fa'

import sty from './TourItem.module.css'
import nyc from './../assets/nyc.jpg'

const TourItem = () => {
    return <div className={sty.wrapper}>
        <div className={sty.elem_1}>
            <img src={nyc} />
            <FaTimes className={sty.icon} />
            <button className={sty.btn}>INFO <FaArrowRight /></button>

            <h1>New York</h1>
            <h3>New York Bridge Tour</h3>
        </div>

        <div className={sty.elem_2}>
            <button className={sty.back}><FaArrowLeft /> BACK</button>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing, elit.Iusto ut, autem ad nobis.Totam pariatur natus eveniet dolore sed, dolores atque consequatur ducimus consequuntur minus vel ipsum ab molestiae enim.Quis, repudiandae, aperiam? Suscipit, ad quo adipisci eos consequatur commodi soluta odio dicta fugit!Ipsa vel ad laudantium veritatis eum veniam sed error, illo quas esse optio similique, officia eius.
            </p>
        </div>
    </div>
}

export default TourItem

И TourItem.module.css

.wrapper {
    position: relative;
    width: 300px;
    background: lightgray;
    overflow: hidden;
}

.elem_1 {
    border: 1px solid red;
    margin: 1rem 1rem;
    transform: translateX(0%);
    transition: 1s ease-out;
}

img {
    width: 100%;
}

.icon {
    position: absolute;
    top: calc(100% - 95%);
    right: calc(100% - 93.5%);
    font-size: 1.3rem;
}
.icon:hover {
    color: red;
}

.btn {
    position: absolute;
    top: calc(100% - 94.5%);
    left: calc(100% - 93%);
    font-size: 0.7rem;
    cursor: pointer;
}

.elem_2 {
    border: 2px solid yellow;
    position: absolute;
}

.back {
    font-size: 0.7rem;
}

БЛОГ НА HUSL

Кто сможет помочь с версткой в React.js

Ответы (0 шт):