From 2be7f9b7051f58270a52b3bed9cb5add750cd032 Mon Sep 17 00:00:00 2001 From: Skydust Date: Mon, 28 Aug 2023 20:22:46 +0200 Subject: [PATCH] Added an header and other components --- assets/img/logo.png | Bin 0 -> 4624 bytes components/blocks/anchoring.tsx | 50 +++++++++++++++++++++++++++ components/layout/footer/footer.tsx | 9 ----- components/layout/header.tsx | 51 ++++++++-------------------- content/global/index.json | 10 ++++-- pages/_app.tsx | 2 +- public/uploads/logo.png | Bin 0 -> 4624 bytes styles.css | 3 -- styles/anchoring.css | 16 +++++++++ styles/header.css | 35 +++++++++++++++++++ styles/styles.css | 21 ++++++++++++ tina/config.tsx | 25 ++++++++------ tina/tina-lock.json | 2 +- 13 files changed, 162 insertions(+), 62 deletions(-) create mode 100644 assets/img/logo.png create mode 100644 components/blocks/anchoring.tsx create mode 100644 public/uploads/logo.png delete mode 100644 styles.css create mode 100644 styles/anchoring.css create mode 100644 styles/header.css create mode 100644 styles/styles.css diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..8a3f756d6a694d0bfbbb3fb8d8a3a4ea3f807d95 GIT binary patch literal 4624 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 Y9=kz%<|&K#pZ{p|wT&?)TK1v;0X(&4`Tzg` literal 0 HcmV?d00001 diff --git a/components/blocks/anchoring.tsx b/components/blocks/anchoring.tsx new file mode 100644 index 0000000..bd18732 --- /dev/null +++ b/components/blocks/anchoring.tsx @@ -0,0 +1,50 @@ +import * as React from "react"; +import {useEffect, useRef, useState} from "react"; + +interface AnchoringProps { + text: string, // Default: Découvrez-en plus ! + linkTo: string // Default: #main-page +} + +export const Anchoring = ({ data }: { data: AnchoringProps }) => { + const [opacity, setOpacity] = useState(1); + const anchoringRef = useRef(null); + + const handleScroll = () => { + const scrollTop = window.scrollY || window.pageYOffset; + const elementHeight = anchoringRef.current.clientHeight; + const newOpacity = (elementHeight - scrollTop) / elementHeight; + setOpacity(newOpacity); + }; + + useEffect(() => { + handleScroll(); // Initialize opacity on mount + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + const anchoringStyle = { + opacity: opacity, + transition: 'opacity 0.3s', // You can add a transition for a smooth effect + }; + + return ( + + ); +}; diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx index c8e1c69..480a3a5 100644 --- a/components/layout/footer/footer.tsx +++ b/components/layout/footer/footer.tsx @@ -45,15 +45,6 @@ export const Footer = ({ data, icon, rawData }) => { href="/" className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap" > -
{data.social && data.social.facebook && ( diff --git a/components/layout/header.tsx b/components/layout/header.tsx index 2561ba7..7e70f6d 100644 --- a/components/layout/header.tsx +++ b/components/layout/header.tsx @@ -1,36 +1,23 @@ import React from "react"; import Link from "next/link"; -import { useRouter } from "next/router"; -import { Icon } from "../util/icon"; import { tinaField } from "tinacms/dist/react"; -import { GlobalHeader } from "../../tina/__generated__/types"; +import defaultLogo from "../../assets/img/logo.png"; +import {GlobalHeader} from "../../tina/__generated__/types"; export const Header = ({ data }: { data: GlobalHeader }) => { - const router = useRouter(); - - const [isClient, setIsClient] = React.useState(false); - React.useEffect(() => { - setIsClient(true); - }, []); - return ( -