github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/components/layout/Header.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  'use client'
    20  
    21  import Image from 'next/image'
    22  import {useState, useEffect} from "react";
    23  import styles from "../../app/page.module.css"
    24  import {Poppins} from "next/font/google";
    25  
    26  import PelicanLogo from "../../public/static/images/PelicanPlatformLogo_Icon.png"
    27  import GithubIcon from "../../public/static/images/github-mark.png"
    28  import {Typography} from "@mui/material";
    29  
    30  export const Header = ({text}: {text: string}) => {
    31  
    32      let [scrolledTop, setScrolledTop] = useState(true);
    33  
    34      useEffect(() => {
    35          setScrolledTop(window.scrollY < 50);
    36          addEventListener("scroll", (event) => {
    37              setScrolledTop(window.scrollY < 50);
    38          });
    39      }, [] )
    40  
    41      return (
    42          <div className={`${styles.header} ${scrolledTop ? styles.headerScrolled : ""}`} style={{display: "flex", justifyContent:"space-between", padding:"1rem", position:"fixed", zIndex:"1", width: "100%", overflow: "hidden"}}>
    43              <div style={{display:"flex"}}>
    44                  <Image
    45                      src={PelicanLogo}
    46                      alt={"Pelican Logo"}
    47                      width={32}
    48                      height={32}
    49                  />
    50                  <Typography variant={"h5"} my={"auto"} ml={".5rem"}>{text}</Typography>
    51              </div>
    52              <div>
    53                  <a href={"https://github.com/PelicanPlatform"}>
    54                      <Image
    55                          src={GithubIcon}
    56                          alt={"Github Mark"}
    57                          width={32}
    58                          height={32}
    59                      />
    60                  </a>
    61              </div>
    62          </div>
    63      )
    64  }