polynux
/
pchl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

galerie style

This commit is contained in:
Guillaume Dorce 2023-03-11 18:04:05 +01:00
parent 2fed7cd7e5
commit 9d4176589b
2 changed files with 79 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/galeries.tsx
View File

@ -1,34 +1,50 @@
import { Layout } from "./index"; import { Layout } from "./index";
import Image from "next/image"; import Image from "next/image";
import styles from "../styles/Galerie.module.css";
export default function Galeries({ pictures }: { pictures: string[] }) { export default function Galeries({ pictures }: { pictures: string[] }) {
return ( return (
<Layout title="Galeries"> <Layout title="Galeries">
<div className="container mx-auto p-8"> <div className="container mx-auto p-8">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<h1 className="text-4xl font-bold">Galeries</h1> <div className="heading flex flex-col items-center gap-2">
<div className="flex flex-col gap-6"> <h1 className="text-4xl font-bold">Retrouvez toutes nos photos</h1>
<p className="text-xl"> <div className="separator w-1/2 border-b-2 border-slate-800"></div>
Voici les photos des galeries du club. </div>
</p> <div className={styles["grid-wrapper"]}>
</div> {pictures?.map((picture) => (
<div> <div key={picture.src} className={picture.className}>
{pictures?.map((picture) => ( <Image
<div key={picture}> src={picture.src}
<Image src={picture} alt="" width={500} height={500} key={picture} /> alt={picture.alt}
</div> width={500}
))} height={500}
</div> key={picture.src}
</div> className={styles["img"]}
</div> />
</Layout> </div>
); ))}
</div>
</div>
</div>
</Layout>
);
} }
export function getServerSideProps() { export function getServerSideProps() {
return { let pictures = [];
props: { const classes = ["wide", "tall", "big", ""];
pictures: ["https://picsum.photos/seed/1/500","https://picsum.photos/seed/2/500","https://picsum.photos/seed/3/500"], for (let i = 0; i < 10; i++) {
}, pictures.push({
}; src: `https://picsum.photos/500/500?random=${i}`,
alt: "random image",
className: classes[Math.floor(Math.random() * classes.length)],
});
}
return {
props: {
pictures,
},
};
} }

37
src/styles/Galerie.module.css Normal file
View File

@ -0,0 +1,37 @@
img.img {
max-width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
}
.grid-wrapper > div {
display: flex;
justify-content: center;
align-items: center;
}
.grid-wrapper > div > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
}
.grid-wrapper .wide {
grid-column: span 2;
}
.grid-wrapper .tall {
grid-row: span 2;
}
.grid-wrapper .big {
grid-column: span 2;
grid-row: span 2;
}