You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.8 KiB
82 lines
2.8 KiB
import Head from 'next/head'
|
|
import styles from '../styles/Gallery.module.css'
|
|
import Header from '../components/header';
|
|
import Footer from '../components/footer';
|
|
|
|
export default function Gallery({ response }) {
|
|
let images = [];
|
|
for(const key in response) {
|
|
let item = response[key];
|
|
if(item['fields']['image'] != null) item['fields']['link'] = item['fields']['image'][0]['url'];
|
|
images.push(item['fields']);
|
|
}
|
|
|
|
return (
|
|
<div className="page">
|
|
<Head>
|
|
<title>Trick - Gallery</title>
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://trickthefox.com/gallery" />
|
|
<meta property="og:title" content="Trick - Gallery" />
|
|
<meta property="og:description" content="Gallery of art I made." />
|
|
<meta property="og:image" content="/trick.jpg" />
|
|
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:url" content="https://trickthefox.com/gallery" />
|
|
<meta property="twitter:title" content="Trick - Gallery" />
|
|
<meta property="twitter:description" content="Gallery of art I made." />
|
|
<meta property="twitter:image" content="/trick.jpg" />
|
|
|
|
<meta name="theme-color" content="#4f4fff" />
|
|
</Head>
|
|
|
|
<Header />
|
|
|
|
<div className="container">
|
|
<article className="content">
|
|
|
|
<section className="card">
|
|
<h1 className="h-unset">Gallery</h1>
|
|
|
|
<div className={styles.gallery}>
|
|
{images.map((image) => (
|
|
<div key={image.link.toString()}>
|
|
<img src={image.link}></img>
|
|
<div className={styles.overlay}>
|
|
<h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</article>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function getGallery() {
|
|
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
|
}
|
|
});
|
|
|
|
const data = await req.json();
|
|
return data['records'];
|
|
}
|
|
|
|
export async function getServerSideProps() {
|
|
return {
|
|
props: {
|
|
response: await getGallery()
|
|
}
|
|
}
|
|
} |