mirror of
https://github.com/BradNut/weddingsite
synced 2025-09-08 17:40:36 +00:00
112 lines
2.5 KiB
JavaScript
112 lines
2.5 KiB
JavaScript
import Head from 'next/head';
|
|
import { RiExternalLinkLine } from 'react-icons/ri';
|
|
import styled from 'styled-components';
|
|
import CustomNextImage from '../components/CustomNextImage';
|
|
import Layout from '../components/Layout';
|
|
import useUser from '../lib/useUser';
|
|
|
|
export const PhotoPageStyles = styled.div`
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
`;
|
|
|
|
export const PhotosStyles = styled.div`
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 1.5rem;
|
|
margin: 0.5rem auto;
|
|
|
|
@media (max-width: 1000px) {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
grid-template-columns: repeat(1, minmax(150px, 2000px));
|
|
grid-gap: 1.2rem;
|
|
margin: 0.2rem 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
img,
|
|
figure {
|
|
border-radius: 4px;
|
|
box-shadow: var(--level-1);
|
|
}
|
|
`;
|
|
|
|
export default function PhotosPage() {
|
|
const { user } = useUser({ redirectTo: '/login' });
|
|
|
|
if (!user || user.isLoggedIn === false) {
|
|
return <Layout>Loading...</Layout>;
|
|
}
|
|
|
|
const photos = [
|
|
{
|
|
url: 'https://via.placeholder.com/1000x1000.png',
|
|
alt: 'Photo 1',
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/1000x1000.png',
|
|
alt: 'Photo 2',
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/1000x1000.png',
|
|
alt: 'Photo 3',
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/1000x1000.png',
|
|
alt: 'Photo 4',
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/1000x1000.png',
|
|
alt: 'Photo 5',
|
|
},
|
|
{
|
|
url: 'https://via.placeholder.com/1000x1000.png',
|
|
alt: 'Photo 6',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title key="title">N & N | Photos</title>
|
|
</Head>
|
|
<PhotoPageStyles className="center">
|
|
<h1>Photos</h1>
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer nofollow"
|
|
aria-label="Link to Photo Gallery"
|
|
href="https://example.com"
|
|
>
|
|
Link to full photo gallery <RiExternalLinkLine />
|
|
</a>
|
|
<PhotosStyles>
|
|
{photos.map((photo) => (
|
|
<CustomNextImage
|
|
key={photo.alt}
|
|
src={photo.url}
|
|
alt={photo.alt}
|
|
height={1000}
|
|
width={1000}
|
|
/>
|
|
))}
|
|
</PhotosStyles>
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer nofollow"
|
|
aria-label="Link to Photo Gallery"
|
|
href="https://example.com"
|
|
>
|
|
Link to full photo gallery <RiExternalLinkLine />
|
|
</a>
|
|
</PhotoPageStyles>
|
|
</div>
|
|
);
|
|
}
|