project page

client/package.json

@@ -14,7 +14,8 @@
     "gsap": "^3.12.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

client/src/components/DirectionsPage/DirectionImage.tsx

@@ -14,7 +14,7 @@ const DirectionImage = ({ title, description, image }: DirectionImageProps) => {
         className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
         alt=""
       />
-      <div className="absolute flex justify-between  left-0 top-0 z-20 w-full py-8 px-5 text-[22px]">
+      <div className="absolute flex justify-between left-0 top-0 z-20 w-full py-8 px-5 text-[22px]">
         <div>{title}</div>
         <ArrowIcon />
       </div>

client/src/components/GalleryPage/Gallery.tsx

@@ -0,0 +1,13 @@
+import GalleryTabs from "./GalleryTabs";
+import ProjectsContainer from "./ProjectsContainer";
+
+const Gallery = () => {
+  return (
+    <div className="w-[1440px] mx-auto">
+      <GalleryTabs />
+      <ProjectsContainer />
+    </div>
+  );
+};
+
+export default Gallery;

client/src/components/GalleryPage/GalleryTabs.tsx

@@ -0,0 +1,39 @@
+import { ProjectTab } from "../../types";
+import { projectTabs } from "../../consts/galleryPage";
+import useStore from "../../store/store";
+
+const GalleryTabs = () => {
+  const { selectedTab, setSelectedTab } = useStore();
+
+  const handleOnTabClick = (tab: ProjectTab) => {
+    return () => {
+      setSelectedTab(tab);
+    };
+  };
+
+  return (
+    <div className="pb-16">
+      <div className="grid grid-cols-7 text-[#9c8eba] font-semibold select-none">
+        {projectTabs.map((tab) => {
+          const isSelected = selectedTab.id === tab.id;
+
+          return (
+            <div
+              onClick={handleOnTabClick(tab)}
+              className={`border-b border-[#bca6ea] pb-3 cursor-pointer transition-colors duration-300 ${
+                isSelected
+                  ? "text-white border-b-white"
+                  : "hover:text-[#edaedd]"
+              }`}
+              key={tab.id}
+            >
+              {tab.title}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default GalleryTabs;

client/src/components/GalleryPage/ProjectsContainer.tsx

@@ -0,0 +1,29 @@
+import { ProjectType } from "../../types";
+import ProjectsSection from "./ProjectsSection";
+import { projects } from "../../consts/galleryPage";
+
+function getSlicedProjects(projects: ProjectType[]) {
+  const chunkSize = 5;
+  const slicedProjects = [];
+
+  for (let i = 0; i < projects.length; i += chunkSize) {
+    const chunk = projects.slice(i, i + chunkSize);
+    slicedProjects.push(chunk);
+  }
+
+  return slicedProjects;
+}
+
+const ProjectsContainer = () => {
+  const slicedProjects = getSlicedProjects(projects);
+
+  return (
+    <div className="flex flex-col gap-5">
+      {slicedProjects.map((pr) => (
+        <ProjectsSection projects={pr} />
+      ))}
+    </div>
+  );
+};
+
+export default ProjectsContainer;

client/src/components/GalleryPage/ProjectsSection.tsx

@@ -0,0 +1,122 @@
+import { ProjectType } from "../../types";
+
+type GalleryProjectsProps = {
+  projects: ProjectType[];
+};
+
+const ProjectsSection = ({ projects }: GalleryProjectsProps) => {
+  if (projects.length === 5) {
+    return <FiveProjects projects={projects} />;
+  }
+  if (projects.length === 4) {
+    return <FourProjects projects={projects} />;
+  }
+
+  return <ThreeProjects projects={projects} />;
+};
+
+const FiveProjects = ({ projects }: GalleryProjectsProps) => {
+  const rows = [
+    "row-span-2",
+    "row-span-1",
+    "row-span-3",
+    "row-span-2",
+    "row-span-1",
+  ];
+
+  return (
+    <>
+      <div
+        className={`grid-cols-3 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
+      >
+        {projects.map((el, index) => {
+          const row = rows[index];
+          return (
+            <div
+              className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
+            >
+              <img
+                src={el.imagePath}
+                alt=""
+                className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
+              />
+              <div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
+                {el.title !== "" && <h4>{el.title}</h4>}
+                {el.description !== "" && (
+                  <p className="text-[16px] pt-4">{el.description}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+const FourProjects = ({ projects }: GalleryProjectsProps) => {
+  const rows = ["row-span-2", "row-span-1", "row-span-2", "row-span-1"];
+  return (
+    <>
+      <div
+        className={`grid-cols-2 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
+      >
+        {projects.map((el, index) => {
+          const row = rows[index];
+          return (
+            <div
+              className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
+            >
+              <img
+                src={el.imagePath}
+                alt=""
+                className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
+              />
+              <div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
+                {el.title !== "" && <h4>{el.title}</h4>}
+                {el.description !== "" && (
+                  <p className="text-[16px] pt-4">{el.description}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+const ThreeProjects = ({ projects }: GalleryProjectsProps) => {
+  const rows = ["row-span-2", "row-span-3", "row-span-1"];
+
+  return (
+    <>
+      <div
+        className={`grid-cols-2 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
+      >
+        {projects.map((el, index) => {
+          const row = rows[index];
+          return (
+            <div
+              className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
+            >
+              <img
+                src={el.imagePath}
+                alt=""
+                className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
+              />
+              <div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
+                {el.title !== "" && <h4>{el.title}</h4>}
+                {el.description !== "" && (
+                  <p className="text-[16px] pt-4">{el.description}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default ProjectsSection;

client/src/components/Header/Header.tsx

@@ -2,13 +2,22 @@ import LogoIcon from "../../icons/LogoIcon";
 import SocialLinks from "./SocialLinks";
 import LanguageSwitcher from "./LanguageSwitcher";
 import Tabs from "../Tabs";
+import { useNavigate } from "react-router-dom";
 
 const Header = (): JSX.Element => {
+  const navigate = useNavigate();
+
+  const handleOnClick = () => {
+    navigate("/");
+  };
+
   return (
     <>
       <header className="px-10 flex justify-between text-[#edaedd] text-lg font-semibold py-12">
         <div className="w-1/5">
-          <LogoIcon />
+          <button onClick={handleOnClick}>
+            <LogoIcon />
+          </button>
         </div>
         <div className="3/5">
           <Tabs isHeader />

client/src/components/HeaderTitle.tsx

@@ -5,10 +5,10 @@ type HeaderTitleProps = {
 
 const HeaderTitle = ({ title, description }: HeaderTitleProps) => {
   return (
-    <div className="text-white mx-auto w-[1440px] flex flex-col pb-8 gap-8">
+    <section className="text-white mx-auto w-[1440px] flex flex-col pb-8 gap-8">
       <h2 className="text-6xl font-bold">{title}</h2>
       <p className="w-[39%]">{description}</p>
-    </div>
+    </section>
   );
 };
 

client/src/components/TechnologyPage/Accordion.tsx

@@ -18,15 +18,16 @@ const Accordion = ({
 
   const handleOnClick = () => {
     onClick();
+    if (!isSelected) {
+      const timeout = setTimeout(() => {
+        window.scrollTo({
+          top: contentRef.current?.offsetTop,
+          behavior: "smooth",
+        });
 
-    const timeout = setTimeout(() => {
-      window.scrollTo({
-        top: contentRef.current?.offsetTop,
-        behavior: "smooth",
-      });
-
-      clearTimeout(timeout);
-    }, 500);
+        clearTimeout(timeout);
+      }, 500);
+    }
   };
 
   return (
@@ -55,29 +56,3 @@ const Accordion = ({
 };
 
 export default Accordion;
-
-// const contentRef = useRef<HTMLDivElement>(null);
-//   const divRef = useRef<HTMLDivElement>(null);
-
-//   function handleClick() {
-//     onClick();
-
-//     setTimeout(() => {
-//       window.scrollTo({
-//         top: divRef.current?.offsetTop,
-//         behavior: "smooth",
-//       });
-//     }, 200);
-//   }
-
-//   return (
-//     <div ref={divRef} className="w-[300px] flex flex-col">
-//       <button onClick={handleClick} className="p-4 bg-red-300">
-//         {title}
-//       </button>
-//       <div
-//         ref={contentRef}
-//         className={`bg-blue-300 ${
-//           selected
-//             ? `${contentRef.current} opacity-100 h-[1500px]`
-//             : "h-0 opaci

client/src/components/TechnologyPage/accordions/AR.tsx

@@ -1,5 +1,7 @@
 import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
+import useStore from "../../../store/store";
 import { AdvantageType } from "../../../types";
+import VideoModal from "../../VideoModal";
 import TechnologyAdvantages from "../TechnologyAdvantages";
 
 const ADVANTAGES: AdvantageType[] = [
@@ -26,6 +28,14 @@ const ADVANTAGES: AdvantageType[] = [
 ];
 
 const AR = () => {
+  const { setModal } = useStore();
+
+  const handleOnVideoClick = () => {
+    setModal(
+      <VideoModal path="https://www.youtube.com/embed/7hylkyKN8Oc?autoplay=1&rel=0" />
+    );
+  };
+
   return (
     <div>
       <div className="flex justify-between pb-10">
@@ -39,7 +49,10 @@ const AR = () => {
         <div className="flex items-center gap-10 ">
           <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
             <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
-            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
+            <div
+              className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"
+              onClick={handleOnVideoClick}
+            ></div>
           </div>
           <div className="text-3xl">
             Как это

client/src/components/TechnologyPage/accordions/KinnectRealSense.tsx

@@ -1,6 +1,8 @@
 import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
 import { AdvantageType } from "../../../types";
 import TechnologyAdvantages from "../TechnologyAdvantages";
+import useStore from "../../../store/store";
+import VideoModal from "../../VideoModal";
 
 const ADVANTAGES: AdvantageType[] = [
   {
@@ -29,6 +31,14 @@ const ADVANTAGES: AdvantageType[] = [
 ];
 
 const KinnectRealSense = () => {
+  const { setModal } = useStore();
+
+  const handleOnVideoClick = () => {
+    setModal(
+      <VideoModal path="https://www.youtube.com/embed/TnZ5oLYbulA?autoplay=1&rel=0" />
+    );
+  };
+
   return (
     <div>
       <div className="flex justify-between pb-10">
@@ -42,7 +52,10 @@ const KinnectRealSense = () => {
         <div className="flex items-center gap-10 ">
           <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
             <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
-            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
+            <div
+              className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"
+              onClick={handleOnVideoClick}
+            ></div>
           </div>
           <div className="text-3xl">
             Как это

client/src/components/TechnologyPage/accordions/MobileApp.tsx

@@ -1,5 +1,7 @@
+import useStore from "../../../store/store";
 import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
 import { AdvantageType } from "../../../types";
+import VideoModal from "../../VideoModal";
 import TechnologyAdvantages from "../TechnologyAdvantages";
 
 const ADVANTAGES: AdvantageType[] = [
@@ -28,6 +30,14 @@ const ADVANTAGES: AdvantageType[] = [
 ];
 
 const MobileApp = () => {
+  const { setModal } = useStore();
+
+  const handleOnVideoClick = () => {
+    setModal(
+      <VideoModal path="https://www.youtube.com/embed/AF8U6ixfoYU?autoplay=1&rel=0" />
+    );
+  };
+
   return (
     <div>
       <div className="flex justify-between pb-10">
@@ -40,7 +50,10 @@ const MobileApp = () => {
         <div className="flex items-center gap-10 ">
           <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
             <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
-            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
+            <div
+              className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"
+              onClick={handleOnVideoClick}
+            ></div>
           </div>
           <div className="text-3xl">
             Как это

client/src/components/TechnologyPage/accordions/TouchScreen.tsx

@@ -1,5 +1,7 @@
+import useStore from "../../../store/store";
 import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
 import { AdvantageType } from "../../../types";
+import VideoModal from "../../VideoModal";
 import TechnologyAdvantages from "../TechnologyAdvantages";
 
 const ADVANTAGES: AdvantageType[] = [
@@ -30,6 +32,13 @@ const ADVANTAGES: AdvantageType[] = [
 ];
 
 const TouchScreen = () => {
+  const { setModal } = useStore();
+
+  const handleOnVideoClick = () => {
+    setModal(
+      <VideoModal path="https://www.youtube.com/embed/xXgPV0P6U0U?autoplay=1&rel=0" />
+    );
+  };
   return (
     <div>
       <div className="flex justify-between pb-10">
@@ -44,7 +53,10 @@ const TouchScreen = () => {
         <div className="flex items-center gap-10 ">
           <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
             <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
-            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
+            <div
+              className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"
+              onClick={handleOnVideoClick}
+            ></div>
           </div>
           <div className="text-3xl">
             Как это

client/src/components/TechnologyPage/accordions/VR.tsx

@@ -1,6 +1,8 @@
 import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
 import { AdvantageType } from "../../../types";
 import TechnologyAdvantages from "../TechnologyAdvantages";
+import useStore from "../../../store/store";
+import VideoModal from "../../VideoModal";
 
 const ADVANTAGES: AdvantageType[] = [
   {
@@ -30,6 +32,14 @@ const ADVANTAGES: AdvantageType[] = [
 ];
 
 const VR = () => {
+  const { setModal } = useStore();
+
+  const handleOnVideoClick = () => {
+    setModal(
+      <VideoModal path="https://www.youtube.com/embed/UY7tB1B0GCM?autoplay=1&amp;rel=0" />
+    );
+  };
+
   return (
     <div>
       <div className="flex justify-between pb-10">
@@ -43,7 +53,10 @@ const VR = () => {
         <div className="flex items-center gap-10 ">
           <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
             <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
-            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
+            <div
+              className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"
+              onClick={handleOnVideoClick}
+            ></div>
           </div>
           <div className="text-3xl">
             Как это

client/src/components/TechnologyPage/accordions/WebGl.tsx

@@ -1,6 +1,8 @@
 import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
 import { AdvantageType } from "../../../types";
+import VideoModal from "../../VideoModal";
 import TechnologyAdvantages from "../TechnologyAdvantages";
+import useStore from "../../../store/store";
 
 const ADVANTAGES: AdvantageType[] = [
   {
@@ -29,6 +31,13 @@ const ADVANTAGES: AdvantageType[] = [
 ];
 
 const WebGl = () => {
+  const { setModal } = useStore();
+
+  const handleOnVideoClick = () => {
+    setModal(
+      <VideoModal path="https://www.youtube.com/embed/tuR6KlCi8nU?autoplay=1&rel=0" />
+    );
+  };
   return (
     <div>
       <div className="flex justify-between pb-10">
@@ -40,7 +49,10 @@ const WebGl = () => {
         <div className="flex items-center gap-10 ">
           <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
             <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
-            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
+            <div
+              className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"
+              onClick={handleOnVideoClick}
+            ></div>
           </div>
           <div className="text-3xl">
             Как это

client/src/components/VideoModal.tsx

@@ -0,0 +1,41 @@
+import CrossIcon from "../icons/CrossIcon";
+import useStore from "../store/store";
+
+type VideoModalProps = {
+  path?: string;
+};
+
+const VideoModal = ({ path }: VideoModalProps) => {
+  const { setModal } = useStore();
+
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  return (
+    <div
+      className="fixed w-screen h-screen bg-[#00000099] z-30 flex justify-center items-center"
+      onClick={handleOnCloseClick}
+    >
+      <button
+        className="absolute top-5 right-10 text-white"
+        onClick={handleOnCloseClick}
+      >
+        <CrossIcon />
+      </button>
+
+      <div className="h-[500px] w-[960px]">
+        <iframe
+          id="youtubeiframe318424844"
+          className=""
+          width="100%"
+          height="100%"
+          src={path}
+          allowFullScreen={true}
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default VideoModal;

client/src/components/Wrapper.tsx

@@ -2,10 +2,13 @@ import Header from "./Header/Header";
 import Footer from "./Footer/Footer";
 import { Outlet } from "react-router-dom";
 import ScrollToTopButton from "./ScrollToTopButton";
+import useStore from "../store/store";
 
 const Wrapper = () => {
+  const { modal } = useStore();
   return (
     <>
+      {modal}
       <Header />
       <Outlet />
       <ScrollToTopButton />

client/src/consts/galleryPage.ts

@@ -0,0 +1,160 @@
+import { ProjectTab, ProjectType } from "../types";
+
+const projectTabs: ProjectTab[] = [
+    { id: 1, title: "ВСЕ ПРОЕКТЫ" },
+    { id: 2, title: "VR" },
+    { id: 3, title: "AR" },
+    { id: 4, title: "TOUCH-SCREEN" },
+    { id: 5, title: "WEB GL" },
+    { id: 6, title: "MOBILE APP" },
+    { id: 7, title: "РЕШЕНИЕ ДЛЯ НЕДВИЖИМОСТИ" },
+  ];
+
+  const projects: ProjectType[] = [
+    {
+      id: 1,
+      title: "Интерактивный пол: игра «Собери мусор» 2023г.",
+      imagePath: "/images/galleryProjects/gallery-projects-1.jpg",
+      description: "",
+      link: "",
+      tab:projectTabs[0]
+    },
+    {
+      id: 2,
+      title: 'МФК Re:volution towers для АН "НКС" г. Екатеринбург',
+      imagePath: "/images/galleryProjects/gallery-projects-2.jpg",
+      description: "Интерактивная презентация 2023.",
+      link: "",
+      tab:projectTabs[6]
+    },
+    {
+      id: 3,
+      title: "Удалённая демонстрация жилой недвижимости 2023г.",
+      imagePath: "/images/galleryProjects/gallery-projects-3.jpg",
+      description: "",
+      link: "",
+      tab:projectTabs[0]
+    },
+    {
+      id: 4,
+      title: "Baniyas North Abu Dhabi",
+      imagePath: "/images/galleryProjects/gallery-projects-4.jpg",
+      description: "Интерактивная презентация жилого проекта 2023г.",
+      link: "",
+      tab:projectTabs[6]
+    },
+    {
+      id: 5,
+      title: "",
+      imagePath: "/images/galleryProjects/gallery-projects-5.jpg",
+      description: "Строительный Форум100+ 2023г.",
+      link: "",
+    },
+    {
+      id: 6,
+      title: 'ЖК "Life Residence" для Паритет девелопмент',
+      imagePath: "/images/galleryProjects/gallery-projects-6.jpg",
+      description: "Интерактивная презентация 2023г.",
+      link: "",
+    },
+    {
+      id: 7,
+      title: 'АО "Метаверс',
+      imagePath: "/images/galleryProjects/gallery-projects-7.jpg",
+      description: "Web Gl 2022г.",
+      link: "",
+    },
+    {
+      id: 8,
+      title: 'Центральная ППК"',
+      imagePath: "/images/galleryProjects/gallery-projects-8.jpg",
+      description: "AR приложение 2022г.",
+      link: "",
+    },
+    {
+      id: 9,
+      title: 'Мобильная компрессорная станция для АО "УЗГА"',
+      imagePath: "/images/galleryProjects/gallery-projects-9.jpg",
+      description: "Интерактивная 3D презентация 2022г.",
+      link: "",
+    },
+    {
+      id: 10,
+      title: "Виртуальная лаборатория оценки качества молока для УРГЭУ (СИНХ)",
+      imagePath: "/images/galleryProjects/gallery-projects-10.jpg",
+      description: "VR 2022г.",
+      link: "",
+    },
+    {
+      id: 11,
+      title: "AR- приложение для Департамента природопользования 2022г.",
+      imagePath: "/images/galleryProjects/gallery-projects-11.jpg",
+      description: "",
+      link: "",
+    },
+    {
+      id: 12,
+      title: 'ЖК "Айвазовский" для ГК "ЭНКО" г. Тюмень',
+      imagePath: "/images/galleryProjects/gallery-projects-12.jpg",
+      description: "Интерактивный макет с VR - туром 2021г.",
+      link: "",
+    },
+    {
+      id: 13,
+      title: 'ЖК "Графика" для Мавис Девелопмент г. Санкт-Петербург',
+      imagePath: "/images/galleryProjects/gallery-projects-13.jpg",
+      description: "TOUCH-SCREEN 2021г.",
+      link: "",
+    },
+    {
+      id: 14,
+      title: 'ООО "CyberLympha" 2021г.',
+      imagePath: "/images/galleryProjects/gallery-projects-14.jpg",
+      description: "Мобильная AR игра",
+      link: "",
+    },
+    {
+      id: 15,
+      title: "AR- приложение Интерктивный квест 2021г.",
+      imagePath: "/images/galleryProjects/gallery-projects-15.jpg",
+      description: "",
+      link: "",
+    },
+    {
+      id: 16,
+      title: '"Екатеринбург Сити" для ОАО УГМК г.Екатеринбург',
+      imagePath: "/images/galleryProjects/gallery-projects-16.jpg",
+      description: "Интерактивный макет 2021г.",
+      link: "",
+    },
+    {
+      id: 17,
+      title: "Smart oil and gas",
+      imagePath: "/images/galleryProjects/gallery-projects-17.jpg",
+      description: "Виртуальная выставка 2021г.",
+      link: "",
+    },
+    {
+      id: 18,
+      title: "World Skills Russia МежВУЗ",
+      imagePath: "/images/galleryProjects/gallery-projects-18.jpg",
+      description: "Интерактивная онлайн выставка 2021г.",
+      link: "",
+    },
+    {
+      id: 19,
+      title: "WorldSkills 2020",
+      imagePath: "/images/galleryProjects/gallery-projects-19.jpg",
+      description: "Интерактивная онлайн выставка 2020г.",
+      link: "",
+    },
+    {
+      id: 20,
+      title: "Демо квартира",
+      imagePath: "/images/galleryProjects/gallery-projects-20.jpg",
+      description: "Интерактивный конфигуратор квартиры 2021г.",
+      link: "",
+    },
+  ];
+
+  export {projectTabs, projects}

client/src/icons/CrossIcon.tsx

@@ -0,0 +1,31 @@
+const CrossIcon = () => {
+  return (
+    <svg
+      role="presentation"
+      width="23px"
+      height="23px"
+      viewBox="0 0 23 23"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd">
+        <rect
+          transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) "
+          x="10.3137085"
+          y="-3.6862915"
+          width="2"
+          height="30"
+        ></rect>
+        <rect
+          transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) "
+          x="10.3137085"
+          y="-3.6862915"
+          width="2"
+          height="30"
+        ></rect>
+      </g>
+    </svg>
+  );
+};
+
+export default CrossIcon;

client/src/main.tsx

@@ -5,6 +5,7 @@ import MainPage from "./pages/MainPage/MainPage.tsx";
 import TechnologyPage from "./pages/TechnologyPage/TechnologyPage.tsx";
 import DirectionPage from "./pages/DirectionsPage/DirectionsPage.tsx";
 import "./index.css";
+import GalleryPage from "./pages/GalleryPage/GalleryPage.tsx";
 
 const router = createBrowserRouter([
   {
@@ -23,6 +24,10 @@ const router = createBrowserRouter([
         path: "/directions",
         element: <DirectionPage />,
       },
+      {
+        path: "/gallery",
+        element: <GalleryPage />,
+      },
     ],
   },
 ]);

client/src/pages/GalleryPage/GalleryPage.tsx

@@ -0,0 +1,15 @@
+import HeaderTitle from "../../components/HeaderTitle";
+import Gallery from "../../components/GalleryPage/Gallery";
+
+const GalleryPage = () => {
+  return (
+    <>
+      <div>
+        <HeaderTitle title={"Проекты"} />
+        <Gallery />
+      </div>
+    </>
+  );
+};
+
+export default GalleryPage;

client/src/store/store.ts

@@ -1,12 +1,18 @@
 import { create } from "zustand";
+import { ProjectTab } from "../types";
+import { projectTabs } from "../consts/galleryPage";
 
 interface StoreType {
   modal: React.ReactNode | null;
+  selectedTab: ProjectTab;
+  setSelectedTab: (tab: ProjectTab) =>void;
   setModal: (modal: React.ReactNode | null) => void;
 }
 
 const useStore = create<StoreType>((set) => ({
   modal: null,
+  selectedTab: projectTabs[0],
+  setSelectedTab: (tab) => set(() => ({ selectedTab: tab })),
   setModal: (modal) => set(() => ({ modal: modal })),
 }));
 

client/src/types.ts

@@ -18,4 +18,18 @@ type DirectionImageType = {
   image: string;
 }
 
-export type {AccordionType, AdvantageType, DirectionImageType}
+type ProjectType = {
+  id: number;
+  title: string;
+  imagePath: string;
+  description: string;
+  link: string;
+  tab?: ProjectTab;
+};
+
+type ProjectTab = {
+  id: number;
+  title: string;
+};
+
+export type {ProjectTab, AccordionType, AdvantageType, DirectionImageType, ProjectType}

client/yarn.lock

@@ -1764,6 +1764,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -1824,3 +1829,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.4.7:
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.7.tgz#355406be6b11ab335f59a66d2cf9815e8f24038c"
+  integrity sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==
+  dependencies:
+    use-sync-external-store "1.2.0"

node_modules/.yarn-integrity

@@ -1,17 +0,0 @@
-{
-  "systemParams": "win32-x64-115",
-  "modulesFolders": [
-    "node_modules"
-  ],
-  "flags": [],
-  "linkedModules": [],
-  "topLevelPatterns": [
-    "zustand@^4.4.7"
-  ],
-  "lockfileEntries": {
-    "use-sync-external-store@1.2.0": "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a",
-    "zustand@^4.4.7": "https://registry.yarnpkg.com/zustand/-/zustand-4.4.7.tgz#355406be6b11ab335f59a66d2cf9815e8f24038c"
-  },
-  "files": [],
-  "artifacts": {}
-}

node_modules/use-sync-external-store/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Facebook, Inc. and its affiliates.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

node_modules/use-sync-external-store/README.md

@@ -1,5 +0,0 @@
-# use-sync-external-store
-
-Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports Hooks.
-
-See also https://github.com/reactwg/react-18/discussions/86.

node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js

@@ -1,239 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-shim.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-}
-          var React = require('react');
-
-var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-function error(format) {
-  {
-    {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      printWarning('error', format, args);
-    }
-  }
-}
-
-function printWarning(level, format, args) {
-  // When changing this logic, you might want to also
-  // update consoleWithStackDev.www.js as well.
-  {
-    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-    var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-    if (stack !== '') {
-      format += '%s';
-      args = args.concat([stack]);
-    } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-    var argsWithFormat = args.map(function (item) {
-      return String(item);
-    }); // Careful: RN currently depends on this prefix
-
-    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-    // breaks IE9: https://github.com/facebook/react/issues/13610
-    // eslint-disable-next-line react-internal/no-production-logging
-
-    Function.prototype.apply.call(console[level], console, argsWithFormat);
-  }
-}
-
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
-function is(x, y) {
-  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-  ;
-}
-
-var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-// dispatch for CommonJS interop named imports.
-
-var useState = React.useState,
-    useEffect = React.useEffect,
-    useLayoutEffect = React.useLayoutEffect,
-    useDebugValue = React.useDebugValue;
-var didWarnOld18Alpha = false;
-var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
-// because of a very particular set of implementation details and assumptions
-// -- change any one of them and it will break. The most important assumption
-// is that updates are always synchronous, because concurrent rendering is
-// only available in versions of React that also have a built-in
-// useSyncExternalStore API. And we only use this shim when the built-in API
-// does not exist.
-//
-// Do not assume that the clever hacks used by this hook also work in general.
-// The point of this shim is to replace the need for hacks by other libraries.
-
-function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-// React do not expose a way to check if we're hydrating. So users of the shim
-// will need to track that themselves and return the correct value
-// from `getSnapshot`.
-getServerSnapshot) {
-  {
-    if (!didWarnOld18Alpha) {
-      if (React.startTransition !== undefined) {
-        didWarnOld18Alpha = true;
-
-        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
-      }
-    }
-  } // Read the current snapshot from the store on every render. Again, this
-  // breaks the rules of React, and only works here because of specific
-  // implementation details, most importantly that updates are
-  // always synchronous.
-
-
-  var value = getSnapshot();
-
-  {
-    if (!didWarnUncachedGetSnapshot) {
-      var cachedValue = getSnapshot();
-
-      if (!objectIs(value, cachedValue)) {
-        error('The result of getSnapshot should be cached to avoid an infinite loop');
-
-        didWarnUncachedGetSnapshot = true;
-      }
-    }
-  } // Because updates are synchronous, we don't queue them. Instead we force a
-  // re-render whenever the subscribed state changes by updating an some
-  // arbitrary useState hook. Then, during render, we call getSnapshot to read
-  // the current value.
-  //
-  // Because we don't actually use the state returned by the useState hook, we
-  // can save a bit of memory by storing other stuff in that slot.
-  //
-  // To implement the early bailout, we need to track some things on a mutable
-  // object. Usually, we would put that in a useRef hook, but we can stash it in
-  // our useState hook instead.
-  //
-  // To force a re-render, we call forceUpdate({inst}). That works because the
-  // new object always fails an equality check.
-
-
-  var _useState = useState({
-    inst: {
-      value: value,
-      getSnapshot: getSnapshot
-    }
-  }),
-      inst = _useState[0].inst,
-      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
-  // in the layout phase so we can access it during the tearing check that
-  // happens on subscribe.
-
-
-  useLayoutEffect(function () {
-    inst.value = value;
-    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
-    // commit phase if there was an interleaved mutation. In concurrent mode
-    // this can happen all the time, but even in synchronous mode, an earlier
-    // effect may have mutated the store.
-
-    if (checkIfSnapshotChanged(inst)) {
-      // Force a re-render.
-      forceUpdate({
-        inst: inst
-      });
-    }
-  }, [subscribe, value, getSnapshot]);
-  useEffect(function () {
-    // Check for changes right before subscribing. Subsequent changes will be
-    // detected in the subscription handler.
-    if (checkIfSnapshotChanged(inst)) {
-      // Force a re-render.
-      forceUpdate({
-        inst: inst
-      });
-    }
-
-    var handleStoreChange = function () {
-      // TODO: Because there is no cross-renderer API for batching updates, it's
-      // up to the consumer of this library to wrap their subscription event
-      // with unstable_batchedUpdates. Should we try to detect when this isn't
-      // the case and print a warning in development?
-      // The store changed. Check if the snapshot changed since the last time we
-      // read from the store.
-      if (checkIfSnapshotChanged(inst)) {
-        // Force a re-render.
-        forceUpdate({
-          inst: inst
-        });
-      }
-    }; // Subscribe to the store and return a clean-up function.
-
-
-    return subscribe(handleStoreChange);
-  }, [subscribe]);
-  useDebugValue(value);
-  return value;
-}
-
-function checkIfSnapshotChanged(inst) {
-  var latestGetSnapshot = inst.getSnapshot;
-  var prevValue = inst.value;
-
-  try {
-    var nextValue = latestGetSnapshot();
-    return !objectIs(prevValue, nextValue);
-  } catch (error) {
-    return true;
-  }
-}
-
-function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
-  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-  // React do not expose a way to check if we're hydrating. So users of the shim
-  // will need to track that themselves and return the correct value
-  // from `getSnapshot`.
-  return getSnapshot();
-}
-
-var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
-
-var isServerEnvironment = !canUseDOM;
-
-var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
-
-exports.useSyncExternalStore = useSyncExternalStore$2;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-}
-        
-  })();
-}

node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js

@@ -1,227 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-shim.native.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-}
-          var React = require('react');
-
-var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-function error(format) {
-  {
-    {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      printWarning('error', format, args);
-    }
-  }
-}
-
-function printWarning(level, format, args) {
-  // When changing this logic, you might want to also
-  // update consoleWithStackDev.www.js as well.
-  {
-    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-    var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-    if (stack !== '') {
-      format += '%s';
-      args = args.concat([stack]);
-    } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-    var argsWithFormat = args.map(function (item) {
-      return String(item);
-    }); // Careful: RN currently depends on this prefix
-
-    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-    // breaks IE9: https://github.com/facebook/react/issues/13610
-    // eslint-disable-next-line react-internal/no-production-logging
-
-    Function.prototype.apply.call(console[level], console, argsWithFormat);
-  }
-}
-
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
-function is(x, y) {
-  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-  ;
-}
-
-var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-// dispatch for CommonJS interop named imports.
-
-var useState = React.useState,
-    useEffect = React.useEffect,
-    useLayoutEffect = React.useLayoutEffect,
-    useDebugValue = React.useDebugValue;
-var didWarnOld18Alpha = false;
-var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
-// because of a very particular set of implementation details and assumptions
-// -- change any one of them and it will break. The most important assumption
-// is that updates are always synchronous, because concurrent rendering is
-// only available in versions of React that also have a built-in
-// useSyncExternalStore API. And we only use this shim when the built-in API
-// does not exist.
-//
-// Do not assume that the clever hacks used by this hook also work in general.
-// The point of this shim is to replace the need for hacks by other libraries.
-
-function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-// React do not expose a way to check if we're hydrating. So users of the shim
-// will need to track that themselves and return the correct value
-// from `getSnapshot`.
-getServerSnapshot) {
-  {
-    if (!didWarnOld18Alpha) {
-      if (React.startTransition !== undefined) {
-        didWarnOld18Alpha = true;
-
-        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
-      }
-    }
-  } // Read the current snapshot from the store on every render. Again, this
-  // breaks the rules of React, and only works here because of specific
-  // implementation details, most importantly that updates are
-  // always synchronous.
-
-
-  var value = getSnapshot();
-
-  {
-    if (!didWarnUncachedGetSnapshot) {
-      var cachedValue = getSnapshot();
-
-      if (!objectIs(value, cachedValue)) {
-        error('The result of getSnapshot should be cached to avoid an infinite loop');
-
-        didWarnUncachedGetSnapshot = true;
-      }
-    }
-  } // Because updates are synchronous, we don't queue them. Instead we force a
-  // re-render whenever the subscribed state changes by updating an some
-  // arbitrary useState hook. Then, during render, we call getSnapshot to read
-  // the current value.
-  //
-  // Because we don't actually use the state returned by the useState hook, we
-  // can save a bit of memory by storing other stuff in that slot.
-  //
-  // To implement the early bailout, we need to track some things on a mutable
-  // object. Usually, we would put that in a useRef hook, but we can stash it in
-  // our useState hook instead.
-  //
-  // To force a re-render, we call forceUpdate({inst}). That works because the
-  // new object always fails an equality check.
-
-
-  var _useState = useState({
-    inst: {
-      value: value,
-      getSnapshot: getSnapshot
-    }
-  }),
-      inst = _useState[0].inst,
-      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
-  // in the layout phase so we can access it during the tearing check that
-  // happens on subscribe.
-
-
-  useLayoutEffect(function () {
-    inst.value = value;
-    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
-    // commit phase if there was an interleaved mutation. In concurrent mode
-    // this can happen all the time, but even in synchronous mode, an earlier
-    // effect may have mutated the store.
-
-    if (checkIfSnapshotChanged(inst)) {
-      // Force a re-render.
-      forceUpdate({
-        inst: inst
-      });
-    }
-  }, [subscribe, value, getSnapshot]);
-  useEffect(function () {
-    // Check for changes right before subscribing. Subsequent changes will be
-    // detected in the subscription handler.
-    if (checkIfSnapshotChanged(inst)) {
-      // Force a re-render.
-      forceUpdate({
-        inst: inst
-      });
-    }
-
-    var handleStoreChange = function () {
-      // TODO: Because there is no cross-renderer API for batching updates, it's
-      // up to the consumer of this library to wrap their subscription event
-      // with unstable_batchedUpdates. Should we try to detect when this isn't
-      // the case and print a warning in development?
-      // The store changed. Check if the snapshot changed since the last time we
-      // read from the store.
-      if (checkIfSnapshotChanged(inst)) {
-        // Force a re-render.
-        forceUpdate({
-          inst: inst
-        });
-      }
-    }; // Subscribe to the store and return a clean-up function.
-
-
-    return subscribe(handleStoreChange);
-  }, [subscribe]);
-  useDebugValue(value);
-  return value;
-}
-
-function checkIfSnapshotChanged(inst) {
-  var latestGetSnapshot = inst.getSnapshot;
-  var prevValue = inst.value;
-
-  try {
-    var nextValue = latestGetSnapshot();
-    return !objectIs(prevValue, nextValue);
-  } catch (error) {
-    return true;
-  }
-}
-
-var shim =  useSyncExternalStore;
-var useSyncExternalStore$1 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
-
-exports.useSyncExternalStore = useSyncExternalStore$1;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-}
-        
-  })();
-}

node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.production.min.js

@@ -1,11 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-shim.native.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';var e=require("react");function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
-function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:q;

node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js

@@ -1,11 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-shim.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';var e=require("react");function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
-function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;

node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js

@@ -1,165 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-}
-          var React = require('react');
-var shim = require('use-sync-external-store/shim');
-
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
-function is(x, y) {
-  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-  ;
-}
-
-var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-var useSyncExternalStore = shim.useSyncExternalStore;
-
-// for CommonJS interop.
-
-var useRef = React.useRef,
-    useEffect = React.useEffect,
-    useMemo = React.useMemo,
-    useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
-
-function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-  // Use this to track the rendered snapshot.
-  var instRef = useRef(null);
-  var inst;
-
-  if (instRef.current === null) {
-    inst = {
-      hasValue: false,
-      value: null
-    };
-    instRef.current = inst;
-  } else {
-    inst = instRef.current;
-  }
-
-  var _useMemo = useMemo(function () {
-    // Track the memoized state using closure variables that are local to this
-    // memoized instance of a getSnapshot function. Intentionally not using a
-    // useRef hook, because that state would be shared across all concurrent
-    // copies of the hook/component.
-    var hasMemo = false;
-    var memoizedSnapshot;
-    var memoizedSelection;
-
-    var memoizedSelector = function (nextSnapshot) {
-      if (!hasMemo) {
-        // The first time the hook is called, there is no memoized result.
-        hasMemo = true;
-        memoizedSnapshot = nextSnapshot;
-
-        var _nextSelection = selector(nextSnapshot);
-
-        if (isEqual !== undefined) {
-          // Even if the selector has changed, the currently rendered selection
-          // may be equal to the new selection. We should attempt to reuse the
-          // current value if possible, to preserve downstream memoizations.
-          if (inst.hasValue) {
-            var currentSelection = inst.value;
-
-            if (isEqual(currentSelection, _nextSelection)) {
-              memoizedSelection = currentSelection;
-              return currentSelection;
-            }
-          }
-        }
-
-        memoizedSelection = _nextSelection;
-        return _nextSelection;
-      } // We may be able to reuse the previous invocation's result.
-
-
-      // We may be able to reuse the previous invocation's result.
-      var prevSnapshot = memoizedSnapshot;
-      var prevSelection = memoizedSelection;
-
-      if (objectIs(prevSnapshot, nextSnapshot)) {
-        // The snapshot is the same as last time. Reuse the previous selection.
-        return prevSelection;
-      } // The snapshot has changed, so we need to compute a new selection.
-
-
-      // The snapshot has changed, so we need to compute a new selection.
-      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
-      // has changed. If it hasn't, return the previous selection. That signals
-      // to React that the selections are conceptually equal, and we can bail
-      // out of rendering.
-
-      // If a custom isEqual function is provided, use that to check if the data
-      // has changed. If it hasn't, return the previous selection. That signals
-      // to React that the selections are conceptually equal, and we can bail
-      // out of rendering.
-      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-        return prevSelection;
-      }
-
-      memoizedSnapshot = nextSnapshot;
-      memoizedSelection = nextSelection;
-      return nextSelection;
-    }; // Assigning this to a constant so that Flow knows it can't change.
-
-
-    // Assigning this to a constant so that Flow knows it can't change.
-    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
-
-    var getSnapshotWithSelector = function () {
-      return memoizedSelector(getSnapshot());
-    };
-
-    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
-      return memoizedSelector(maybeGetServerSnapshot());
-    };
-    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
-      getSelection = _useMemo[0],
-      getServerSelection = _useMemo[1];
-
-  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-  useEffect(function () {
-    inst.hasValue = true;
-    inst.value = value;
-  }, [value]);
-  useDebugValue(value);
-  return value;
-}
-
-exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-}
-        
-  })();
-}

node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js

@@ -1,12 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';var h=require("react"),n=require("use-sync-external-store/shim");function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
-exports.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return[function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
-u(function(){f.hasValue=!0;f.value=d},[d]);w(d);return d};

node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.development.js

@@ -1,164 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-with-selector.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-}
-          var React = require('react');
-
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
-function is(x, y) {
-  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-  ;
-}
-
-var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-var useSyncExternalStore = React.useSyncExternalStore;
-
-// for CommonJS interop.
-
-var useRef = React.useRef,
-    useEffect = React.useEffect,
-    useMemo = React.useMemo,
-    useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
-
-function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-  // Use this to track the rendered snapshot.
-  var instRef = useRef(null);
-  var inst;
-
-  if (instRef.current === null) {
-    inst = {
-      hasValue: false,
-      value: null
-    };
-    instRef.current = inst;
-  } else {
-    inst = instRef.current;
-  }
-
-  var _useMemo = useMemo(function () {
-    // Track the memoized state using closure variables that are local to this
-    // memoized instance of a getSnapshot function. Intentionally not using a
-    // useRef hook, because that state would be shared across all concurrent
-    // copies of the hook/component.
-    var hasMemo = false;
-    var memoizedSnapshot;
-    var memoizedSelection;
-
-    var memoizedSelector = function (nextSnapshot) {
-      if (!hasMemo) {
-        // The first time the hook is called, there is no memoized result.
-        hasMemo = true;
-        memoizedSnapshot = nextSnapshot;
-
-        var _nextSelection = selector(nextSnapshot);
-
-        if (isEqual !== undefined) {
-          // Even if the selector has changed, the currently rendered selection
-          // may be equal to the new selection. We should attempt to reuse the
-          // current value if possible, to preserve downstream memoizations.
-          if (inst.hasValue) {
-            var currentSelection = inst.value;
-
-            if (isEqual(currentSelection, _nextSelection)) {
-              memoizedSelection = currentSelection;
-              return currentSelection;
-            }
-          }
-        }
-
-        memoizedSelection = _nextSelection;
-        return _nextSelection;
-      } // We may be able to reuse the previous invocation's result.
-
-
-      // We may be able to reuse the previous invocation's result.
-      var prevSnapshot = memoizedSnapshot;
-      var prevSelection = memoizedSelection;
-
-      if (objectIs(prevSnapshot, nextSnapshot)) {
-        // The snapshot is the same as last time. Reuse the previous selection.
-        return prevSelection;
-      } // The snapshot has changed, so we need to compute a new selection.
-
-
-      // The snapshot has changed, so we need to compute a new selection.
-      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
-      // has changed. If it hasn't, return the previous selection. That signals
-      // to React that the selections are conceptually equal, and we can bail
-      // out of rendering.
-
-      // If a custom isEqual function is provided, use that to check if the data
-      // has changed. If it hasn't, return the previous selection. That signals
-      // to React that the selections are conceptually equal, and we can bail
-      // out of rendering.
-      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-        return prevSelection;
-      }
-
-      memoizedSnapshot = nextSnapshot;
-      memoizedSelection = nextSelection;
-      return nextSelection;
-    }; // Assigning this to a constant so that Flow knows it can't change.
-
-
-    // Assigning this to a constant so that Flow knows it can't change.
-    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
-
-    var getSnapshotWithSelector = function () {
-      return memoizedSelector(getSnapshot());
-    };
-
-    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
-      return memoizedSelector(maybeGetServerSnapshot());
-    };
-    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
-      getSelection = _useMemo[0],
-      getServerSelection = _useMemo[1];
-
-  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-  useEffect(function () {
-    inst.hasValue = true;
-    inst.value = value;
-  }, [value]);
-  useDebugValue(value);
-  return value;
-}
-
-exports.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-}
-        
-  })();
-}

node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.production.min.js

@@ -1,12 +0,0 @@
-/**
- * @license React
- * use-sync-external-store-with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';var g=require("react");function n(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var p="function"===typeof Object.is?Object.is:n,q=g.useSyncExternalStore,r=g.useRef,t=g.useEffect,u=g.useMemo,v=g.useDebugValue;
-exports.useSyncExternalStoreWithSelector=function(a,b,e,l,h){var c=r(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=u(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==h&&f.hasValue){var b=f.value;if(h(b,a))return k=b}return k=a}b=k;if(p(d,a))return b;var e=l(a);if(void 0!==h&&h(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return[function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,h]);var d=q(a,c[0],c[1]);
-t(function(){f.hasValue=!0;f.value=d},[d]);v(d);return d};

node_modules/use-sync-external-store/cjs/use-sync-external-store.development.js

@@ -1,84 +0,0 @@
-/**
- * @license React
- * use-sync-external-store.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-}
-          var React = require('react');
-
-var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-function error(format) {
-  {
-    {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      printWarning('error', format, args);
-    }
-  }
-}
-
-function printWarning(level, format, args) {
-  // When changing this logic, you might want to also
-  // update consoleWithStackDev.www.js as well.
-  {
-    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-    var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-    if (stack !== '') {
-      format += '%s';
-      args = args.concat([stack]);
-    } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-    var argsWithFormat = args.map(function (item) {
-      return String(item);
-    }); // Careful: RN currently depends on this prefix
-
-    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-    // breaks IE9: https://github.com/facebook/react/issues/13610
-    // eslint-disable-next-line react-internal/no-production-logging
-
-    Function.prototype.apply.call(console[level], console, argsWithFormat);
-  }
-}
-
-var useSyncExternalStore = React.useSyncExternalStore;
-
-{
-  error("The main 'use-sync-external-store' entry point is not supported; all it " + "does is re-export useSyncExternalStore from the 'react' package, so " + 'it only works with React 18+.' + '\n\n' + 'If you wish to support React 16 and 17, import from ' + "'use-sync-external-store/shim' instead. It will fall back to a shimmed " + 'implementation when the native one is not available.' + '\n\n' + "If you only support React 18+, you can import directly from 'react'.");
-}
-
-exports.useSyncExternalStore = useSyncExternalStore;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-}
-        
-  })();
-}

node_modules/use-sync-external-store/cjs/use-sync-external-store.production.min.js

@@ -1,10 +0,0 @@
-/**
- * @license React
- * use-sync-external-store.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';var a=require("react").useSyncExternalStore;exports.useSyncExternalStore=a;

node_modules/use-sync-external-store/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/use-sync-external-store.production.min.js');
-} else {
-  module.exports = require('./cjs/use-sync-external-store.development.js');
-}

node_modules/use-sync-external-store/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "use-sync-external-store",
-  "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
-  "version": "1.2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/facebook/react.git",
-    "directory": "packages/use-sync-external-store"
-  },
-  "files": [
-    "LICENSE",
-    "README.md",
-    "index.js",
-    "index.native.js",
-    "with-selector.js",
-    "with-selector.native.js",
-    "shim/",
-    "cjs/"
-  ],
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  }
-}

node_modules/use-sync-external-store/shim/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('../cjs/use-sync-external-store-shim.production.min.js');
-} else {
-  module.exports = require('../cjs/use-sync-external-store-shim.development.js');
-}

node_modules/use-sync-external-store/shim/index.native.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('../cjs/use-sync-external-store-shim.native.production.min.js');
-} else {
-  module.exports = require('../cjs/use-sync-external-store-shim.native.development.js');
-}

node_modules/use-sync-external-store/shim/with-selector.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.min.js');
-} else {
-  module.exports = require('../cjs/use-sync-external-store-shim/with-selector.development.js');
-}

node_modules/use-sync-external-store/with-selector.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/use-sync-external-store-with-selector.production.min.js');
-} else {
-  module.exports = require('./cjs/use-sync-external-store-with-selector.development.js');
-}

node_modules/zustand/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Paul Henschel
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

node_modules/zustand/context.d.ts

@@ -1,25 +0,0 @@
-import ReactExports from 'react';
-import type { ReactNode } from 'react';
-import type { StoreApi } from 'zustand';
-type UseContextStore<S extends StoreApi<unknown>> = {
-    (): ExtractState<S>;
-    <U>(selector: (state: ExtractState<S>) => U, equalityFn?: (a: U, b: U) => boolean): U;
-};
-type ExtractState<S> = S extends {
-    getState: () => infer T;
-} ? T : never;
-type WithoutCallSignature<T> = {
-    [K in keyof T]: T[K];
-};
-/**
- * @deprecated Use `createStore` and `useStore` for context usage
- */
-declare function createContext<S extends StoreApi<unknown>>(): {
-    Provider: ({ createStore, children, }: {
-        createStore: () => S;
-        children: ReactNode;
-    }) => ReactExports.FunctionComponentElement<ReactExports.ProviderProps<S | undefined>>;
-    useStore: UseContextStore<S>;
-    useStoreApi: () => WithoutCallSignature<S>;
-};
-export default createContext;

node_modules/zustand/context.js

@@ -1,65 +0,0 @@
-'use strict';
-
-var ReactExports = require('react');
-var traditional = require('zustand/traditional');
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var createElement = ReactExports.createElement,
-  reactCreateContext = ReactExports.createContext,
-  useContext = ReactExports.useContext,
-  useMemo = ReactExports.useMemo,
-  useRef = ReactExports.useRef;
-function createContext() {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn("[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180.");
-  }
-  var ZustandContext = reactCreateContext(undefined);
-  var Provider = function Provider(_ref) {
-    var createStore = _ref.createStore,
-      children = _ref.children;
-    var storeRef = useRef();
-    if (!storeRef.current) {
-      storeRef.current = createStore();
-    }
-    return createElement(ZustandContext.Provider, {
-      value: storeRef.current
-    }, children);
-  };
-  var useContextStore = function useContextStore(selector, equalityFn) {
-    var store = useContext(ZustandContext);
-    if (!store) {
-      throw new Error('Seems like you have not used zustand provider as an ancestor.');
-    }
-    return traditional.useStoreWithEqualityFn(store, selector, equalityFn);
-  };
-  var useStoreApi = function useStoreApi() {
-    var store = useContext(ZustandContext);
-    if (!store) {
-      throw new Error('Seems like you have not used zustand provider as an ancestor.');
-    }
-    return useMemo(function () {
-      return _extends({}, store);
-    }, [store]);
-  };
-  return {
-    Provider: Provider,
-    useStore: useContextStore,
-    useStoreApi: useStoreApi
-  };
-}
-
-module.exports = createContext;

node_modules/zustand/esm/context.d.mts

@@ -1,25 +0,0 @@
-import ReactExports from 'react';
-import type { ReactNode } from 'react';
-import type { StoreApi } from 'zustand';
-type UseContextStore<S extends StoreApi<unknown>> = {
-    (): ExtractState<S>;
-    <U>(selector: (state: ExtractState<S>) => U, equalityFn?: (a: U, b: U) => boolean): U;
-};
-type ExtractState<S> = S extends {
-    getState: () => infer T;
-} ? T : never;
-type WithoutCallSignature<T> = {
-    [K in keyof T]: T[K];
-};
-/**
- * @deprecated Use `createStore` and `useStore` for context usage
- */
-declare function createContext<S extends StoreApi<unknown>>(): {
-    Provider: ({ createStore, children, }: {
-        createStore: () => S;
-        children: ReactNode;
-    }) => ReactExports.FunctionComponentElement<ReactExports.ProviderProps<S | undefined>>;
-    useStore: UseContextStore<S>;
-    useStoreApi: () => WithoutCallSignature<S>;
-};
-export default createContext;

node_modules/zustand/esm/context.d.ts

@@ -1,25 +0,0 @@
-import ReactExports from 'react';
-import type { ReactNode } from 'react';
-import type { StoreApi } from 'zustand';
-type UseContextStore<S extends StoreApi<unknown>> = {
-    (): ExtractState<S>;
-    <U>(selector: (state: ExtractState<S>) => U, equalityFn?: (a: U, b: U) => boolean): U;
-};
-type ExtractState<S> = S extends {
-    getState: () => infer T;
-} ? T : never;
-type WithoutCallSignature<T> = {
-    [K in keyof T]: T[K];
-};
-/**
- * @deprecated Use `createStore` and `useStore` for context usage
- */
-declare function createContext<S extends StoreApi<unknown>>(): {
-    Provider: ({ createStore, children, }: {
-        createStore: () => S;
-        children: ReactNode;
-    }) => ReactExports.FunctionComponentElement<ReactExports.ProviderProps<S | undefined>>;
-    useStore: UseContextStore<S>;
-    useStoreApi: () => WithoutCallSignature<S>;
-};
-export default createContext;

node_modules/zustand/esm/context.js

@@ -1,61 +0,0 @@
-import ReactExports from 'react';
-import { useStoreWithEqualityFn } from 'zustand/traditional';
-
-const {
-  createElement,
-  createContext: reactCreateContext,
-  useContext,
-  useMemo,
-  useRef
-} = ReactExports;
-function createContext() {
-  if (process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180."
-    );
-  }
-  const ZustandContext = reactCreateContext(void 0);
-  const Provider = ({
-    createStore,
-    children
-  }) => {
-    const storeRef = useRef();
-    if (!storeRef.current) {
-      storeRef.current = createStore();
-    }
-    return createElement(
-      ZustandContext.Provider,
-      { value: storeRef.current },
-      children
-    );
-  };
-  const useContextStore = (selector, equalityFn) => {
-    const store = useContext(ZustandContext);
-    if (!store) {
-      throw new Error(
-        "Seems like you have not used zustand provider as an ancestor."
-      );
-    }
-    return useStoreWithEqualityFn(
-      store,
-      selector,
-      equalityFn
-    );
-  };
-  const useStoreApi = () => {
-    const store = useContext(ZustandContext);
-    if (!store) {
-      throw new Error(
-        "Seems like you have not used zustand provider as an ancestor."
-      );
-    }
-    return useMemo(() => ({ ...store }), [store]);
-  };
-  return {
-    Provider,
-    useStore: useContextStore,
-    useStoreApi
-  };
-}
-
-export { createContext as default };

node_modules/zustand/esm/context.mjs

@@ -1,61 +0,0 @@
-import ReactExports from 'react';
-import { useStoreWithEqualityFn } from 'zustand/traditional';
-
-const {
-  createElement,
-  createContext: reactCreateContext,
-  useContext,
-  useMemo,
-  useRef
-} = ReactExports;
-function createContext() {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
-    console.warn(
-      "[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180."
-    );
-  }
-  const ZustandContext = reactCreateContext(void 0);
-  const Provider = ({
-    createStore,
-    children
-  }) => {
-    const storeRef = useRef();
-    if (!storeRef.current) {
-      storeRef.current = createStore();
-    }
-    return createElement(
-      ZustandContext.Provider,
-      { value: storeRef.current },
-      children
-    );
-  };
-  const useContextStore = (selector, equalityFn) => {
-    const store = useContext(ZustandContext);
-    if (!store) {
-      throw new Error(
-        "Seems like you have not used zustand provider as an ancestor."
-      );
-    }
-    return useStoreWithEqualityFn(
-      store,
-      selector,
-      equalityFn
-    );
-  };
-  const useStoreApi = () => {
-    const store = useContext(ZustandContext);
-    if (!store) {
-      throw new Error(
-        "Seems like you have not used zustand provider as an ancestor."
-      );
-    }
-    return useMemo(() => ({ ...store }), [store]);
-  };
-  return {
-    Provider,
-    useStore: useContextStore,
-    useStoreApi
-  };
-}
-
-export { createContext as default };

node_modules/zustand/esm/index.d.mts

@@ -1,3 +0,0 @@
-export * from './vanilla.mjs';
-export * from './react.mjs';
-export { default } from './react.mjs';

node_modules/zustand/esm/index.d.ts

@@ -1,3 +0,0 @@
-export * from './vanilla';
-export * from './react';
-export { default } from './react';

node_modules/zustand/esm/index.js

@@ -1,47 +0,0 @@
-import { createStore } from 'zustand/vanilla';
-export * from 'zustand/vanilla';
-import ReactExports from 'react';
-import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector.js';
-
-const { useDebugValue } = ReactExports;
-const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
-let didWarnAboutEqualityFn = false;
-function useStore(api, selector = api.getState, equalityFn) {
-  if (process.env.NODE_ENV !== "production" && equalityFn && !didWarnAboutEqualityFn) {
-    console.warn(
-      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
-    );
-    didWarnAboutEqualityFn = true;
-  }
-  const slice = useSyncExternalStoreWithSelector(
-    api.subscribe,
-    api.getState,
-    api.getServerState || api.getState,
-    selector,
-    equalityFn
-  );
-  useDebugValue(slice);
-  return slice;
-}
-const createImpl = (createState) => {
-  if (process.env.NODE_ENV !== "production" && typeof createState !== "function") {
-    console.warn(
-      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
-    );
-  }
-  const api = typeof createState === "function" ? createStore(createState) : createState;
-  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-const create = (createState) => createState ? createImpl(createState) : createImpl;
-var react = (createState) => {
-  if (process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`."
-    );
-  }
-  return create(createState);
-};
-
-export { create, react as default, useStore };

node_modules/zustand/esm/index.mjs

@@ -1,47 +0,0 @@
-import { createStore } from 'zustand/vanilla';
-export * from 'zustand/vanilla';
-import ReactExports from 'react';
-import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector.js';
-
-const { useDebugValue } = ReactExports;
-const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
-let didWarnAboutEqualityFn = false;
-function useStore(api, selector = api.getState, equalityFn) {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
-    console.warn(
-      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
-    );
-    didWarnAboutEqualityFn = true;
-  }
-  const slice = useSyncExternalStoreWithSelector(
-    api.subscribe,
-    api.getState,
-    api.getServerState || api.getState,
-    selector,
-    equalityFn
-  );
-  useDebugValue(slice);
-  return slice;
-}
-const createImpl = (createState) => {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && typeof createState !== "function") {
-    console.warn(
-      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
-    );
-  }
-  const api = typeof createState === "function" ? createStore(createState) : createState;
-  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-const create = (createState) => createState ? createImpl(createState) : createImpl;
-var react = (createState) => {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
-    console.warn(
-      "[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`."
-    );
-  }
-  return create(createState);
-};
-
-export { create, react as default, useStore };

node_modules/zustand/esm/middleware.d.mts

@@ -1,5 +0,0 @@
-export * from './middleware/redux.mjs';
-export * from './middleware/devtools.mjs';
-export * from './middleware/subscribeWithSelector.mjs';
-export * from './middleware/combine.mjs';
-export * from './middleware/persist.mjs';