I would like to do some changes to the Ui by sliding the slider with Carousel tailwind and NextJS, yet I have no idea to do so?!
this is an example of my code
...
const slider = sliderData.map((item, index) => {
return (
<>
<div
className={`carousel-item ${
index == 0 && "active"
} relative float-left w-full`}
>
<Link href={item.link + `?storeId=${state.id}`}>
<button className="block w-full">
<img src={item.image} className="block w-full" alt="..." />
</button>
</Link>
<div className="carousel-caption hidden md:block absolute text-center">
<h5 className="text-xl">{item.title}</h5>
<p>{item.description}</p>
</div>
</div>
</>
);
});
const sliderButton = sliderData.map((item, index) => {
return (
<>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to={`${index}`}
className="active"
aria-current="true"
aria-label={item.title}
></button>
</>
);
});
...
return (
<>
<div className="flex flex-col">
<div
id="carouselExampleCaptions"
className="carousel slide relative w-screen"
data-bs-ride="carousel"
>
<div className="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
{sliderButton}
</div>
<div className="carousel-inner relative w-full overflow-hidden">
{slider}
</div>
<button
className="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span
className="carousel-control-prev-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span className="visually-hidden">Previous</span>
</button>
<button
className="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span
className="carousel-control-next-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span className="visually-hidden">Next</span>
</button>
</div>
<div>
<CatalogView
store={state.loadedStore}
categories={state.loadedCategories}
products={state.loadedProducts}
selectedCategory={state.selectedCategory}
/>
</div>
</div>
</>
);
the changes I'm trying to do is to change the selectedCategory on slide, which are stored in the state object and the state hook to change them, yet how to let's say if the user tap on next or slide the slider to call setState.
Related
I've a map that creates edit and delete buttons.
The delete button needs to be confirmed.
So I created a modal.
console.log(additive._id) at the first delete button gives me the correct ._id
the confirm button inside the modal gives me always the last ._id of the array i map through, so it'll always delete the last item.
How can i get the correct ._id?
{additives.sort(byId).map((additive) => (
<div key={additive._id}>
<div>
<div </div>
<div>{additive.additive[0]?.label}</div>
</div>
<div className='flex justify-between items-center'>
<button
onClick={() =>
editAdditive(
additive._id,
additive.additive[0]?.value,
additive.additive[0]?.label
)
}>
Edit
</button>
<button
onClick={() => {
setShowModal(!showModal);
console.log(additive._id);
}}
>
Delete
</button>
{showModal && (
<>
<div
className='backdrop'
onClick={(e) => {
if (e.target.className === 'backdrop') {
setShowModal(false);
}
}}
>
<div className='relative w-auto my-6 mx-auto max-w-3xl'>
<div className=' rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
<div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t bg-gray-600'>
<h3 className='text-3xl font-semibold text-red-500'>
Delete Additive
</h3>
</div>
<div className='relative p-6 flex-auto bg-gray-600'>
<p className='my-4 text-white text-lg leading-relaxed'>
Are you sure?
</p>
</div>
<div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b bg-gray-600'>
<button
className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => setShowModal(!showModal)}
>
Cancel
</button>
<button
className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => {
deleteAdditive(additive._id);
setShowModal(!showModal);
console.log(additive._id);
}}
>
Confirm
</button>
</div>
</div>
</div>
</div>
</>
)}
</div>
</div>
))}
store the additive id in a state and use it in the modal
const [additiveId, setAdditiveId] = useState()
<button
onClick={() => {
setShowModal(!showModal);
setAdditiveId(additive._id)
console.log(additive._id);
}}
>
Delete
</button>
<button
className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => {
deleteAdditive(additiveId);
setShowModal(!showModal);
console.log(additiveId);
}}
>
Confirm
</button>
I'm making a react app with tailwindcss, and I want to make a hidden mobile navbar and when the user click on the icon it appears.
So I want to make a transition while the menu appears.
I use:
React
Tailwindcss
Headlessui
My Code:
MobileMenu.js:
function MobileMenu() {
return (
<div className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700">
<div className="flex items-center mb-3 pb-3 border-b border-slate-700">
<img
src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg"
className="rounded-full w-8 h-8 cursor-pointer"
/>
<h6 className="ml-5 cursor-pointer">Elon Musk</h6>
</div>
<div className="mobile-nav-icon">
<ImHome size={20} />
<h4 className="ml-5">Home</h4>
</div>
<div className="mobile-nav-icon">
<HiUsers size={20} />
<h4 className="ml-5">Friends</h4>
</div>
<div className="mobile-nav-icon">
<CgProfile size={20} />
<h4 className="ml-5">My Profile</h4>
</div>
</div>
);
}
export default MobileMenu;
How I show it in Navbar.js:
function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<>
<nav className="flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white">
{/* Mobile Menu Icon */}
<div
className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
<FiMenu size={20} />
</div>
</nav>
{/* Mobile Menu */}
{mobileMenuOpen && <MobileMenu />}
</>
);
}
export default Navbar;
Thanks in advance!
You can use #framer/motion package that allows you easily animate elements.
const menuVariants = {
open: {
opacity: 1,
x: 0,
},
closed: {
opacity: 0,
x: '-100%',
},
}
Animations can be changed however you want according to #framer/motion docs.
And attach variants to your <MobileMenu /> component.
function MobileMenu({isMenuOpen}) {
return (
<motion.div animate={isMenuOpen ? 'open' : 'closed'}
variants={menuVariants}> className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700">
<div className="flex items-center mb-3 pb-3 border-b border-slate-700">
<img
src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg"
className="rounded-full w-8 h-8 cursor-pointer"
/>
<h6 className="ml-5 cursor-pointer">Elon Musk</h6>
</div>
<div className="mobile-nav-icon">
<ImHome size={20} />
<h4 className="ml-5">Home</h4>
</div>
<div className="mobile-nav-icon">
<HiUsers size={20} />
<h4 className="ml-5">Friends</h4>
</div>
<div className="mobile-nav-icon">
<CgProfile size={20} />
<h4 className="ml-5">My Profile</h4>
</div>
</div>
);
}
export default MobileMenu;
And you can pass isMenuOpen variable as a prop.
function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<>
<nav className="flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white">
{/* Mobile Menu Icon */}
<div
className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
<FiMenu size={20} />
</div>
</nav>
{/* Mobile Menu */}
{mobileMenuOpen && <MobileMenu isMenuOpen={mobileMenuOpen}/>}
</>
);
}
export default Navbar;
One potential issue with the provided answer is that state is not being set correctly. See the React Docs about updating state based on prior state value.
<div className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2" onClick={() => setMobileMenuOpen(prevState => !prevState)}>
I want to include my - button in my gray bar. As you can see in the picture, my blue button exceeds the gray bar
export default function App() {
...
return (
<div className="text-md font-bold">
Invitee {i + 1}
<span className="float-right ">
{!!i && (
<Button className="rounded-md float-right mt-4" primary onClick={() => removeInvitee(Id)}>
-
</Button>
)}
</span>
...
)
You can use the flexbox properties to make the design you want. I had created the very similar example below , please add your functions here and replace class with className.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
<div class=" font-bold text-gray-500 ml-4" >Invitee 2</div>
<div class="">
<Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
-
</Button>
</div>
</div>
</div>
So I created, the infinite scroll with second method (the scrollable component is the parrent element) and the content I am displaying might have overflow on widht/x. I tried to overwrite the infinite scroll style with overflowX:visible, but it doesn't work
<div id="scrollable-target" className="content flex flex-col items-start justify-center h-40 mt-10 flex-grow text-left max-w-[900px] mx-auto
overflow-y-auto overflow-x-visible" ref={diary}>
<InfiniteScroll
dataLength={posts.length}
next={getMorePost}
hasMore={hasMore}
loader={<div className=""><Stairs /></div>}
endMessage={<h4>Nothing more to show</h4>}
style={{
overflow: undefined,
height: undefined,
'-webkit-overflow-scrolling': undefined,
overflowX: 'visible',
overflowY: 'inherit'
}}
scrollableTarget="scrollable-target"
>
{posts.map((x, i) => (
<div key={i} className={`transition mt-3 animate-fade-in-up duration-500 ${activeDiary === x.uuid || activeDiary === null ? '' : 'opacity-50'} ${activeDiary === x.uuid ? 'scale-110' : 'scale-100'}`}>
<div className="flex flex-row justify-start items-center gap-1 hover:cursor-pointer flex-wrap" onClick={(e) => toogleBody(e, x.uuid)}>
<h3 className="font-bold noselect text-sm sm:text-base">{x.title}</h3>
<div className="flex flex-row justify-start items-center gap-1 text-xs md:text-base mt-0">
<span className="text-gray-600">#lurifos ยท</span>
<span>{parseDate(x.timecreated)}</span>
<div className="transition duration-500 text-lg" id={`arrow-${x.uuid}`}>
<MdKeyboardArrowDown />
</div>
</div>
</div>
<div id={`body-${x.uuid}`} className="transition-max-height duration-500 text-gray-600 slide overflow-hidden sm:overflow-clip text-sm sm:text-base">
{truncate(x.body, 256)}
<a href={'/diary/' + x.uuid} className="text-sm ml-1 text-blue-500" target='_blank' rel="noreferrer">{x.body.length > 256 ? "Read More" : ''}
</a>
</div>
</div>
))}
</InfiniteScroll>
</div>
note: I set the height so small because I don't have enough data to trigger the overflow-scroll
EDIT:
I think the problem is in the srollable-target, I removed the overflow class and replace it with overflow-visible, and it's working. But when I add a overflow-y-auto the problem appears again.
I had the same problem, You can set your overflowX style to an InfiniteScroll container, like this:
<div id="scrollable-target" className="content flex flex-col items-start justify-center h-40 mt-10 flex-grow text-left max-w-[900px] mx-auto verflow-y-auto overflow-x-visible" ref={diary}>
<div
style={{
overflowX: 'visible'
}}
>
<InfiniteScroll
style={{ }}
>
{...props}
</InfiniteScroll>
</div>
</div>
how can I display my Invitee2 a bit upper in my gray bar ? And for my button how can I put it on the extrem right side of my gray bar ?
<div className="bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500 font-bold text-gray-500">
Invitee {i + 1}
<span className="float-right -mt-5">
{!!i && (
<Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
- Invitee
</Button>
)}
</span>
And Button.jsx:
export default function Button({ onClick,primary,children,disabled }) {
return <button
onClick={onClick}
className={`${primary
? ' cursor-pointer rounded-md bg-primary-700 py-2 px-3 text-white hover:bg-blue-700 hover:text-white'
: 'bg-transparent text-gray border border-primary-500 hover:border-primary-100 hover:text-primary-100 transition duration-200 '}
text-primary-fg py-2 px-3 rounded-md transition-colors `}
disabled={disabled}
>{children}</button>
}
Here a picture to get the idea :
Add flex flex-row justify-between items-center in your div class
and remove the -mt-5 in span class beside float-right
check the code below
<div className="flex flex-row justify-between items-center bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500 font-bold text-gray-500">
Invitee {i + 1}
<span className="float-right">
{!!i && (
<Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
- Invitee
</Button>
)}
</span>
</div>
You can use the flexbox properties to make the design you want. I had created the very similar example below , please add your functions here and replace class with className.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
<div class=" font-bold text-gray-500 ml-4" >Invitee 2</div>
<div class="">
<Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
- Invitee
</Button>
</div>
</div>
</div>