How to make React Styled Component Responsive - javascript

I got this very beautiful and sleek sign-in/sign-up form with React Styled Component from Youtube. However, it is not responsive. I have tried using my inspector tool to manipulate every single css detail but it just doesn't work.
Should I give up on using the sleek form/ It's the best I've seen so far.
This is the Styled Component.js
import styled from 'styled-components';
export const Container = styled.div`
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
position: fixed;
overflow: hidden;
width: 678px;
max-width: 100%;
height: 500px;
`;
export const SignUpContainer = styled.div`
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
${props => props.signinIn !== true ? `
transform: translateX(100%);
opacity: 1;
z-index: 5;
`
: null}
`;
export const SignInContainer = styled.div`
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
left: 0;
width: 50%;
z-index: 2;
${props => (props.signinIn !== true ? `transform: translateX(100%);` : null)}
`;
export const Form = styled.form`
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
`;
export const Title = styled.h1`
font-weight: bold;
margin: 0;
`;
export const Input = styled.input`
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
`;
export const Button = styled.button`
border-radius: 20px;
border: 1px solid #ff4b2b;
background-color: #ff4b2b;
color: #ffffff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
&:active{
transform: scale(0.95);
}
&:focus {
outline: none;
}
`;
export const GhostButton = styled(Button)`
background-color: transparent;
border-color: #ffffff;
`;
export const Anchor = styled.a`
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
`;
export const OverlayContainer = styled.div`
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
${props =>
props.signinIn !== true ? `transform: translateX(-100%);` : null}
`;
export const Overlay = styled.div`
background: #ff416c;
background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
background: linear-gradient(to right, #ff4b2b, #ff416c);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #ffffff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
${props => (props.signinIn !== true ? `transform: translateX(50%);` : null)}
`;
export const OverlayPanel = styled.div`
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
`;
export const LeftOverlayPanel = styled(OverlayPanel)`
transform: translateX(-20%);
${props => props.signinIn !== true ? `transform: translateX(0);` : null}
`;
export const RightOverlayPanel = styled(OverlayPanel)`
right: 0;
transform: translateX(0);
${props => props.signinIn !== true ? `transform: translateX(20%);` : null}
`;
export const Paragraph = styled.p`
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px
`;
This is how I implement it on my Auth2.js (the reason for Auth2 is because I had created an Auth.js but I just want to use this new sign-in/up form which is very sick).
import React from "react";
import Modal from "../Modal/AuthModal";
import * as Components from "./Components";
function Auth2() {
const [signIn, toggle] = React.useState(true);
return (
<Modal>
<Components.Container>
<Components.SignUpContainer signinIn={signIn}>
<Components.Form>
<Components.Title>Create Account</Components.Title>
<Components.Input type="text" placeholder="Name" required />
<Components.Input type="email" placeholder="Email" required />
<Components.Input type="password" placeholder="Password" required />
<Components.Input
type="number"
placeholder="Phone number"
required
/>
<Components.Input type="text" placeholder="Address" required />
<Components.Button>Sign Up</Components.Button>
</Components.Form>
</Components.SignUpContainer>
<Components.SignInContainer signinIn={signIn}>
<Components.Form>
<Components.Title>Sign in</Components.Title>
<Components.Input type="email" placeholder="Email" />
<Components.Input type="password" placeholder="Password" />
<Components.Anchor href="#">
Forgot your password?
</Components.Anchor>
<Components.Button>Sigin In</Components.Button>
</Components.Form>
</Components.SignInContainer>
<Components.OverlayContainer signinIn={signIn}>
<Components.Overlay signinIn={signIn}>
<Components.LeftOverlayPanel signinIn={signIn}>
<Components.Title>Welcome Back!</Components.Title>
<Components.Paragraph>
To keep connected with us please login with your personal info
</Components.Paragraph>
<Components.GhostButton onClick={() => toggle(true)}>
Sign In
</Components.GhostButton>
</Components.LeftOverlayPanel>
<Components.RightOverlayPanel signinIn={signIn}>
<Components.Title>Hello, Friend!</Components.Title>
<Components.Paragraph>
Enter Your personal details and start journey with us
</Components.Paragraph>
<Components.GhostButton onClick={() => toggle(false)}>
Sigin Up
</Components.GhostButton>
</Components.RightOverlayPanel>
</Components.Overlay>
</Components.OverlayContainer>
</Components.Container>
</Modal>
);
}
export default Auth2;
I passed it into a custom Modal.js reusable Component I made;
import { Fragment } from "react";
import classes from "./AuthModal.module.css";
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onClose} />;
};
const ModalOverlay = (props) => {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.children}</div>
</div>
);
};
const Modal = (props) => {
return (
<Fragment>
<Backdrop onClose={props.onClose} />
<ModalOverlay>{props.children}</ModalOverlay>
</Fragment>
);
};
export default Modal;
The AuthModal.module.css file
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
background-color: rgba(0, 0, 0, 0.8);
}
.modal {
position: relative;
top: 250px;
left: 5%;
width: 90%;
padding: 1rem;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
z-index: 30;
animation: slide-down 300ms ease-out forwards;
}
#media (min-width: 768px) {
.modal {
width: 40rem;
left: calc(50% - 20rem);
}
}
#keyframes slide-down {
from {
opacity: 0;
transform: translateY(-3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
In the styled component, I tried using the display: flex but nothing happened. I also use inspector tool to see if I could manipulate all and sundry --- you guessed it - Nothing happened!
Please how do I make my sign in/out responsive? Please!

Related

Why is my Styled-Components (React dependacy) not working?

Actually, I have two questions
The First one is that Why is the following code using styled-components not working, I removed node modules, installed it again globally etc and it's not working. The output render is blank.
Am I using the Pseudo classes correctly in styled components If not please show me
I would really appreciate it if you could show me through the code I have.
I will List my Js file plus the desired CSS below,
I only want the CSS through styled-components
import React, { useRef} from "react";
import ReactDOM from 'react-dom/client';
import Home from "../Dashboard/Home";
import App from '../../App';
import Bye from "./Login"
import styled from "styled-components"
function Register(){
const name=useRef()
const email=useRef()
const password=useRef()
const root = ReactDOM.createRoot(document.getElementById('root'));
const handleClick=()=>{
if(name.current.value&&email.current.value&&password.current.value)
{
localStorage.setItem("name",name.current.value)
localStorage.setItem("email",email.current.value)
localStorage.setItem("password",password.current.value)
localStorage.setItem("signUp",email.current.value)
alert("Account created successfully!!")
root.render(
<React.StrictMode>
<Home/>
</React.StrictMode>
);
}
}
const goHome=()=>{
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
}
const handleSignIn=()=>{
root.render(
<React.StrictMode>
<Bye />
</React.StrictMode>
);
}
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
`
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
&:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
animation: animate 6s linear infinite
}
`
const Title = styled.h2`
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
`
return(
<Body>
<Box>
<div className="form">
<Title>Hello Lets Get you Started</Title>
<div className="inputBox">
<input type="text"required="required" ref={name}/>
<span>Your Full Name: </span>
<i></i>
</div>
<div className="inputBox">
<input type="text"required="required" ref={email}/>
<span>Your Email: </span>
<i></i>
</div>
<div className="inputBox">
<input type="password" required="required" ref={password}/>
<span> Your Password: </span>
<i></i>
</div>
<div class="Links">
<button className="btn-2 btn" onClick={handleSignIn}> Sign In</button>
<button className="btn-3 btn" onClick={goHome}>Return Home</button>
</div>
<button type="submit" className="btn-1" onClick={handleClick}>Sign Up </button>
</div>
</Box>
</Body>
)
}
export default Register;
thats my JS file (not jsx)
below is the desired Css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700,800,900,&display=swap');
.body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
}
.box{
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
}
.title{
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
}
.box::before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
animation: animate 6s linear infinite
}
.box::after{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
.form{
position: absolute;
inset: 2px;
border-radius: 8px;
background: #28292d;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
.inputBox span{
display: flex;
justify-content: space-between;
margin-right: 55px;
margin-top: -60px;
font-size: 18px;
font-weight: 500;
left: 0;
padding: 20px 10px 10px;
pointer-events: none;
letter-spacing: 0.05em;
transition: 0.5s
}
.inputBox{
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input{
position: relative;
width: 165%;
padding: 20px 10px 10px;
background: transparent;
border: none;
text-align: left;
font-weight: 500;
outline: none;
color: black;
font-size: 1em;
letter-spacing: 0.05em;
font-size: 20px;
z-index: 10;
}
.btn-1{
margin-top: 30px;
pointer-events: auto;
cursor: pointer;
}
.Links{
margin-top: 25px;
}
.btn-2{
display: flex;
align-items: left;
margin-top: -10px;
font-size: 1.25em;
border: none;
outline: none;
background: none;
padding: 0;
color: #8f8f8f;
cursor: pointer;
}
.Links button:hover
{
color: #45f3ff;
}
.btn-3{
display: flex;
flex-direction: column;
margin-left: 25rem;
margin-top: -20px;
font-size: 1.25em;
cursor: pointer;
border: none;
outline: none;
background: none;
padding: 0;
color: #8f8f8f;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span
{
color: #45f3ff;
transform: translateY(-44px);
font-size: 1.25em;
}
.inputBox i{
position: absolute;
left: 0;
bottom: -7px;
width: 170%;
height: 2px;
background: #45f3ff;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid ~ i,
.inputBox input:focus ~ i
{
height: 55px;
width: 170%;
top: 2px;
}
.btn-1{
border: none;
outline: none;
background: #45f3ff;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
.btn-1:active{
opacity: 0.8
}
Edit: There seems to be that the code works now randomly but i didnt even put all my css and its giving me the exact output i want weird?
It is important to define your styled components outside of the main react component, otherwise it will be recreated on every single render pass. Defining a styled component within the react component will prevent caching and drastically slow down rendering speed, and should be avoided.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components';
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
`;
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
border-radius: 8px;
overflow: hidden;
&:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
animation: animate 6s linear infinite
}
`;
const Title = styled.h2`
align-items: center;
font-size: 55px;
font-weight: 600;
color: red;
`;
function App() {
const name = useRef();
const email = useRef();
const password = useRef();
const handleClick = () => {
if (name.current.value && email.current.value && password.current.value) {
localStorage.setItem('name', name.current.value);
localStorage.setItem('email', email.current.value);
localStorage.setItem('password', password.current.value);
localStorage.setItem('signUp', email.current.value);
alert('Account created successfully!!');
}
};
const goHome = () => {};
const handleSignIn = () => {
root.render();
};
return (
<Body>
<Box>
<div className='form'>
<Title>Hello Lets Get you Started</Title>
<div className='inputBox'>
<input type='text' required='required' ref={name} />
<span>Your Full Nameeee: </span>
</div>
<div className='input-box'>
<input type='text' required='required' ref={email} />
<span>Your Email: </span>
<i></i>
</div>
<div className='input-box'>
<input type='password' required='required' ref={password} />
<span> Your Password: </span>
</div>
<div className='Links'>
<button className='btn-2 btn' onClick={handleSignIn}>
{' '}
Sign In
</button>
<button className='btn-3 btn' onClick={goHome}>
Return Home
</button>
</div>
<button type='submit' className='btn-1' onClick={handleClick}>
Sign Up{' '}
</button>
</div>
</Box>
</Body>
);
}
export { App };
Here is my solution. Keep styled component outside of Register component.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import Home from '../Dashboard/Home';
import App from '../../App';
import Bye from './Login';
import styled from 'styled-components';
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
`;
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
&:before {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(
0deg,
transparent,
transparent,
#45f3ff,
#45f3ff
);
animation: animate 6s linear infinite;
}
`;
const Title = styled.h2`
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
`;
function Register() {
const name = useRef();
const email = useRef();
const password = useRef();
const root = ReactDOM.createRoot(document.getElementById('root'));
const handleClick = () => {
if (name.current.value && email.current.value && password.current.value) {
localStorage.setItem('name', name.current.value);
localStorage.setItem('email', email.current.value);
localStorage.setItem('password', password.current.value);
localStorage.setItem('signUp', email.current.value);
alert('Account created successfully!!');
root.render(
<React.StrictMode>
<Home />
</React.StrictMode>
);
}
};
const goHome = () => {
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
};
const handleSignIn = () => {
root.render(
<React.StrictMode>
<Bye />
</React.StrictMode>
);
};
return (
<Body>
<Box>
<div className="form">
<Title>Hello Lets Get you Started</Title>
<div className="inputBox">
<input type="text" required="required" ref={name} />
<span>Your Full Name: </span>
<i></i>
</div>
<div className="inputBox">
<input type="text" required="required" ref={email} />
<span>Your Email: </span>
<i></i>
</div>
<div className="inputBox">
<input type="password" required="required" ref={password} />
<span> Your Password: </span>
<i></i>
</div>
<div class="Links">
<button className="btn-2 btn" onClick={handleSignIn}>
{' '}
Sign In
</button>
<button className="btn-3 btn" onClick={goHome}>
Return Home
</button>
</div>
<button type="submit" className="btn-1" onClick={handleClick}>
Sign Up{' '}
</button>
</div>
</Box>
</Body>
);
}
export default Register;
Hope this help you.

How can I make this toggle switch responsive?

I'm trying to make (using React) a toggle switch I found responsive so that I can put it in my app but I'm having trouble refactoring it to resize based on content inside and device width/height.
import { useState } from "react";
import styles from "./ToggleSwitch.module.css";
export default function ToggleSwitch({ choice1, choice2 }) {
const [value, setValue] = useState(choice2);
function handleClick() {
setValue(value => (value === choice1 ? choice2 : choice1));
}
function styleToggleSwitch(value) {
if (value === choice1) {
return { clipPath: "inset(0 0 0 50%)", backgroundColor: "#eb9b30" };
} else {
return { clipPath: "inset(0 50% 0 0)", backgroundColor: "#1464cf" };
}
}
return (
<div id={styles["container"]} onClick={handleClick}>
<div className={styles["inner-container"]}>
<div className={styles["toggle"]}>
<p>{choice2}</p>
</div>
<div className={styles["toggle"]}>
<p>{choice1}</p>
</div>
</div>
<div
className={styles["inner-container"]}
style={
value === choice1
? styleToggleSwitch(choice1)
: styleToggleSwitch(choice2)
}
>
<div className={styles["toggle"]}>
<p>{choice2}</p>
</div>
<div className={styles["toggle"]}>
<p>{choice1}</p>
</div>
</div>
</div>
);
}
#import url("https://fonts.googleapis.com/css?family=Asap:400,500,700");
#container {
width: 160px;
height: 36px;
margin: auto;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
user-select: none;
cursor: pointer;
font-family: "Asap", sans-serif;
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
text-transform: uppercase;
font-size: 0.6em;
letter-spacing: 0.2em;
}
.inner-container:first-child {
background: #e9e9e9;
color: #a9a9a9;
}
.inner-container:nth-child(2) {
background: dodgerblue;
color: white;
clip-path: inset(0 50% 0 0);
transition: 0.3s cubic-bezier(0, 0, 0, 1);
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
box-sizing: border-box;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
When I select the toggle switch buttons they get either the .first or .second class to change their styles. Sorry for using pastebin but Stack Overflow wouldn't allow me to post this much code. Thanks for the help in advance!

Infinite scroll/loop/movement of an image array using React

So I've searched almost everywhere for this, and I guess just the way I've implemented it and want to continue to use it, it's making it difficult to find a solution. Any who I'm trying to have an infinite scroll of the 4 images in my array as slider items. I just don't like the way the component jumps to the first image in the array when it gets to the end. The slider images are controlled by arrows. I'm using styled components so can ignore that code, just wanted to include for full picture of the component.
I think there are packages available to solve this issue, but I would like to know how to code the solution without that assistance. Code below:
import React, { useState } from 'react'
import styled from 'styled-components';
import ArrowLeftIcon from '#mui/icons-material/ArrowLeft';
import ArrowRightIcon from '#mui/icons-material/ArrowRight';
import { sliderItems } from '../data';
import { mobile } from '../responsive';
const Container = styled.div`
width: 100%;
height: 100vh;
display: flex;
position: relative;
overflow: hidden;
`;
const Arrow = styled.div`
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
display: grid;
place-items: center;
position: absolute;
top: 0;
bottom: 0;
left: ${props => props.direction === "left" && "10px"};
right: ${props => props.direction === "right" && "10px"};
margin: auto;
cursor: pointer;
opacity: 0.5;
z-index: 2;
${mobile({width:"30px", height:"30px"})}
`;
const Wrapper = styled.div`
height: 100%;
display: flex;
transform: translateX(${props =>props.slideIndex * -100}vw);
transition: transform 1.5s ease-in-out;
`;
const Slide = styled.div`
width: 100vw;
height: 100%;
display: flex;
align-items: center;
`;
const ImgContainer = styled.div`
height: 100%;
flex: 1;
`;
const Image = styled.img`
width: 100%;
height: 100%;
object-fit: cover;
`;
const InfoContainer = styled.div`
margin-left: 50px;
flex: 1;
padding: 10px;
${mobile({
display: "none"
})}
`;
const Title = styled.h1`
font-size: 60px;
`;
const Desc = styled.p`
margin: 50px 0px;
font-size: 20px;
font-weight: 500;
`;
const Button = styled.button`
padding: 10px;
font-size: 25px;
background-color: transparent;
cursor: pointer;
border-radius: 4px;
transition: all 0.25s ease;
&:hover {
transform: scale(1.05);
color: white;
background-color: black;
}
`;
const Slider = () => {
const [slideIndex, setSlideIndex] = useState(0);
const handleClick = (direction) => {
if(direction === "left"){
setSlideIndex(slideIndex > 0 ? slideIndex - 1 : 3);
}else{
setSlideIndex(slideIndex < 3 ? slideIndex + 1 : 0);
}
};
return (
<Container>
<Arrow direction="left" onClick={() => handleClick("left")}>
<ArrowLeftIcon />
</Arrow>
<Wrapper slideIndex={slideIndex}>
{sliderItems.map(item => (
<Slide key={item.id}>
<ImgContainer>
<Image src={item.img} alt={item.alt}/>
</ImgContainer>
<InfoContainer>
<Title>{item.title}</Title>
<Desc>{item.desc}</Desc>
<Button>Shop Now</Button>
</InfoContainer>
</Slide>
))}
</Wrapper>
<Arrow direction="right" onClick={() => handleClick("right")}>
<ArrowRightIcon />
</Arrow>
</Container>
)
}
export default Slider;
Any help would be appreciated

How to make banner from static to autoplay with react

I have made some pure banner CSS js with react. Right now it's static not autoplay. How to make my banner autoplay properly and responsive for mobile. Autoplay and smooth transition when going to another banner.
This is the code for working static banner without autoplay things :
import { ArrowLeftOutlined, ArrowRightOutlined } from "#material-ui/icons"
import { useState } from 'react'
import styled from "styled-components"
import {sliderItems} from '../data'
const Container = styled.div`
width: 100%;
height: 80vh;
display: flex;
position: relative;
overflow: hidden;
`
const Arrow = styled.div`
width: 50px;
height: 50px;
background-color: #fff7f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: ${props=> props.direction === "left" && "10px"};
right: ${props=> props.direction === "right" && "10px"};
margin: auto;
cursor: pointer;
opacity: 0.5;
z-index: 2;
`
const Wrapper = styled.div`
height: 100%;
display: flex;
transition: all 1.5s ease;
transform: translateX(${props=>props.slideIndex * -100}vw);
`
const Slide = styled.div`
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
background: ${props => `url(${props.bg}) no-repeat top center`};
`
const ImgContainer = styled.div`
height: 80%;
flex: 1;
`
const Image = styled.img`
height: 80%;
`
const Image2 = styled.img`
height: 40%;
`
const InfoContainer = styled.div`
flex: 1;
padding: 50px;
`
const Title = styled.h1`
color: white;
font-size: 70px;
`
const Desc = styled.p`
color: white;
margin: 50px 0px;
font-size: 20px;
font-weight: bold;
letter-spacing: 3px;
`
const Button = styled.button`
border: 1px solid white;
padding: 10px;
font-size: 20px;
color: #0070ba;
background-color: white;
border-radius: 25px;
cursor: pointer;
font-weight: 800;
&:hover{
color: white;
background-color: #0070ba;
}
`
const Banner = () => {
const [slideIndex, setSlideIndex] = useState(0)
const handleClick = (direction) => {
if(direction==="left"){
setSlideIndex(slideIndex > 0 ? slideIndex-1 : 6)
} else {
setSlideIndex(slideIndex < 6 ? slideIndex +1 : 0)
}
}
return (
<Container>
<Arrow direction="left" onClick={()=>handleClick("left")}>
<ArrowLeftOutlined />
</Arrow>
<Wrapper slideIndex={slideIndex}>
{sliderItems.map(item=>(
<Slide bg={item.bg}>
<Image2 src={item.img2}/>
<InfoContainer>
<Title>{item.title}</Title>
<Desc>{item.desc}</Desc>
<Button>COBA SEKARANG</Button>
</InfoContainer>
<ImgContainer>
<Image src={item.img}/>
</ImgContainer>
</Slide>
))}
</Wrapper>
<Arrow direction="right" onClick={()=>handleClick("right")}>
<ArrowRightOutlined />
</Arrow>
</Container>
)
}
export default Banner
Thank you guys for helping!

How do you start new row on left with dynamic content in Reactjs?

I am working on a personal portfolio page using ReactJS. I am currently trying to create a project page that has rows of flipping cards, however, whenever the cards reach their max-width and move to the next line the card always starts in the center of the page when it needs to start on left. I have tried creating a row wrapper to float: left which breaks the application and a multitude of other ways but I would like to see the best way to create dynamic rows and columns from a mapped array and start new rows from the left. added an image to highlight the issue
Projects.js
import React, { Fragment } from 'react';
import Card from '../common/Card/Card';
import { PROJECTS } from "../../shared/constants/projects";
import "./projects.scss";
const Projects = () => {
return (
<Fragment>
<div className="grid">
{
PROJECTS.map((project, i) => {
return (
<Card animatedCard={true} project={project} key={i} />
)
})
}
</div>
</Fragment>
)
}
export default Projects;
projects.scss
.grid {
width: 60%;
text-align: center;
margin: 0 20% 0 20%;
}
Card.js
import React, { Fragment } from 'react';
import CardFront from './CardFront';
import "./card.scss";
import CardBack from './CardBack';
const Card = props => {
return (
<Fragment>
{props.animatedCard ?
<div className="card-container">
<div className="card-body">
<CardBack project={props.project}/>
<CardFront project={props.project} />
</div>
</div> : null
}
</Fragment>
)
}
card.scss
.button-wrapper {
height: 200px;
bottom: 0;
}
.card-container {
display: inline-block;
position: relative;
z-index: 1;
margin: 50px 25px 0px 25px;
width: 300px;
height: 400px;
perspective: 1000px;
}
.card-body {
width: 100%;
height: 100%;
background-color: white;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
.card-container:hover .card-body {
transform: rotateY(180deg);
}
.card-container:hover > .card-body > .side-front {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in, visibility 0.75s linear;
}
.card-side {
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
color: #8e8d8a;
backface-visibility: hidden;
font-family: sans-serif;
text-align: center;
box-shadow: 0 10px 35px rgba(50, 50, 93, 0.1), 0 2px 15px rgba(0, 0, 0, 0.07);
}
.card-header-img {
max-width: 100%;
max-height: 123px;
margin: 0;
padding: 0;
}
.card-technologies {
list-style: none;
width: 70%;
}
.card-technologies-item {
border-bottom: 1px solid #eee;
margin-bottom: 15px;
padding: 0.75rem;
}
.description {
margin: 30px 20px 20px 20px;
font-size: 18px;
font-weight: 400;
height: 240px;
}
.side-front [class^="col-xs"]:first-of-type {
padding-left: 0;
}
.side-back {
z-index: 2;
text-align: center;
transform: rotateY(180deg);
}
This is happening since you are using text-align: center; in your .grid css.
If you remove it all the cards in the row should start at the left end of the row:
.grid {
width: 60%;
margin: 0 20% 0 20%;
}
Another alternative would be making your .grid a flexbox:
.grid {
width: 60%;
margin: 0 20% 0 20%;
display: flex;
flex-wrap: nowrap;
}

Categories