Untitled

import { useEffect } from "react";
import PageLayout from "../components/PageLayout";
import { useGlobalContext } from "../context/GlobalContext";
import { Slide } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
function BlankPage() {
  const { setIsLoading } = useGlobalContext();

  const slideImages = [
    {
      url: "https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80",
      caption: "Slide 1",
    },
    {
      url: "https://images.unsplash.com/photo-1637748183118-a07fee605204?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
      caption: "Slide 2",
    },
    {
      url: "https://images.unsplash.com/photo-1637743965368-263b189397ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80",
      caption: "Slide 3",
    },
  ];

  useEffect(() => {
    setIsLoading(false);
    return () => {
      setIsLoading(true);
    };
  }, []);

  return (
    <PageLayout title="Halaman Utama">
      <div className="slide-container">
        <Slide>
          {slideImages.map((slideImage, index) => (
            <div className="each-slide" key={index}>
              <div
                style={{
                  backgroundImage: `url(${slideImage.url})`,
                  height: "300px",
                }}
              >
                <span>{slideImage.caption}</span>
              </div>
            </div>
          ))}
        </Slide>
      </div>
      <Tabs>
        <TabList>
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>

        <TabPanel>
          <h2>Any content 1</h2>
        </TabPanel>
        <TabPanel>
          <h2>Any content 2</h2>
        </TabPanel>
      </Tabs>
      <img
        src="https://2.bp.blogspot.com/-D-7I7S-_iUw/W_3zzlzj8MI/AAAAAAAAB9g/JWtWc_QBW5E85Zk7Qh8OX9VR75aelL5rwCLcBGAs/s1600/flow%2Bchart.JPG"
        alt=""
      />
      {/* <div className="flex space-x-2">
        <p>Ini adalah template halaman</p>
        <span className="bg-gray-400 rounded-md px-2">
          /src/pages/BlankPage
        </span>
      </div> */}
    </PageLayout>
  );
}

export default BlankPage;