diff --git a/package.json b/package.json
index 56bc683..a141cc8 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
+ "framer-motion": "^11.2.10",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
@@ -18,6 +19,7 @@
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
+ "@types/react-transition-group": "^4.4.10",
"@types/styled-components": "^5.1.34",
"eslint": "^8",
"eslint-config-next": "14.2.3",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index da12c84..89ec634 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,17 @@
"use client"
+import { AnimatePresence } from "framer-motion";
import { Montserrat } from "next/font/google";
import { useState, useEffect } from "react";
import NavigationBar from "@/components/navigation_bar.component";
-import { ThemeProvider } from "@/providers/theme.provider";
-import { GlobalLayout, MainBlock } from "@/styles";
+import Transitioned from "@/components/transition.component";
import Loader from "@/components/loader.component";
-const inter = Montserrat({ subsets: ["latin"] });
+import { ThemeProvider } from "@/providers/theme.provider";
+import { GlobalLayout } from "@/styles";
+
+const font = Montserrat({ subsets: ["latin"] });
export default function RootLayout({
children,
@@ -20,7 +23,6 @@ export default function RootLayout({
useEffect(() => {
const handleComplete = () => setLoading(false);
- // simulate loading delay
const timer = setTimeout(handleComplete, 1000);
return () => clearTimeout(timer);
}, []);
@@ -38,17 +40,15 @@ export default function RootLayout({
Parafia pw. Niepokalanego Serca NMP w Borzęcie
-
+
{loading
?
- : <>
-
-
- {children}
-
- >}
+ :
+
+ {children}
+ }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3f11db7..30f4530 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
Parafia w Borzęcie
Już wkrótce powstanie tutaj świeża strona parafii pod wezwaniem Niepokalanego Serca Maryi w Borzęcie.
zadzwoń do proboszcza
-
+
Aktualny motyw: {theme}
>;
diff --git a/src/components/transition.component.tsx b/src/components/transition.component.tsx
new file mode 100644
index 0000000..5db5f0b
--- /dev/null
+++ b/src/components/transition.component.tsx
@@ -0,0 +1,42 @@
+import { usePathname } from "next/navigation";
+import { PropsWithChildren } from "react";
+import { motion } from "framer-motion";
+import { MainBlock } from "@/styles";
+
+const transitionVariants = {
+ initial: {
+ scale: 0.8,
+ opacity: 0
+ },
+ animate: {
+ scale: 1,
+ opacity: 1
+ },
+ exit: {
+ scale: 1.2,
+ opacity: 0
+ }
+};
+
+const pageTransition = {
+ type: "spring",
+ ease: "anticipate",
+ duration: 0.5
+};
+
+export default function Transitioned({ children }: PropsWithChildren) {
+ const pathName = usePathname();
+
+ return
+
+ {children}
+
+ ;
+}
\ No newline at end of file
diff --git a/src/utils/local_storage.ts b/src/hooks/local_storage.ts
similarity index 100%
rename from src/utils/local_storage.ts
rename to src/hooks/local_storage.ts
diff --git a/src/providers/theme.provider.tsx b/src/providers/theme.provider.tsx
index 5184308..be0c70a 100644
--- a/src/providers/theme.provider.tsx
+++ b/src/providers/theme.provider.tsx
@@ -2,7 +2,7 @@ import { createContext, useContext, useMemo, PropsWithChildren } from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { ThemeMode, lightTheme, darkTheme } from "@/app/themes";
-import useLocalStorage from "@/utils/local_storage";
+import useLocalStorage from "@/hooks/local_storage";
const ThemeContext = createContext({
theme: "light",
diff --git a/yarn.lock b/yarn.lock
index 8f15303..9a076f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -222,6 +222,13 @@
dependencies:
"@types/react" "*"
+"@types/react-transition-group@^4.4.10":
+ version "4.4.10"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+ integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
+ dependencies:
+ "@types/react" "*"
+
"@types/react@*", "@types/react@^18":
version "18.3.3"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
@@ -1126,6 +1133,13 @@ foreground-child@^3.1.0:
cross-spawn "^7.0.0"
signal-exit "^4.0.1"
+framer-motion@^11.2.10:
+ version "11.2.10"
+ resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.2.10.tgz#c8671e33e8f8d4abbd95efd20d3b8a888f457ed7"
+ integrity sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==
+ dependencies:
+ tslib "^2.4.0"
+
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"