advcal/components/header.jsx

import { useEffect, useState } from "react";

const Header = () => {
  const [gifUrl, setGifUrl] = useState(null);
  useEffect(() => {
    async function getGif() {
      const response = await fetch(
        "https://api.giphy.com/v1/gifs/random?tag=christmas&api_key=3ziHSa4ptYJdv2dOuawgzpBhhiW09Ss1"
      );
      const { data } = await response.json();
      const gifUrl = data?.images?.fixed_height_small?.webp;
      setGifUrl(gifUrl);
    }

    getGif();
  }, []);

  return (
    <div className="header">
      <h1>The 2023 Edition - featuring special guests!</h1>
      {gifUrl && (
        <video className="yay-gif-video" src={gifUrl} autoPlay loop muted />
      )}
    </div>
  );
};

export default Header;