import Head from 'next/head'; import styled from 'styled-components'; import Layout from '../components/Layout'; import useUser from '../lib/useUser'; import CustomNextImage from '../components/CustomNextImage'; const PartyPageStyles = styled.div` display: grid; justify-items: center; gap: 1.5rem; img, figure { border-radius: 4px; } `; const PartyStyles = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; @media (max-width: 1000px) { grid-template-columns: 1fr 1fr; } @media (max-width: 650px) { grid-template-columns: 1fr; } `; const PartyCard = styled.div` display: grid; h3 { margin-top: 1rem; } `; const weddingParty = [ { name: 'Best Man', title: 'Best Man', imageUrl: '', }, { name: 'Man/Maid of Honor', title: 'Man/Maid of Honor', imageUrl: '', }, { name: 'Groomsman', title: 'Groomsman', imageUrl: '', }, { name: 'Bridesmaid', title: 'Bridesmaid', imageUrl: '', }, { name: 'Groomsman', title: 'Groomsman', imageUrl: '', }, { name: 'Bridesmaid', title: 'Bridesmaid', imageUrl: '', }, { name: 'Groomsman', title: 'Groomsman', imageUrl: '', }, { name: 'Bridesmaid', title: 'Bridesmaid', imageUrl: '', }, ]; export default function PartyPage() { const { user } = useUser({ redirectTo: '/login' }); if (!user || user.isLoggedIn === false) { return Loading...; } return ( N & N | Wedding Party

Meet our Wedding Party

The Party

Officiant

Wedding Officiant

{weddingParty.map((party, index) => (

{party.name}

{party.title}

))}
); }