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 { 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

4
src/app/page.tsx
View File

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

6
src/app/themes.tsx
View File

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

4
src/components/navigation_bar.component.tsx
View File

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

15
src/styles.tsx
View File

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