add: contact page

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;
+`

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();

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"
 }

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;
     }

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-items: center;
-  align-content: 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;
 `;