a tool for shared writing and social publishing
leaflet.pub
1"use client";
2import { useState, useEffect } from "react";
3
4export const Header = (props: {
5 children: React.ReactNode;
6 cardBorderHidden: boolean;
7}) => {
8 let [scrollPos, setScrollPos] = useState(0);
9
10 useEffect(() => {
11 const homeContent = document.getElementById("home-content");
12
13 const handleScroll = () => {
14 if (homeContent) {
15 setScrollPos(homeContent.scrollTop);
16 }
17 };
18
19 if (homeContent) {
20 homeContent.addEventListener("scroll", handleScroll);
21 return () => homeContent.removeEventListener("scroll", handleScroll);
22 }
23 }, []);
24
25 let headerBGColor = props.cardBorderHidden
26 ? "var(--bg-leaflet)"
27 : "var(--bg-page)";
28
29 return (
30 <div
31 className={`
32 headerWrapper
33 sticky top-0 z-10
34 w-full bg-transparent
35 `}
36 >
37 <div
38 style={
39 scrollPos < 20
40 ? {
41 paddingLeft: `calc(${scrollPos / 20}*8px)`,
42 paddingRight: `calc(${scrollPos / 20}*8px)`,
43 }
44 : { paddingLeft: `8px`, paddingRight: `8px` }
45 }
46 >
47 <div
48 className={`
49 headerContent
50 border rounded-lg
51 ${scrollPos > 20 ? "border-border-light" : "border-transparent"}
52 py-1
53 w-full flex justify-between items-center gap-4`}
54 style={
55 scrollPos < 20
56 ? {
57 backgroundColor: props.cardBorderHidden
58 ? `rgba(${headerBGColor}, ${scrollPos / 60 + 0.75})`
59 : `rgba(${headerBGColor}, ${scrollPos / 20})`,
60 paddingLeft: props.cardBorderHidden
61 ? "4px"
62 : `calc(${scrollPos / 20}*4px)`,
63 paddingRight: props.cardBorderHidden
64 ? "8px"
65 : `calc(${scrollPos / 20}*8px)`,
66 }
67 : {
68 backgroundColor: `rgb(${headerBGColor})`,
69 paddingLeft: "4px",
70 paddingRight: "8px",
71 }
72 }
73 >
74 {props.children}
75 </div>
76 </div>
77 </div>
78 );
79};