fix: fixing some logic

mctekk · Oct 19, 2023 · 052692e · 052692e
1 parent 5fef170
commit 052692e
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 96 deletions.
diff --git a/src/components/atoms/benefits-triangle/index.tsx b/src/components/atoms/benefits-triangle/index.tsx
@@ -1,63 +1,55 @@
-import React from 'react'
-import { DashedAnimation } from '../animations/animatedTriangle'
-import { IconBox } from '../icon-box'
-import { useProgressWithInView } from '@/model/interactions/use-progress-in-view'
+import React from "react";
+import { DashedAnimation } from "../animations/animatedTriangle";
+import { IconBox } from "../icon-box";
+import { useProgressWithInView } from "@/model/interactions/use-progress-in-view";
 
-type Props = {}
+type Props = {};
 
 export default function BenefitsTriangle({}: Props) {
-    const {
-        isActive,
-        clickOnIcon,
-        currentStatus,
-        progressLeft,
-
-      } = useProgressWithInView();
+  const { isActive, currentStatus, progressLeft,  } =
+    useProgressWithInView();
   return (
     <div className="md:w-1/2 w-full md:h-full  pt-12 relative flex items-center justify-center">
-    <div className="flex-col gap-6 md:gap-0 items-center justify-center flex max-w-sm relative w-full">
-      <DashedAnimation active={currentStatus.current} />
-      <div className="flex items-center h-fit w-full justify-center md:px-16 md:justify-start">
-        <IconBox
-          text="Business"
-          icon="/images/Business_Icon.svg"
-          isActive={isActive(0)}
-          onClick={clickOnIcon(0, 1)}
-          progress={progressLeft}
-        />
-      </div>
+      <div className="flex-col gap-6 md:gap-0 items-center justify-center flex max-w-sm relative w-full">
+        <DashedAnimation active={currentStatus.current} />
+        <div className="flex items-center h-fit w-full justify-center md:px-16 md:justify-start cursor-not-allowed">
+          <IconBox
+            text="Business"
+            className="cursor-default"
+            icon="/images/Business_Icon.svg"
+            isActive={isActive(0)}
+            progress={progressLeft}
+          />
+        </div>
 
-      <div className="flex items-center h-fit w-full justify-between px-12 md:justify-end">
-        <IconBox
-          text="Salespeople"
-          icon="/images/SA_Sales_Icon.svg"
-          isActive={isActive(1)}
-          onClick={clickOnIcon(1, 168)}
-          className="order-2 md:order-1"
-          progress={progressLeft}
-        />
+        <div className="flex items-center h-fit w-full justify-between px-12 md:justify-end">
+          <IconBox
+            text="Salespeople"
+            icon="/images/SA_Sales_Icon.svg"
+            isActive={isActive(1)}
+            className="order-2 md:order-1 cursor-default"
+            progress={progressLeft}
+          />
 
-        <IconBox
-          text="Customer"
-          icon="/images/SA_Customer_Icon.svg"
-          className="md:hidden "
-          isActive={isActive(2)}
-          onClick={clickOnIcon(2, 373)}
-          progress={progressLeft}
-        />
-      </div>
+          <IconBox
+            text="Customer"
+            icon="/images/SA_Customer_Icon.svg"
+            className="md:hidden cursor-default"
+            isActive={isActive(2)}
+            progress={progressLeft}
+          />
+        </div>
 
-      <div className="w-full flex items-center  ">
-        <IconBox
-          text="Customer"
-          icon="/images/SA_Customer_Icon.svg"
-          className="hidden md:flex md:flex-col"
-          isActive={isActive(2)}
-          onClick={clickOnIcon(2, 373)}
-          progress={progressLeft}
-        />
+        <div className="w-full flex items-center  ">
+          <IconBox
+            text="Customer"
+            icon="/images/SA_Customer_Icon.svg"
+            className="hidden md:flex md:flex-col cursor-default"
+            isActive={isActive(2)}
+            progress={progressLeft}
+          />
+        </div>
       </div>
     </div>
-  </div>
-  )
-}
+  );
+}
diff --git a/src/components/atoms/footer-socials/index.tsx b/src/components/atoms/footer-socials/index.tsx
@@ -13,7 +13,6 @@ const social = [
 export default function FooterSocials({kind}: Props) {
     const socialClasses = classNames(
         "text-[1.875rem] text-white rounded",
-        { "": kind === "dark" },
         { "bg-zinc-800": kind === "light" }
       );
   return (

diff --git a/src/components/atoms/render-list/index.tsx b/src/components/atoms/render-list/index.tsx
@@ -29,7 +29,7 @@ export function RenderList({
         {option}
       </p>
     ));
-  } else if (paragraph.type === "list") {
+  }
     return (
       <React.Fragment>
         <p className="text-base">
@@ -46,4 +46,4 @@ export function RenderList({
       </React.Fragment>
     );
   }
-}
+
diff --git a/src/components/organism/sections/about-us/team-members/index.tsx b/src/components/organism/sections/about-us/team-members/index.tsx
@@ -1,36 +1,51 @@
 import { TeamIcon } from "@/components/atoms/team-icon";
-import { Section } from '@/components/atoms/section';
+import { Section } from "@/components/atoms/section";
 
 interface AboutUsTeamMembers {
-    team: TeamMembers[];
+  team: TeamMembers[];
 }
 
 interface TeamMembers {
-    name: string;
-    title: string;
-    social: string;
-    code?: string;
+  name: string;
+  title: string;
+  social: string;
+  code?: string;
 }
-type Props ={
-    data: AboutUsTeamMembers
-}
-export function AboutUsTeam ({ data }:Props){
-    return (
-        <section className='section bg-zinc-800'>
-            <Section className='flex-grow container mx-auto'>
-                <div className='w-full flex items-center justify-center flex-col  text-white'>
-                    {/* first row */}
-                    <div className='w-full flex flex-wrap items-start justify-center gap-2'>
-                        {data.team.slice(0, 4).map((team) => <TeamIcon code={team.code} key={team.social} link={team.social} name={team.name} title={team.title}/>)}
-                    </div>
-
-                    {/* first row */}
-                    <div className='w-full flex flex-wrap items-start justify-center gap-2'>
-                        {data.team.slice(4, data.team.length).map((team) => <TeamIcon code={team.code} key={team.social} link={team.social} name={team.name} title={team.title}/>)}
-                    </div>
-
-                </div>
-            </Section>
-        </section>
-    )
+type Props = {
+  data: AboutUsTeamMembers;
+};
+export function AboutUsTeam({ data }: Props) {
+  return (
+    <section className="section bg-zinc-800">
+      <Section className="flex-grow container mx-auto">
+        <div className="w-full flex items-center justify-center flex-col  text-white">
+          {/* first row */}
+          <div className="w-full flex flex-wrap items-start justify-center gap-2">
+            {data.team.slice(0, 4).map((team) => (
+              <TeamIcon
+                code={team.code}
+                key={team.social}
+                link={team.social}
+                name={team.name}
+                title={team.title}
+              />
+            ))}
+          </div>
+
+          {/* second row */}
+          <div className="w-full flex flex-wrap items-start justify-center gap-2">
+            {data.team.slice(4, data.team.length).map((team) => (
+              <TeamIcon
+                code={team.code}
+                key={team.social}
+                link={team.social}
+                name={team.name}
+                title={team.title}
+              />
+            ))}
+          </div>
+        </div>
+      </Section>
+    </section>
+  );
 }
diff --git a/src/model/interactions/use-progress-in-view/index.tsx b/src/model/interactions/use-progress-in-view/index.tsx
@@ -1,15 +1,13 @@
-import { useRef, useState, useEffect } from 'react';
-import { useInView } from 'react-intersection-observer';
+import { useRef, useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 
 export function useProgressWithInView() {
   const currentCard = useRef(0);
-  const currentStatus = useRef<'one' | 'two' | 'tree' | 'idle'>('idle');
+  const currentStatus = useRef<"one" | "two" | "tree" | "idle">("idle");
   const [progressLeft, setProgress] = useState(1);
   const [ref, inView] = useInView({ initialInView: true });
 
   function startProgress() {
-
-
     let interval = 100;
 
     const timer = setInterval(() => {
@@ -45,17 +43,22 @@ export function useProgressWithInView() {
     }
   }, [currentCard, progressLeft]);
 
-  function clickOnIcon(card: number, startAt: number) {
+
+  function clickOnCard(card: number) {
     return () => {
       currentCard.current = card;
-      startProgress();
     };
   }
-  function clickOnCard(card: number) {
-    return () => {
-        currentCard.current = card
-    }}
   const isActive = (at: number) => currentCard.current === at;
 
-  return { ref,inView, isActive, clickOnIcon, currentStatus, progressLeft,currentCard,startProgress,clickOnCard };
+  return {
+    ref,
+    inView,
+    isActive,
+    currentStatus,
+    progressLeft,
+    currentCard,
+    startProgress,
+    clickOnCard,
+  };
 }