Skip to content

Commit a204475

Browse files
aromal-aaromal-a
authored
Refactor Gallery component to use Next.js Image
1 parent 9f4dae7 commit a204475

1 file changed

Lines changed: 60 additions & 62 deletions

File tree

‎app/gallery/page.jsx‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,68 @@
11

2-
export default function Gallery() {
3-
4-
5-
return (
2+
import Image from "next/image";
63

7-
<div class="container py-10 grid grid-cols-2 md:grid-cols-4 gap-4">
4+
export default function Gallery() {
5+
return (
6+
<div className="container py-10 grid grid-cols-2 md:grid-cols-4 gap-4">
7+
<div className="flex flex-col gap-4">
8+
<div>
9+
<Image className="h-auto max-w-full rounded-lg" src="/image/three.jpeg" alt="" width={500} height={500} />
10+
</div>
11+
<div>
12+
<Image className="h-auto max-w-full rounded-lg" src="/image/eight.jpeg" alt="" width={500} height={500} />
13+
</div>
14+
</div>
815

16+
<div className="flex flex-col gap-4">
17+
<div>
18+
<Image className="h-auto max-w-full rounded-lg" src="/image/one.jpeg" alt="" width={500} height={500} />
19+
</div>
20+
<div>
21+
<Image className="h-auto max-w-full rounded-lg" src="/image/seven.jpeg" alt="" width={500} height={500} />
22+
</div>
23+
<div>
24+
<Image className="h-auto max-w-full rounded-lg" src="/image/six.jpeg" alt="" width={500} height={500} />
25+
</div>
26+
</div>
927

28+
<div className="flex flex-col gap-4">
29+
<div>
30+
<Image className="h-auto max-w-full rounded-lg" src="/image/ten.jpeg" alt="" width={500} height={500} />
31+
</div>
32+
<div>
33+
<Image className="h-auto max-w-full rounded-lg" src="/image/two.jpeg" alt="" width={500} height={500} />
34+
</div>
35+
</div>
1036

11-
<div class="flex flex-col gap-4">
12-
<div>
13-
<img class="h-auto max-w-full rounded-lg" src="/image/three.jpeg" alt="" />
14-
</div>
15-
<div>
16-
<img class="h-auto max-w-full rounded-lg" src="/image/eight.jpeg" alt="" />
17-
</div>
18-
</div>
19-
<div class="flex flex-col gap-4">
20-
<div>
21-
<img class="h-auto max-w-full rounded-lg" src="/image/one.jpeg" alt="" />
22-
</div>
23-
<div>
24-
<img class="h-auto max-w-full rounded-lg" src="/image/seven.jpeg" alt="" />
25-
</div>
26-
<div>
27-
<img class="h-auto max-w-full rounded-lg" src="/image/six.jpeg" alt="" />
28-
</div>
29-
</div>
30-
<div class="flex flex-col gap-4">
31-
<div>
32-
<img class="h-auto max-w-full rounded-lg" src="/image/ten.jpeg" alt="" />
33-
</div>
34-
<div>
35-
<img class="h-auto max-w-full rounded-lg" src="/image/two.jpeg" alt="" />
36-
</div>
37-
</div>
38-
<div class="flex flex-col gap-4">
39-
<div>
40-
<img class="h-auto max-w-full rounded-lg" src="/image/p1.jpeg" alt="" />
41-
</div>
42-
<div>
43-
<img class="h-auto max-w-full rounded-lg" src="/image/p2.jpeg" alt="" />
44-
</div>
45-
<div>
46-
<img class="h-auto max-w-full rounded-lg" src="/image/p3.jpeg" alt="" />
47-
</div>
48-
</div>
49-
<div class="flex flex-col gap-4">
50-
<div>
51-
<img class="h-auto max-w-full rounded-lg" src="/image/s1.jpg" alt="" />
52-
</div>
53-
<div>
54-
<img class="h-auto max-w-full rounded-lg" src="/image/s2.jpg" alt="" />
55-
</div>
56-
<div>
57-
<img class="h-auto max-w-full rounded-lg" src="/image/s3.jpg" alt="" />
58-
</div>
59-
<div>
60-
<img class="h-auto max-w-full rounded-lg" src="/image/s4.jpg" alt="" />
61-
</div>
62-
<div>
63-
<img class="h-auto max-w-full rounded-lg" src="/image/s5.jpg" alt="" />
64-
</div>
65-
66-
</div>
37+
<div className="flex flex-col gap-4">
38+
<div>
39+
<Image className="h-auto max-w-full rounded-lg" src="/image/p1.jpeg" alt="" width={500} height={500} />
40+
</div>
41+
<div>
42+
<Image className="h-auto max-w-full rounded-lg" src="/image/p2.jpeg" alt="" width={500} height={500} />
6743
</div>
44+
<div>
45+
<Image className="h-auto max-w-full rounded-lg" src="/image/p3.jpeg" alt="" width={500} height={500} />
46+
</div>
47+
</div>
6848

69-
);
49+
<div className="flex flex-col gap-4">
50+
<div>
51+
<Image className="h-auto max-w-full rounded-lg" src="/image/s1.jpg" alt="" width={500} height={500} />
52+
</div>
53+
<div>
54+
<Image className="h-auto max-w-full rounded-lg" src="/image/s2.jpg" alt="" width={500} height={500} />
55+
</div>
56+
<div>
57+
<Image className="h-auto max-w-full rounded-lg" src="/image/s3.jpg" alt="" width={500} height={500} />
58+
</div>
59+
<div>
60+
<Image className="h-auto max-w-full rounded-lg" src="/image/s4.jpg" alt="" width={500} height={500} />
61+
</div>
62+
<div>
63+
<Image className="h-auto max-w-full rounded-lg" src="/image/s5.jpg" alt="" width={500} height={500} />
64+
</div>
65+
</div>
66+
</div>
67+
);
7068
}

0 commit comments

Comments
 (0)