project section changes

src/app/page.tsx

@@ -32,8 +32,9 @@ import { ProjectYear } from "../types/ProjectYear";
 import Histories from "@components/Histories";
 import Winners from "@components/Winners";
 import { getTime, getDate, getYear } from "date-fns";
-import YearCard from "@components/CardYear";
-import ProjectYearSection from "@components/ProjectYearSection";
+import LabelCard from "@components/CardYear";
+import ProjectsSection from "@components/ProjectsSection";
+import { motion } from "framer-motion";
 
 function getSortedProjects(projects: IProject[]) {
   const sorted = [...projects].sort(
@@ -46,11 +47,6 @@ function getSortedProjects(projects: IProject[]) {
     const project = sorted[i];
     const projectYear = getYear(project.releaseDate);
     const key = project.stage !== 6 ? "В работе" : projectYear;
-    // if(project.stage === 6){
-    //   if(sortedProject.has(key)){
-
-    //   }
-    // }
 
     if (sortedProject.has(key)) {
       const prevProjects = sortedProject.get(key) as IProject[];
@@ -62,11 +58,10 @@ function getSortedProjects(projects: IProject[]) {
     }
   }
 
-  console.log("sortedProject", sortedProject);
   return sortedProject;
 }
 
-function getProjectYears(projects: IProject[]) {
+function getProjectLabels(projects: IProject[]) {
   const projectYears: number[] = [];
 
   for (let i = 0; i < projects.length; i++) {
@@ -87,7 +82,7 @@ export default function App() {
     "/videos/features/virtual_tour.mp4"
   );
   const [projects, setProjects] = useState<IProject[]>([]);
-  const [projectYears, setProjectYears] = useState<number[]>([]);
+  const [projectLabels, setProjectLabels] = useState<(string | number)[]>([]);
   const [sortedProjects, setSortedProjects] = useState<SortedProject>();
   const [setModal] = useModalStore((state) => [state.setModal]);
   const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
@@ -96,10 +91,10 @@ export default function App() {
   async function getProjects() {
     try {
       const _projects: IProject[] = await api.get("projects").json();
-      const _projectYears = getProjectYears(_projects);
+      const _projectLabels = getProjectLabels(_projects);
       const _sortedProjects = getSortedProjects(_projects);
 
-      setProjectYears(_projectYears);
+      setProjectLabels(_projectLabels);
       setSortedProjects(_sortedProjects);
       setProjects(_projects);
     } catch (error) {
@@ -338,7 +333,11 @@ export default function App() {
             </div>
           </div>
 
-          <div className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
+          <motion.div
+            className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20"
+            viewport={{ once: true }}
+            onViewportEnter={() => console.log("first")}
+          >
             <div className="flex flex-col gap-20">
               <div className="xl:flex flex-col grid sm:grid-cols-2 xl:gap-8 gap-3">
                 <Heading2>
@@ -419,7 +418,7 @@ export default function App() {
             </div>
 
             <VideoSliderMobile />
-          </div>
+          </motion.div>
 
           {/* <Histories /> */}
 
@@ -647,23 +646,22 @@ export default function App() {
 
           <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
             <Heading2>Проекты</Heading2>
-            <div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4">
-              {/* {projectYears.map((year) => {
-                const projects =
-                  (sortedProjects && sortedProjects.get(year)) ?? [];
+            {projectLabels.map((year) => {
+              const projects =
+                (sortedProjects && sortedProjects.get(year)) ?? [];
 
-                return (
-                  <ProjectYearSection
-                    key={year}
-                    year={year}
-                    projects={projects}
-                  />
-                );
-              })} */}
-              {projects.map((project, index) => (
-                <ProjectCard key={index} {...project} />
-              ))}
-            </div>
+              return (
+                <>
+                  {projects.length !== 0 && (
+                    <ProjectsSection
+                      key={year}
+                      year={year}
+                      projects={projects}
+                    />
+                  )}
+                </>
+              );
+            })}
             <div className="2xl:hidden grid xl:grid-cols-4 sm:grid-cols-3 gap-4">
               {[...Array(5)].map((_, index) => (
                 <ProjectCard key={index} {...projects[index]} />

src/components/CardYear.tsx

@@ -1,9 +1,9 @@
-interface YearCardProps {
-  year: number;
+interface LabelCardProps {
+  label: number | string;
 }
 
-const YearCard = ({ year }: YearCardProps): JSX.Element => {
-  return <div className="font-semibold text-xl">{year}</div>;
+const LabelCard = ({ label }: LabelCardProps): JSX.Element => {
+  return <div className="font-semibold text-xl">{label}</div>;
 };
 
-export default YearCard;
+export default LabelCard;

src/components/ProjectYearSection.tsx

@@ -1,21 +0,0 @@
-import { IProject } from "../types/IProject";
-import YearCard from "./CardYear";
-import ProjectCard from "./ProjectCard";
-
-type ProjectYearSectionProps = {
-  year: number;
-  projects: IProject[];
-};
-
-const ProjectYearSection = ({ year, projects }: ProjectYearSectionProps) => {
-  return (
-    <>
-      <YearCard year={year} />
-      {projects.map((project, index) => (
-        <ProjectCard key={index} {...project} />
-      ))}
-    </>
-  );
-};
-
-export default ProjectYearSection;

src/components/ProjectsSection.tsx

@@ -0,0 +1,21 @@
+import { IProject } from "../types/IProject";
+import LabelCard from "./CardYear";
+import ProjectCard from "./ProjectCard";
+
+type ProjectYearSectionProps = {
+  year: number | string;
+  projects: IProject[];
+};
+
+const ProjectsSection = ({ year, projects }: ProjectYearSectionProps) => {
+  return (
+    <div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4">
+      <LabelCard label={year} />
+      {projects.map((project, index) => (
+        <ProjectCard key={index} {...project} />
+      ))}
+    </div>
+  );
+};
+
+export default ProjectsSection;