add: contact page

This commit is contained in:
Franek 2024-05-31 16:20:17 +02:00
parent 967a0c5c27
commit 3a6acb5ef7
No known key found for this signature in database
GPG Key ID: 0329F871B2079351
5 changed files with 64 additions and 10 deletions

51
src/app/contact/page.tsx Normal file
View File

@ -0,0 +1,51 @@
'use client'
import { useRouter } from "next/navigation";
import styled from "styled-components";
import { Button } from "@/styles";
export default function Contact() {
const router = useRouter();
return <ContactLayout>
<ContactSection>
<h1>Kontakt</h1>
<p>Telefon: <a href="tel:+48122723101">+48 12 272 31 01</a></p>
<p>E-mail: <a href="mailto:parafia@parafiaborzeta.pl">parafia@parafiaborzeta.pl</a></p>
</ContactSection>
<ContactSection>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2571.774387915165!2d19.983823077009625!3d49.865482529309325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47166bf98a3e4c0d%3A0xf6450674984e2240!2sRoman%20Catholic%20Parish%20of%20the%20Immaculate%20Heart%20of%20Mary!5e0!3m2!1sen!2sid!4v1717164631849!5m2!1sen!2sid"
width="800"
height="600"
style={{ border: 0 }}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
<Button onClick={() => router.back()}>Powrót</Button>
</ContactSection>
</ContactLayout>;
}
const ContactLayout = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: ${({ theme }) => theme.space}vw;
@media screen and (max-width: 798px) {
flex-direction: column;
}
`
const ContactSection = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
`

View File

@ -1,7 +1,7 @@
'use client'
import { useTheme } from "@/providers/theme.provider";
import { Button } from "../styles";
import { Button } from "@/styles";
export default function Home() {
const { theme, toggleTheme } = useTheme();

View File

@ -1,18 +1,18 @@
export type ThemeMode = 'light' | 'dark'
export interface Theme {
background: string,
space_px: number,
space: number,
text: string
}
export const darkTheme: Theme = {
space_px: 10,
space: 10,
background: "#2f3136",
text: "#fff"
}
export const lightTheme: Theme = {
space_px: 10,
space: 10,
background: "#eee",
text: "#000"
}

View File

@ -16,7 +16,7 @@ const Navigation = styled.nav`
align-items: center;
justify-content: space-between;
padding: ${({ theme }) => theme.space_px}px;
padding: ${({ theme }) => theme.space}px;
position: fixed;
width: 100%;
left: 0;
@ -26,7 +26,7 @@ const Navigation = styled.nav`
const NavigationLinks = styled.ul`
list-style-type: none;
li {
margin: ${({ theme }) => theme.space_px}px;
margin: ${({ theme }) => theme.space}px;
display: block;
float: left;
}

View File

@ -32,17 +32,20 @@ export const GlobalLayout = createGlobalStyle`
`;
export const MainBlock = styled.main`
display: grid;
display: flex;
height: 100vh;
place-items: center;
align-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
`
export const Button = styled.button`
border: none;
outline: none;
cursor: pointer;
padding: ${({ theme }) => theme.space_px}px;
color: ${({ theme }) => theme.background};
background-color: ${({ theme }) => theme.text};
margin: ${({ theme }) => theme.space}px;
padding: ${({ theme }) => theme.space}px;
`;