Compare commits
3 Commits
7d88da6667
...
4131de8692
Author | SHA1 | Date | |
---|---|---|---|
4131de8692 | |||
3a6acb5ef7 | |||
967a0c5c27 |
51
src/app/contact/page.tsx
Normal file
51
src/app/contact/page.tsx
Normal 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;
|
||||||
|
`
|
@ -1,4 +1,4 @@
|
|||||||
'use client'
|
"use client"
|
||||||
|
|
||||||
import { Montserrat } from "next/font/google";
|
import { Montserrat } from "next/font/google";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
@ -29,7 +29,7 @@ export default function RootLayout({
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
{/*
|
{/*
|
||||||
can't use next.Metadata,
|
can't use next.Metadata,
|
||||||
because 'use client' + styled components are
|
because "use client" + styled components are
|
||||||
preventing it.
|
preventing it.
|
||||||
|
|
||||||
next/head wouldn't work too, so legacy solution is used
|
next/head wouldn't work too, so legacy solution is used
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
'use client'
|
"use client"
|
||||||
|
|
||||||
import { useTheme } from "@/providers/theme.provider";
|
import { useTheme } from "@/providers/theme.provider";
|
||||||
import { Button } from "../styles";
|
import { Button } from "@/styles";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const { theme, toggleTheme } = useTheme();
|
const { theme, toggleTheme } = useTheme();
|
||||||
|
@ -1,18 +1,18 @@
|
|||||||
export type ThemeMode = 'light' | 'dark'
|
export type ThemeMode = 'light' | 'dark'
|
||||||
export interface Theme {
|
export interface Theme {
|
||||||
background: string,
|
background: string,
|
||||||
space_px: number,
|
space: number,
|
||||||
text: string
|
text: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const darkTheme: Theme = {
|
export const darkTheme: Theme = {
|
||||||
space_px: 10,
|
space: 10,
|
||||||
background: "#2f3136",
|
background: "#2f3136",
|
||||||
text: "#fff"
|
text: "#fff"
|
||||||
}
|
}
|
||||||
|
|
||||||
export const lightTheme: Theme = {
|
export const lightTheme: Theme = {
|
||||||
space_px: 10,
|
space: 10,
|
||||||
background: "#eee",
|
background: "#eee",
|
||||||
text: "#000"
|
text: "#000"
|
||||||
}
|
}
|
@ -16,7 +16,7 @@ const Navigation = styled.nav`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
padding: ${({ theme }) => theme.space_px}px;
|
padding: ${({ theme }) => theme.space}px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -26,7 +26,7 @@ const Navigation = styled.nav`
|
|||||||
const NavigationLinks = styled.ul`
|
const NavigationLinks = styled.ul`
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
li {
|
li {
|
||||||
margin: ${({ theme }) => theme.space_px}px;
|
margin: ${({ theme }) => theme.space}px;
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
'use client'
|
"use client"
|
||||||
|
|
||||||
import styled, { createGlobalStyle } from "styled-components";
|
import styled, { createGlobalStyle } from "styled-components";
|
||||||
|
|
||||||
@ -16,6 +16,8 @@ export const GlobalLayout = createGlobalStyle`
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
color: ${({ theme }) => theme.text};
|
color: ${({ theme }) => theme.text};
|
||||||
background-color: ${({ theme }) => theme.background};
|
background-color: ${({ theme }) => theme.background};
|
||||||
|
|
||||||
|
transition: background 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -30,17 +32,20 @@ export const GlobalLayout = createGlobalStyle`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export const MainBlock = styled.main`
|
export const MainBlock = styled.main`
|
||||||
display: grid;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
place-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
`
|
`
|
||||||
|
|
||||||
export const Button = styled.button`
|
export const Button = styled.button`
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: ${({ theme }) => theme.space_px}px;
|
|
||||||
color: ${({ theme }) => theme.background};
|
color: ${({ theme }) => theme.background};
|
||||||
background-color: ${({ theme }) => theme.text};
|
background-color: ${({ theme }) => theme.text};
|
||||||
|
|
||||||
|
margin: ${({ theme }) => theme.space}px;
|
||||||
|
padding: ${({ theme }) => theme.space}px;
|
||||||
`;
|
`;
|
Loading…
Reference in New Issue
Block a user