Trying to implement this design using Tailwind CSS and Next.js for coding this component:
I'm facing challenges in achieving the desired grid layout with images, as they are not displaying properly.
Below is my current approach:
import Image from 'next/image';
import { WOM_1, WOM_2, WOM_3, WOM_4, WOM_5, WOM_6, WOM_7, WOM_8 } from 'public/images/index.js';
const ImageCard = ({ image, alignment, cardWidth, cardHeight }) => {
return (
<div className="flex flex-col items-center justify-center w-full h-full">
<div className="flex flex-col items-center justify-center">
{cardWidth && cardHeight ? (
<Image
src={image}
alt=""
width={cardWidth}
height={cardHeight}
layout="fixed"
className={`object-cover object-center overflow-hidden`}
/>
) : (
<Image
src={image}
alt=""
width={193}
height={179}
layout="fixed"
className={`object-cover object-center `}
/>
)}
</div>
</div>
);
};
const WallOfMemories = () => {
const imageInfo1 = [
{ image: WOM_1, alignment: '0px' },
{ image: WOM_2, alignment: '-20px' },
{ image: WOM_3, cardWidth: '193px', cardHeight: '179px', alignment: '20px' },
{ image: WOM_4, alignment: '-20px' },
];
const imageInfo2 = [
{ image: WOM_5, alignment: '0px' },
{ image: WOM_6, cardWidth: '193px', cardHeight: '179px',alignment: '20px' },
{ image: WOM_7, alignment: '-20px' },
{ image: WOM_8, alignment: '0px' },
];
// attempting to display images in a 4x2 grid at the center of the page
return (
<div className="flex flex-col items-center justify-center w-full h-full">
<div className="flex flex-row items-center justify-center w-full h-full">
{imageInfo1.map((image, index) => (
<ImageCard
key={index}
image={image.image}
alignment={image.alignment}
cardWidth={image.cardWidth}
cardHeight={image.cardHeight}
/>
))}
</div>
<div className="flex flex-row items-center justify-center w-full h-full">
{imageInfo2.map((image, index) => (
<ImageCard
key={index}
image={image.image}
alignment={image.alignment}
cardWidth={image.cardWidth}
cardHeight={image.cardHeight}
/>
))}
</div>
</div>
);
};
export default WallOfMemories;
Looking for guidance on what I might be missing? How can I replicate the image layout effectively?