I am trying to have some text on the left side and my pure-react-carousel on the right side.
The carousel stretches to fill in the width of it's parent.
How do I adjust the flexbox to have 50% width without carousel without overflowing on the y axis?
Index.js
const index = () => {
return (
<div>
<div className="flex">
<div className="bg-red-200 w-1/2">Hello</div>
<div className="bg-gray-400 w-1/2 ">
<Carousel />
</div>
</div>
<div>
<h1>THIS IS A BLOCK ELEMENT</h1>
</div>
</div>
);
};
Carousel.js(pure-react-carousel)
const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={3}
>
<Slider className="rounded">
<Slide index={0}>
<img
src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
</Slide>
<Slide index={1}>
<img
src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
</Slide>
<Slide index={2}>
<img
src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
</Slide>
</Slider>
</CarouselProvider>
);
};
Related
I have an AppLayout component which has:
A div with the h-full utility class, to make it take the full page height.
A Background component to make a background with blur. It has three main elements:
Navbar
Outlet, which dynamically changes height
Footer
import { Outlet } from 'react-router-dom';
import Background from '../components/Background';
import Footer from '../components/Footer';
import NewNavbar from '../components/NewNavbar';
export const AppLayout = () => (
<div className='h-full'>
<Background>
<div className='min-h-full backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div className=''>
<Footer />
</div>
</div>
</Background>
</div>
);
As you see, I applied flex flex-col to my "wrapper" div and flex-auto to a div wrapping my Outlet component, but this is not working. When I use straight HTML and CSS, the footer is placed correctly at the bottom of the page, and it always works.
All was so simple.
export const AppLayout = () => (
<div className='h-full'>
<Background >
<div className='min-h-screen backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div>
<Footer />
</div>
</div>
</Background>
</div>
);
Replace the min-h-full to min-h-screen
I want to build a Carousel in Sitecore NextJs. I found a carousel package to do so, but it hardcodes the number of slides. Since the author will create the slides dynamically in Sitecore, my NextJs component should be smart enough to detect the number of "child slides" added to the Carousel and render them accordingly.
This is the example I found online:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
export default class NextJsCarousel extends Component {
render() {
return (
<div>
<h2>NextJs Carousel - GeeksforGeeks</h2>
<Carousel>
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
<div>
<img src="/2.png" alt="image2" />
<p className="legend">Image 2</p>
</div>
<div>
<img src="/3.png" alt="image3"/>
<p className="legend">Image 3</p>
</div>
<div>
<img src="/4.png" alt="image4"/>
<p className="legend">Image 4</p>
</div>
<div>
<img src="/5.png" alt="image5"/>
<p className="legend">Image 5</p>
</div>
</Carousel>
</div>
);
}
};
Instead, I want the Slides within the Carousel to be dynamic and use a loop based on how many slides are added under my Carousel component in Sitecore.
I am using react-slick for my carousels you may follow something similar approach as i did for your react-responsive-carousel.
My Slider Component:
export const MainSlider: FC<SliderProps> = ({
settings,
data,
type,
className,
}) => {
if (!(data.length > 0)) return null;
return (
<Fragment>
<div className="mian-slider">
<div className="container cus-container">
<div className="main-sec-slider">
<div className="img-box-back" />
<SlickSlider {...settings} className={className}>
{data.map((value, index) => {
return (
<div key={index}>
{type === "main-carousel"
? InnerSlider.Main(value)
: InnerSlider.Article(value)}
</div>
);
})}
</SlickSlider>
</div>
</div>
</div>
</Fragment>
);
};
Inside map function you can pass another component as i did with name InnerSlider which contains html code for your carousel images.
In your case you need to pass this:
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
at last pass props data for MainSlider component :
<MainSlider
settings={settings}
data={[YOUR_SLIDER_DATA_ARRAY]}
type="main-carousel"
className="slider-main-text"
/>
I am using NEXT Image component to Fit in with a flex box without shrinking. However, based on the content that is there in the other element, it keeps shrinking:
Here's my code:
import React from 'react';
import Image from 'next/image';
type Props = {
imageUrl?: string;
senderName: string;
newMessageCount?: number;
latestMessage: string;
};
export default function MessageBox({
imageUrl,
senderName,
newMessageCount,
latestMessage,
}: Props) {
const isNewMessageDefined = newMessageCount ? true : false;
const newMsgValue =
latestMessage.length > 80
? `${latestMessage.slice(0, 80)}...`
: latestMessage;
return (
<div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
<Image
alt='Message Image'
src={imageUrl ?? '/funfuse/avatar-02.jpg'}
className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
height={80}
width={80}
objectFit='cover'
objectPosition='center'
/>
<div className='flex flex-col'>
<div
aria-label='Funfuse-Message-Header'
className='flex flex-row items-center gap-2'>
<h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
{isNewMessageDefined && (
<div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
<label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
{newMessageCount}
</label>
</div>
)}
</div>
<div aria-label='Funfuse-Message-Body'>
<label className='text-sm font-semibold text-gray-400'>
{newMsgValue}
</label>
</div>
</div>
</div>
);
}
Can someone help me identify how to prevent this issue as I always want my image to be of the size and never shrink. I tried using the property: flex-shrink: 0 but that didn't work too.
it may be because of the layout attribute in the default Image tag is responsive, it reduces its size when it reduces the width of the parent.
Set the layout fixed to keep the width of the image fixed.
Here you can read more about next/image: https://nextjs.org/docs/api-reference/next/image
return (
<div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
<Image
alt='Message Image'
src={imageUrl ?? '/funfuse/avatar-02.jpg'}
className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
height={80}
layout="fixed"
width={80}
objectFit='cover'
objectPosition='center'
/>
<div className='flex flex-col'>
<div
aria-label='Funfuse-Message-Header'
className='flex flex-row items-center gap-2'>
<h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
{isNewMessageDefined && (
<div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
<label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
{newMessageCount}
</label>
</div>
)}
</div>
<div aria-label='Funfuse-Message-Body'>
<label className='text-sm font-semibold text-gray-400'>
{newMsgValue}
</label>
</div>
</div>
</div>
);
How can I create dropdown animation when I click to 3 dots and if I click one more time it will toggle the dropdown.
Here is my following code:
const [modalStatus, setModalStatus] = useState(false);
const openModal = () => {
setModalStatus(true);
};
<div className="member-edit" onClick={openModal}>
<Symlink />
</div>
{modalStatus && <TeamStatusModal />}
<div
className="member-avatar"
style={{
backgroundImage: `url(${member.User.picture})`,
}}
/>
<div className="member-description">
<p className="member-name">{member.User.fullname}</p>
<p className="member-date">
Joined on {moment(member.date_joined).format("MMMM Do, YYYY")}
</p>
</div>
Updated add TeamStatusModal.js:
const TeamStatusModal = () => {
return (
<div className="team-status-modal-container">
<div className="status">
<ProfileIcon /> <span>View Profile</span>
<hr />
</div>
<div className="status">
<MessageIcon /> <span>Message Me</span>
<hr />
</div>
<div className="status">
<ReviewIcon /> <span>Leave Review</span>
</div>
</div>
);
};
You should reorganize the logic a bit. Intead of: {modalStatus && <TeamStatusModal />} you can pass the state as a prop like this:
<TeamStatusModal active={modalStatus} />
and then you will use it in the TeamStatusModal component:
const TeamStatusModal = ({ active }) => {
return (
<div className={`team-status-modal-container ${active ? 'ACTIVE_CLASS' : ''}`}>
<div className="status">
<ProfileIcon /> <span>View Profile</span>
<hr />
</div>
<div className="status">
<MessageIcon /> <span>Message Me</span>
<hr />
</div>
<div className="status">
<ReviewIcon /> <span>Leave Review</span>
</div>
</div>
);
};
Another approach is using e.g. Framer Motion library, which allows animate removing elements from DOM.
https://www.framer.com/api/motion/animate-shared-layout/#syncing-layout-animations
I am new to using react and i have started to write a program but i have hit a wall and don't know how to overcome it.
I am trying to display movie poster with their name and release date on the side of the poster. If you see the screenshot you can see thats not the case right now, the text is being placed below the poster.
How would i go about to make the poster and text side by side?
this is my render code if the problem is within there:
return (
<div className="App">
<h1>Movie logger app</h1>
<input value={word} onChange={handleChange} />
<button onClick={getMovieName}>Find Movie</button>
{data.map((item) => {
return <div key={item.id}>
<img src={item.poster} alt=""/> <h2>{item.title}</h2> <h4>{item.date}</h4>
</div>;
})}
</div>
);
This is more of a CSS question than a React question. You can try a flexbox layout, like so:
{data.map((item) => (
<div key={item.id} style={{ display: "flex" }}>
<img src={item.poster} alt="" />
<div style={{ marginLeft: 20, display: "flex", flexDirection: "column" }}>
<h2>{item.title}</h2>
<h4>{item.date}</h4>
</div>
</div>
))}
You could use bootstrap grid system to give each element the half of the screen.
https://getbootstrap.com/docs/4.0/layout/grid/
{data.map((item) => {
<div class="container">
<div class="row">
<div class="col-6">
<img src={item.poster} alt=""/>
</div>
<div class="col-6">
<h2>{item.title}</h2> <h4>{item.date}</h4>
</div>
</div>
</div>
})}
Another option could be to position your elements in a table that cover all the screen (not recommended )