shi.gg
The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
1import { toFixedArrayLength } from "@/utils/fixed-array-length";
2import Image from "next/image";
3import Link from "next/link";
4
5import ImageReduceMotion from "./image-reduce-motion";
6
7interface Props {
8 images: {
9 id: string;
10 url: string;
11 link?: string;
12 }[];
13}
14
15export default function ImageGrid({ images }: Props) {
16 return (
17 <div className="w-full h-52 overflow-hidden rounded-xl bg-wamellow shadow-xl">
18 <div className="grid grid-flow-col grid-rows-3 w-full md:gap-4 gap-3 rotate-3 relative right-8 bottom-10 md:bottom-20">
19 {toFixedArrayLength(images, 26).map((image, i) => (
20 <Container
21 key={"imageGrid-" + image.id + i}
22 className="relative md:h-32 h-24 md:w-32 w-24 hover:scale-110 duration-200"
23 href={image.link}
24 >
25 {image.url.includes("discordapp.net")
26 ?
27 <ImageReduceMotion
28 alt="server"
29 className="rounded-xl"
30 url={image.url?.split(".").slice(0, -1).join(".")}
31 size={128}
32 />
33 :
34 <Image
35 alt="image"
36 className="rounded-xl"
37 height={128}
38 itemProp="image"
39 loading="lazy"
40 src={image.url}
41 width={128}
42 />
43 }
44 </Container>
45 ))}
46
47 </div>
48 </div>
49 );
50}
51
52function Container({
53 children,
54 className,
55 href
56}: {
57 children: React.ReactNode;
58 className: string;
59 href?: string;
60}) {
61
62 if (!href) {
63 return (
64 <div className={className}>
65 {children}
66 </div>
67 );
68
69 }
70
71 return (
72 <Link
73 className={className}
74 href={href}
75 >
76 {children}
77 </Link>
78 );
79
80}