From 3a6acb5ef74acf877724132b68c50e3b9e1e9173 Mon Sep 17 00:00:00 2001
From: sadorowo <me@sador.me>
Date: Fri, 31 May 2024 16:20:17 +0200
Subject: [PATCH] add: contact page

---
 src/app/contact/page.tsx                    | 51 +++++++++++++++++++++
 src/app/page.tsx                            |  2 +-
 src/app/themes.tsx                          |  6 +--
 src/components/navigation_bar.component.tsx |  4 +-
 src/styles.tsx                              | 11 +++--
 5 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 src/app/contact/page.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..f13f627
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -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;
+`
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1934cc5..e5ae18f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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();
diff --git a/src/app/themes.tsx b/src/app/themes.tsx
index 6ed032c..52881ed 100644
--- a/src/app/themes.tsx
+++ b/src/app/themes.tsx
@@ -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"
 }
\ No newline at end of file
diff --git a/src/components/navigation_bar.component.tsx b/src/components/navigation_bar.component.tsx
index 333581f..7457d97 100644
--- a/src/components/navigation_bar.component.tsx
+++ b/src/components/navigation_bar.component.tsx
@@ -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;
     }
diff --git a/src/styles.tsx b/src/styles.tsx
index 4ca4a00..817cdbf 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -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;
 `;
\ No newline at end of file