feat: imageStack working for mobile images (3)

Author: abnerjs

src/assets/images/works/index.ts

@@ -0,0 +1,13 @@
+import summaryReactCourse from 'src/assets/images/works/react-course/summary.png'
+import createGoalReactCourse from 'src/assets/images/works/react-course/create-goal.png'
+
+import InsumosAppointments from 'src/assets/images/works/insumos/appointments.png'
+import InsumosFichas from 'src/assets/images/works/insumos/fichas.png'
+import InsumosMachines from 'src/assets/images/works/insumos/machines.png'
+
+export const ReactCourseAssets = [summaryReactCourse, createGoalReactCourse]
+export const InsumosAssets = [
+  InsumosAppointments,
+  InsumosMachines,
+  InsumosFichas,
+]

src/assets/images/works/insumos/appointments.png

@@ -6,34 +6,66 @@ interface Props {
 }
 
 const ImageStack = (props: Props) => {
-  const [transformArgs, setTransformArgs] = useState('')
-
-  useEffect(() => {
-    if (props.images.length === 2) setTransformArgs('transform scale-[0.85]')
-    if (props.images.length === 3) setTransformArgs('transform scale-[0.7]')
-  }, [])
-
   return (
     <div className='img relative'>
       {props.images.map((img, index) => {
-        let transformOrigin = ''
+        let transformArgs = ''
+        let transformOrigin = 'origin-center'
         let zIndex = ''
+        let bgPosition = 'bg-center'
 
         if (props.type === 'desktop') {
           if (props.images.length === 2) {
+            transformArgs = 'transform scale-[0.85]'
+            if (index === 0) {
+              transformOrigin = 'origin-top-left'
+              zIndex = 'z-10'
+            } else {
+              transformOrigin = 'origin-bottom-right'
+              zIndex = 'z-1'
+            }
+          } else if (props.images.length === 3) {
+            transformArgs = 'transform scale-[0.7]'
             if (index === 0) {
+              zIndex = 'z-20'
+            } else if (index === 1) {
               transformOrigin = 'origin-top-left'
               zIndex = 'z-10'
             } else {
               transformOrigin = 'origin-bottom-right'
               zIndex = 'z-1'
             }
           }
+        } else if (props.type === 'mobile') {
+          if (props.images.length === 2) {
+            transformArgs = 'transform scale-[0.85]'
+            if (index === 0) {
+              transformOrigin = 'origin-top-left'
+              zIndex = 'z-10'
+            } else {
+              transformOrigin = 'origin-bottom-right'
+              zIndex = 'z-1'
+            }
+          } else if (props.images.length === 3) {
+            if (index === 0) {
+              zIndex = 'z-20'
+            } else if (index === 1) {
+              transformOrigin = 'origin-left'
+              zIndex = 'z-10'
+              transformArgs = 'transform scale-[0.7]'
+              bgPosition = 'bg-[center_left_3rem]'
+            } else {
+              transformOrigin = 'origin-right'
+              zIndex = 'z-1'
+              transformArgs = 'transform scale-[0.7]'
+              bgPosition = 'bg-[center_right_3rem]'
+            }
+          }
         }
 
         return (
           <div
-            className={`absolute ${transformArgs} ${transformOrigin} ${zIndex} flex w-full h-full bg-contain bg-no-repeat bg-center drop-shadow-lg`}
+            className={`absolute ${bgPosition} ${transformArgs} ${transformOrigin} ${zIndex} flex w-full h-full bg-contain bg-no-repeat drop-shadow-lg`}
             style={{
               backgroundImage: `url(${img})`,
             }}

src/assets/images/works/insumos/fichas.png

@@ -4,16 +4,14 @@ import CustomCursor from 'src/components/CustomCursor/CustomCursor'
 import WorkItem from './WorkItem/WorkItem'
 import { useLocation, useNavigate } from 'react-router-dom'
 import integra from 'src/assets/images/works/integra30.png'
-import insumos from 'src/assets/images/works/insumos.png'
 import ponto from 'src/assets/images/works/ponto.png'
 import swingmd from 'src/assets/images/works/swingmd.gif'
 import iworkoff from 'src/assets/images/works/iworkoff.gif'
 import bcTasksDio from 'src/assets/images/works/bcTasksDio.gif'
 import portalRelat from 'src/assets/images/works/portal.png'
 import viacepflutter from 'src/assets/images/works/viacepflutter.png'
 import useTransitionStore from 'src/store/storeConfig'
-import summaryReactCourse from 'src/assets/images/works/react-course/summary.png'
-import createGoalReactCourse from 'src/assets/images/works/react-course/create-goal.png'
+import { ReactCourseAssets, InsumosAssets } from 'src/assets/images/works'
 
 const WorksContainer = () => {
   const changeTransition = useTransitionStore((state) => state.change)
@@ -121,7 +119,7 @@ const WorksContainer = () => {
         description='Design & Interação'
         dev='Figma'
         year='2022'
-        panel={[insumos]}
+        panel={InsumosAssets}
         type='mobile'
         setScale={setScale}
         link='https://www.figma.com/file/EiV65w3Y2q1hC4HoilnL2m/Insumos?node-id=0%3A1&t=RLXFk325dwOK6C88-1'
@@ -131,7 +129,7 @@ const WorksContainer = () => {
         description='Design & Desenvolvimento'
         dev='React'
         year='2024'
-        panel={[summaryReactCourse, createGoalReactCourse]}
+        panel={ReactCourseAssets}
         type='desktop'
         setScale={setScale}
         link='https://github.com/abnerjs/reactcourse-sec-2024'