radiquum.github.io/app/Section/Photos.tsx

61 lines
1.8 KiB
TypeScript

"use client";
import Link from "next/link";
import { Section } from "../components/Section";
import { IconWithText } from "../components/IconWithText";
import { EmblaOptionsType } from "embla-carousel";
import EmblaCarousel from "../components/Photos.Carousel";
const links = [
{
icon: "/icons/ic_baseline-telegram.svg",
text: "Telegram",
desc: "@photowah",
url: "https://x.com/radiquum",
},
{
icon: "/icons/simple-icons_immich.svg",
text: "Gallery",
desc: "wah.su/photos",
url: "https://bsky.app/profile/@radiquum.wah.su",
},
];
const OPTIONS: EmblaOptionsType = { dragFree: true, loop: true };
const SLIDES = [
"/images/photos/2024-06-14T19_32_04_024.JPG",
"/images/photos/2024-06-17T18_55_55_030.JPG",
"/images/photos/2024-06-17T19_44_15_068.JPG",
"/images/photos/2024-06-17T19_48_32_074.JPG",
"/images/photos/2024-06-22T20_17_57_001.JPG",
"/images/photos/image_2024-06-02_16-55-04.png",
"/images/photos/IMG_20230604_043911_43.JPG",
"/images/photos/IMG_20240710_225123.jpg",
"/images/photos/IMG_20240710_225448.jpg",
"/images/photos/IMG_20230602_190558.JPG",
"/images/photos/IMG_20230603_175135.JPG",
];
export const Photos = () => {
return (
<div className="flex flex-col gap-4">
<Section>
<div className="flex flex-col gap-2">
<h2 className="text-4xl">Photos</h2>
<div className="flex items-center gap-4">
{links.map((item) => (
<Link href={item.url} key={`photos.link.${item.text}`}>
<IconWithText
icon={item.icon}
text={item.text}
desc={item.desc}
/>
</Link>
))}
</div>
</div>
</Section>
<EmblaCarousel slides={SLIDES} options={OPTIONS} />
</div>
);
};