66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import styles from "./IndexGallery.module.scss";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const IndexGallery = () => {
|
|
type apiResType = {
|
|
Id: string;
|
|
Title: string;
|
|
Link: string;
|
|
Description?: string;
|
|
Place?: string;
|
|
Date?: string;
|
|
};
|
|
const [data, setData] = useState([]);
|
|
useEffect(() => {
|
|
fetch("https://gractwo.pl/api/v1/images")
|
|
.then((res) => {
|
|
return res.json();
|
|
})
|
|
.then((data) => {
|
|
setData(data);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}, []);
|
|
return (
|
|
<>
|
|
<main>
|
|
<h2>galeria zdjęć idących mocno</h2>
|
|
</main>
|
|
<main className={styles.gallerycontainer}>
|
|
{data.map((el: apiResType) => {
|
|
return (
|
|
<Link key={el.Id} href={el.Link} className={styles.galleryimg}>
|
|
<img src={el.Link} alt={el.Description || el.Title} />
|
|
<article>
|
|
<h3>{el.Title}</h3>
|
|
<p>
|
|
{el.Place || ""}
|
|
{el.Place && el.Date ? ", " : ""}
|
|
{el.Date
|
|
? new Date(el.Date).getDate().toString().length == 2
|
|
? new Date(el.Date).getDate()
|
|
: "0" + new Date(el.Date).getDate()
|
|
: ""}
|
|
{"."}
|
|
{el.Date
|
|
? (new Date(el.Date).getMonth() + 1).toString().length == 2
|
|
? new Date(el.Date).getMonth() + 1
|
|
: "0" + (new Date(el.Date).getMonth() + 1)
|
|
: ""}
|
|
{"."}
|
|
{el.Date ? new Date(el.Date).getFullYear() : ""}
|
|
</p>
|
|
</article>
|
|
</Link>
|
|
);
|
|
})}
|
|
</main>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { IndexGallery };
|