From d2a5bf542ca7e57dde496a1bf12c8722609a43cb Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Sun, 20 Apr 2025 12:55:27 +0200 Subject: [PATCH] feat: Add Header and Footer components --- app/layouts/LayoutDefault.tsx | 119 +--------------------------------- app/partials/Footer.tsx | 43 ++++++++++++ app/partials/Header.tsx | 70 ++++++++++++++++++++ 3 files changed, 116 insertions(+), 116 deletions(-) create mode 100644 app/partials/Footer.tsx create mode 100644 app/partials/Header.tsx diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx index 16bbc9c..5aac222 100755 --- a/app/layouts/LayoutDefault.tsx +++ b/app/layouts/LayoutDefault.tsx @@ -1,128 +1,15 @@ -import type { JSX, JSXElement } from "solid-js"; +import type { JSXElement } from "solid-js"; -// import { CookiesContainer } from "@/components/common/Cookies"; -import { MobileNavigation } from "@/partials/MobileNavigation"; import { usePageContext } from "vike-solid/usePageContext"; -// import { clientOnly } from "vike-solid/clientOnly"; -import { Search } from "@/components/Search"; -import { createEffect, createSignal } from "solid-js"; import { HeroSection } from "@/partials/HeroSection"; import { Navigation } from "@/partials/Navigation"; +import { Header } from "@/partials/Header"; +import { Footer } from "@/partials/Footer"; import { DocsLayout } from "./DocsLayout"; -import { Link } from "@/components/Link"; -import { Logo } from "@/components/Logo"; import { Toaster } from "solid-toast"; -import clsx from "clsx"; import "./tailwind.css"; -// const Search = clientOnly(() => -// import("@/components/Search").then((module) => module.Search), -// ); - -function GitHubIcon(props: JSX.IntrinsicElements["svg"]) { - return ( - - ); -} - -function Header() { - const [isScrolled, setIsScrolled] = createSignal(false); - - createEffect(() => { - function onScroll() { - setIsScrolled(window.scrollY > 0); - } - onScroll(); - window.addEventListener("scroll", onScroll, { passive: true }); - return () => { - window.removeEventListener("scroll", onScroll); - }; - }, []); - - return ( -
-
- -
- -
- - - - -
- -
- - // } - /> -
- -
- - - -
-
- ); -} - -function Footer() { - return ( - - ); -} - type DefaultLayoutProps = { children: JSXElement; }; diff --git a/app/partials/Footer.tsx b/app/partials/Footer.tsx new file mode 100644 index 0000000..c9c9818 --- /dev/null +++ b/app/partials/Footer.tsx @@ -0,0 +1,43 @@ +import { Logo } from "@/components/Logo"; +import { Link } from "@/components/Link"; + +export function Footer() { + return ( + + ); +} diff --git a/app/partials/Header.tsx b/app/partials/Header.tsx new file mode 100644 index 0000000..f36afd7 --- /dev/null +++ b/app/partials/Header.tsx @@ -0,0 +1,70 @@ +import type { JSX } from "solid-js"; + +import { MobileNavigation } from "@/partials/MobileNavigation"; +import { createEffect, createSignal } from "solid-js"; +import { Search } from "@/components/Search"; +import { Link } from "@/components/Link"; +import { Logo } from "@/components/Logo"; +import clsx from "clsx"; + +function GitHubIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + ); +} + +export function Header() { + const [isScrolled, setIsScrolled] = createSignal(false); + + createEffect(() => { + function onScroll() { + setIsScrolled(window.scrollY > 0); + } + onScroll(); + window.addEventListener("scroll", onScroll, { passive: true }); + return () => { + window.removeEventListener("scroll", onScroll); + }; + }, []); + + return ( +
+
+ +
+ +
+ + + + +
+ +
+ + // } + /> +
+ +
+ + + +
+
+ ); +}