Software: Apache/2.4.41 (Ubuntu). PHP/8.0.30 

uname -a: Linux apirnd 5.4.0-204-generic #224-Ubuntu SMP Thu Dec 5 13:38:28 UTC 2024 x86_64 

uid=33(www-data) gid=33(www-data) groups=33(www-data) 

Safe-mode: OFF (not secure)

/var/www/html/wincloud_gateway/node_modules/@buffetjs/custom/src/components/Header/   drwxr-xr-x
Free 12.96 GB of 57.97 GB (22.35%)
                            Encoder    Tools    Proc.    FTP brute    Sec.    SQL    PHP-code    Update    Self remove    Logout    

Viewing file:     index.js (1.84 KB)      -rw-r--r--

/**
 *
 * Header
 *
 */

import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';

import { HeaderTitle, HeaderActions } from '@buffetjs/core';
import { Header as Wrapper, LoadingBar } from '@buffetjs/styles';

function Header({ actions, content, isLoading, stickable, title }) {
  const [isHeaderSticky, setHeaderSticky] = useState(false);
  const headerRef = useRef(null);

  const { label, cta } = title;

  const handleScroll = () => {
    if (headerRef.current) {
      setHeaderSticky(headerRef.current.getBoundingClientRect().top <= 20);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', () => handleScroll);
    };
  }, []);

  return (
    <Wrapper ref={headerRef}>
      <div
        className={`sticky-wrapper${
          isHeaderSticky && stickable ? ' sticky' : ''
        }`}
      >
        <div className="row">
          <div className="col-sm-6 header-title">
            <HeaderTitle title={label} cta={cta} />
            {isLoading ? <LoadingBar /> : <p>{content}</p>}
          </div>
          <div className="col-sm-6 justify-content-end">
            <HeaderActions actions={actions} />
          </div>
        </div>
      </div>
    </Wrapper>
  );
}

Header.defaultProps = {
  actions: [],
  content: null,
  isLoading: false,
  stickable: true,
  title: {
    label: null,
    cta: null,
  },
};

Header.propTypes = {
  actions: PropTypes.arrayOf(
    PropTypes.shape({
      onClick: PropTypes.func,
      title: PropTypes.string,
    })
  ),
  content: PropTypes.string,
  isLoading: PropTypes.bool,
  stickable: PropTypes.bool,
  title: PropTypes.shape({
    cta: PropTypes.shape({
      icon: PropTypes.string,
      onClick: PropTypes.func,
    }),
    label: PropTypes.string,
  }),
};

export default Header;