From 262b8ebc15756391c02d835ce2f322fce0231377 Mon Sep 17 00:00:00 2001 From: sadorowo Date: Fri, 31 May 2024 20:00:10 +0200 Subject: [PATCH] add: route transitions --- package.json | 2 ++ src/app/layout.tsx | 22 ++++++------- src/app/page.tsx | 2 +- src/components/transition.component.tsx | 42 +++++++++++++++++++++++++ src/{utils => hooks}/local_storage.ts | 0 src/providers/theme.provider.tsx | 2 +- yarn.lock | 14 +++++++++ 7 files changed, 71 insertions(+), 13 deletions(-) create mode 100644 src/components/transition.component.tsx rename src/{utils => hooks}/local_storage.ts (100%) 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"