I have been trying to get my images to have the size for sometime now but still can't figure it out.
This is the code I have now.
return (
<div className='space-y-3 p-5 '>
<h2 className=' font-mainfont font-semibold pl-5'>{title}</h2>
<div className='flex gap-x-4 scrollbar-hide pt-10 overflow-y-hidden overflow-x-scroll transition-all duration-500 px-5'>
{React.Children.toArray(movies.map(movie => (
<div className='flex flex-col h-[500px] w-[10rem]'>
<img src={`${base_url}${movie?.poster_path || movie?.backdrop_path}`} alt={movie.name || movie.title} className=" h-[3rem] w-[7rem] rounded-xl object-cover hover:scale-[1.09] transition-all duration-500" />
<h1 className=''>{movie.name || movie.title}</h1>
</div>
)))}
</div>
</div >
)
Image size does not even increase again above the height and width above...
Related
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.
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 am using react and globalContext to add items to a cart page and this adds the product to the array stored in localStorage and looks like this.
basket,…]
0: {id: "9", title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band",…}
id: "9"
price: 249.99
quantity: 1
src: "/static/media/se.0ca02982636517aed223.png"
title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band"
The key is basket and i am able to map the data in the basket page but how would I calculate the total of the items within that array?
import { GlobalContext } from '../context/GlobalState'
export const Basket = () => {
const { basket } = useContext(GlobalContext)
return (
<div className="h-screen bg-zinc-100 p-4">
<div className="py-5">
<div className="max-w-md mx-auto bg-white shadow-lg rounded-lg md:max-w-7xl">
<div className="md:flex">
<div className="w-full p-4">
<div className="md:grid md:grid-cols-3 gap-2 ">
<div className="col-span-2 p2 md:p-5">
<h1 className="text-xl font-bold ">Shopping Basket</h1>
<div className="flex justify-between flex-col items-center mt-6 pt-6 gap-12">
{basket.length > 0 ? (
<>
{basket.map(item => (
<>
<div className='flex flex-col w-full justify-between md:gap-44 items-start'>
<div className="flex items-center">
<img src={item.src} className="rounded w-20 " />
<div className="flex flex-col ml-3 gap-1 ">
<span className="md:text-lg text-sm font-bold w-full md:t-width ">{item.title}</span>
<span className="text-xl font-bold">£ {item.price}</span>
</div>
</div>
</div>
</>
))}
</>
) : (
<div>No Items</div>
)}
</div>
<div className="flex justify-between items-center mt-6 pt-6 border-t">
<div className="flex items-center"> <i className="fa fa-arrow-left text-sm pr-2">
</i> <span className="text-md font-medium text-amz hover:text-orange-500 cursor-pointer "> <FontAwesomeIcon icon={faChevronLeft}></FontAwesomeIcon> Continue Shopping</span>
</div>
<div className="flex justify-center items-end">
<span className="text-sm font-medium text-gray-400 mr-1">Total:</span>
<span className="text-lg font-bold text-gray-800 ">Total}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
You'd simply loop over the array from the localstorage and calculate the total.
let cartArray = localStorage.getItem("basket");
/* since cartArray returns a stringified array you need to parse it */
cartArray = JSON.parse(cartArray);
/* you now have an array of objects. You'd now want to use the reduce function on the object */
const total = cartArray.reduce((prev, cur) => (cur.price * cur.quantity) + prev, 0);
total would be your cart total
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>
I am using heroicons, tailwindCSS, nextjs/react.
I have tried creating a useState for the index and using useEffect to update it every time. selectedIMG has a state but that didnt work as well. I cannot seem to understand why it is not looping the array when clicking on the arrow icons.
const [selectedIMG, setSelectedIMG] = useState();
{/* Popup Image */}
{selectedIMG && (
<div className="fixed top-0 z-50 w-[100vw] h-[100vh] flex justify-center items-center backdrop-blur-sm select-none">
<div className="absolute w-[100vw] h-[100vh] bg-custom-black bg-opacity-60 " />
<XIcon
className="w-12 h-12 absolute top-10 right-10 cursor-pointer z-10 p-2 border rounded-full xl:scale-150 bg-opacity-10 bg-white"
onClick={() => setSelectedIMG()}
/>
<ArrowLeftIcon
className="absolute text-white z-50 w-12 h-12 p-2 border rounded-full left-5 lg:left-[10vw] xl:scale-150 cursor-pointer shadow-2xl bg-white bg-opacity-10"
onClick={() => {
const selectedIndex = galleryImages.findIndex(
(item) => item == selectedIMG
);
console.log(selectedIndex);
if (selectedIndex <= 0) {
setSelectedIMG(galleryImages[galleryImages.length]);
} else {
setSelectedIMG(galleryImages[selectedIndex - 1]);
}
}}
/>
<ArrowRightIcon
className="absolute text-white z-50 w-12 h-12 p-2 border rounded-full right-5 lg:right-[10vw] xl:scale-150 cursor-pointer shadow-2xl bg-white bg-opacity-10"
onClick={() => {
const selectedIndex = galleryImages.findIndex(
(item) => item.src == selectedIMG.src
);
if (selectedIndex == galleryImages.length) {
setSelectedIMG(galleryImages[0]);
} else {
setSelectedIMG(galleryImages[selectedIndex + 1]);
}
}}
/>
<div className="relative w-full h-3/4">
<Image
priority
layout="fill"
objectFit="contain"
src={selectedIMG.src}
alt=""
/>
</div>
</div>
)}
{/* */}
<section>
<PageHeader title={"Gallery"} info={"Showcase of work"} />
<div className="grid grid-cols-2 sm:grid-cols-3 gap-y-1 gap-x-1 justify-center items-center mt-5">
{galleryImages.map((img) => (
<div
className="relative rounded-sm min-w-[100px] w-full h-full overflow-hidden mx-auto p-3 cursor-pointer"
key={img.src}
whileHover={{
scale: 1.1,
transition: {
ease: [0.6, 0.01, -0.05, 0.95],
},
}}
onClick={() => setSelectedIMG(img)}
>
<div>
<Image
width={"100%"}
height={"100%"}
layout="responsive"
objectFit="cover"
src={img.src}
alt={img.caption}
/>
</div>
</div>
))}
</div>
</section>