sadorowo/parafiaborzeta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: sadorowo:7d88da66676f1f70f2e0376c88b7117b4c87c1f6
Branches Tags
sadorowo:main
...
compare: sadorowo:4131de86922728a5dc64aab51e2728b3e6d96e4e
Branches Tags
sadorowo:main

3 Commits
7d88da6667 ... 4131de8692

Author SHA1 Message Date
sadorowo
4131de8692
change single to double quotes 2024-05-31 16:21:27 +02:00
sadorowo
3a6acb5ef7
add: contact page 2024-05-31 16:20:17 +02:00
sadorowo
967a0c5c27
add background color transition 2024-05-31 16:02:00 +02:00
6 changed files with 70 additions and 14 deletions
Show Stats Expand all files Collapse all files

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

4
src/app/layout.tsx
View File

@ -1,4 +1,4 @@
'use client'
"use client"
import { Montserrat } from "next/font/google";
import { useState, useEffect } from "react";
@ -29,7 +29,7 @@ export default function RootLayout({
<html lang="en">
{/*
can't use next.Metadata,
because 'use client' + styled components are
because "use client" + styled components are
preventing it.
next/head wouldn't work too, so legacy solution is used

4
src/app/page.tsx
View File

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

6
src/app/themes.tsx
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"
}

4
src/components/navigation_bar.component.tsx
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;
}

15
src/styles.tsx
View File

@ -1,4 +1,4 @@
'use client'
"use client"
import styled, { createGlobalStyle } from "styled-components";
@ -16,6 +16,8 @@ export const GlobalLayout = createGlobalStyle`
overflow-x: hidden;
color: ${({ theme }) => theme.text};
background-color: ${({ theme }) => theme.background};
transition: background 0.3s ease-in-out;
}
a {
@ -30,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;
`;