diff --git a/components/projects-components/projects-structure/ProjectsCarousel.jsx b/components/projects-components/projects-structure/ProjectsCarousel.jsx index a984ece..a5c5ded 100644 --- a/components/projects-components/projects-structure/ProjectsCarousel.jsx +++ b/components/projects-components/projects-structure/ProjectsCarousel.jsx @@ -1,66 +1,64 @@ import React, { useEffect, useState, useRef } from 'react'; import style from 'styles/projects/ProjectCarousel.module.css'; -import ReactPlayer from "react-player" +import ReactPlayer from 'react-player'; import styles from 'react-responsive-carousel/lib/styles/carousel.min.css'; import { Carousel } from 'react-responsive-carousel'; function CarouselImage(props) { - const { path } = props; + const { path } = props; - return ( -
- Carousel image -
- ) + return ( +
+ Carousel image +
+ ); } function CarouselYoutubeVideo({ url, isSelected }) { - - return ( -
- -
- ) + return ( +
+ +
+ ); } function CarouselVideo({ path }) { + const videoElement = useRef(null); - const videoElement = useRef(null); - - return ( - - ) + return ( + + ); } export default function ProjectsCarousel(props) { - const { paths, autoPlay, center } = props; - const customRenderItem = (item, props) => ; - - return ( - 1} - autoPlay={autoPlay} - infiniteLoop={autoPlay} - emulateTouch={autoPlay} - > - - {paths.map((path, index) => { - { - return (path.endsWith(".webp")) ? - : - (path.startsWith("https://")) ? - : - + const { paths, autoPlay, center } = props; + const customRenderItem = (item, props) => ; - } - })} - - ); + return ( + 1} + autoPlay={autoPlay} + infiniteLoop={autoPlay} + emulateTouch={autoPlay} + > + {paths.map((path, index) => { + { + return path.endsWith('.webp') ? ( + + ) : path.startsWith('https://') ? ( + + ) : ( + + ); + } + })} + + ); } diff --git a/components/projects-components/projectsv2/SondasAeroespaciais.jsx b/components/projects-components/projectsv2/SondasAeroespaciais.jsx index ca88240..022797a 100644 --- a/components/projects-components/projectsv2/SondasAeroespaciais.jsx +++ b/components/projects-components/projectsv2/SondasAeroespaciais.jsx @@ -23,17 +23,76 @@ import { Image } from 'mui-image'; import MemoryIcon from '@mui/icons-material/Memory'; import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard'; import BiotechIcon from '@mui/icons-material/Biotech'; +import ProjectsCarousel from '../projects-structure/ProjectsCarousel'; +import Carousel from 'react-material-ui-carousel'; export default function SondasAeroespaciais() { const { t } = useTranslation(); const projetos = t('projetos:sondasAeroespaciais', {}, { returnObjects: true }); const garatea1 = projetos.projects.garatea1; - + const garatea2 = projetos.projects.garatea2; + const garatea3 = projetos.projects.garatea3; + const garatea5 = projetos.projects.garatea5; const zenbee = projetos.projects.zenbee; const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const garatea1Images = [ + 'SondasAeroespaciais/Garatéa-I/photo8.webp', + 'SondasAeroespaciais/Garatéa-I/photo1.webp', + 'SondasAeroespaciais/Garatéa-I/photo2.webp', + 'SondasAeroespaciais/Garatéa-I/photo3.webp', + 'SondasAeroespaciais/Garatéa-I/photo4.webp', + 'SondasAeroespaciais/Garatéa-I/photo5.webp', + 'SondasAeroespaciais/Garatéa-I/photo6.webp', + 'SondasAeroespaciais/Garatéa-I/photo7.webp', + 'SondasAeroespaciais/Garatéa-I/photo9.webp', + 'SondasAeroespaciais/Garatéa-I/photo10.webp', + ]; + + const garatea2Images = [ + 'SondasAeroespaciais/Garatéa-II/photo4.webp', + 'SondasAeroespaciais/Garatéa-II/photo1.webp', + 'SondasAeroespaciais/Garatéa-II/photo2.webp', + 'SondasAeroespaciais/Garatéa-II/photo3.webp', + 'SondasAeroespaciais/Garatéa-II/photo5.webp', + ]; + + const garatea3Images = [ + 'SondasAeroespaciais/Garatéa-III/photo9.webp', + 'SondasAeroespaciais/Garatéa-III/photo1.webp', + 'SondasAeroespaciais/Garatéa-III/photo2.webp', + 'SondasAeroespaciais/Garatéa-III/photo3.webp', + 'SondasAeroespaciais/Garatéa-III/photo4.webp', + 'SondasAeroespaciais/Garatéa-III/photo5.webp', + 'SondasAeroespaciais/Garatéa-III/photo6.webp', + 'SondasAeroespaciais/Garatéa-III/photo7.webp', + 'SondasAeroespaciais/Garatéa-III/photo8.webp', + ]; + + const garatea5Images = [ + 'SondasAeroespaciais/Garatéa-V/photo7.webp', + 'SondasAeroespaciais/Garatéa-V/photo1.webp', + 'SondasAeroespaciais/Garatéa-V/photo2.webp', + 'SondasAeroespaciais/Garatéa-V/photo3.webp', + 'SondasAeroespaciais/Garatéa-V/photo4.webp', + 'SondasAeroespaciais/Garatéa-V/photo5.webp', + 'SondasAeroespaciais/Garatéa-V/photo6.webp', + 'SondasAeroespaciais/Garatéa-V/photo8.webp', + 'SondasAeroespaciais/Garatéa-V/photo9.webp', + 'SondasAeroespaciais/Garatéa-V/photo10.webp', + ]; + + const zenbeeImages = [ + 'SondasAeroespaciais/ZenBee/photo5.webp', + 'SondasAeroespaciais/ZenBee/photo2.webp', + 'SondasAeroespaciais/ZenBee/photo3.webp', + 'SondasAeroespaciais/ZenBee/photo4.webp', + 'SondasAeroespaciais/ZenBee/photo6.webp', + 'SondasAeroespaciais/ZenBee/photo1.webp', + ]; + return ( @@ -51,7 +110,7 @@ export default function SondasAeroespaciais() { color: 'white', }} > - {/* Garatéa I */} + {/* Zenbee */} @@ -61,30 +120,31 @@ export default function SondasAeroespaciais() { - {garatea1.year} + {zenbee.year} - {garatea1.title} + {zenbee.title} + Imagem da sonda {/* Overview */} - {['launchDate', 'altitude', 'award'].map((key) => ( + {['launchDate', 'altitude'].map((key) => ( - {garatea1[key][0]} + {zenbee[key][0]} - {garatea1[key][1]} + {zenbee[key][1]} @@ -95,7 +155,7 @@ export default function SondasAeroespaciais() { - {garatea1.menus[2]} + {zenbee.menus[3]} @@ -104,7 +164,7 @@ export default function SondasAeroespaciais() { - {garatea1.experiments.map((experiment, index) => ( + {zenbee.experiments.map((experiment, index) => ( • {experiment} @@ -153,7 +213,137 @@ export default function SondasAeroespaciais() { + + + + + + + + + {zenbeeImages.map((item, i) => ( + + ))} + + + + + + + + {/* Garatea-V */} + + + + + + + + + + {garatea5.year} + + {garatea5.title} + + + + Imagem da sonda + + + {/* Overview */} + + {['launchDate', 'altitude'].map((key) => ( + + + {garatea5[key][0]} + + {garatea5[key][1]} + + + + ))} + + + {/* Experimentos */} + + + + {garatea5.menus[3]} + + + + + + + {/* + + {garatea5.experiments.map((experiment, index) => ( + + • {experiment} + + ))} + + */} + + + + + {/* Tecnologias */} + + + + {garatea5.menus[1]} + + + + + + + + {[...garatea5.embedded].map((tech, index) => ( + + • {tech} + + ))} + + + + + + + + + + + {[...garatea5.structure].map((tech, index) => ( + + • {tech} + + ))} + + + + + + + + + {garatea5Images.map((item, i) => ( + + ))} + + + - {/* Zenbee */} + {/* Garatea-III */} @@ -178,18 +382,16 @@ export default function SondasAeroespaciais() { - {zenbee.year} + {garatea3.year} - {zenbee.title} + {garatea3.title} Imagem da sonda @@ -199,9 +401,9 @@ export default function SondasAeroespaciais() { {['launchDate', 'altitude'].map((key) => ( - {zenbee[key][0]} + {garatea3[key][0]} - {zenbee[key][1]} + {garatea3[key][1]} @@ -212,7 +414,7 @@ export default function SondasAeroespaciais() { - {zenbee.menus[3]} + {garatea3.menus[3]} @@ -221,7 +423,269 @@ export default function SondasAeroespaciais() { - {zenbee.experiments.map((experiment, index) => ( + {garatea3.experiments.map((experiment, index) => ( + + • {experiment} + + ))} + + + + + + + {/* Tecnologias */} + + + + {garatea3.menus[1]} + + + + + + + + + {[...garatea3.embedded].map((tech, index) => ( + + • {tech} + + ))} + + + + + + + + + + + {[...garatea3.structure].map((tech, index) => ( + + • {tech} + + ))} + + + + + + + + + + + + + + {garatea5Images.map((item, i) => ( + + ))} + + + + + + + + {/* Garatea-II */} + + + + + + + + + + {garatea2.year} + + {garatea2.title} + + + + Imagem da sonda + + + {/* Overview */} + + {['launchDate', 'altitude'].map((key) => ( + + + {garatea2[key][0]} + + {garatea2[key][1]} + + + + ))} + + + {/* Experimentos */} + + + + {garatea2.menus[3]} + + + + + + + + + {garatea2.experiments.map((experiment, index) => ( + + • {experiment} + + ))} + + + + + + + {/* Tecnologias */} + + + + {garatea2.menus[1]} + + + + + + + + + {[...garatea2.embedded].map((tech, index) => ( + + • {tech} + + ))} + + + + + + + + + + + {[...garatea2.structure].map((tech, index) => ( + + • {tech} + + ))} + + + + + + + + + + + + + + {garatea2Images.map((item, i) => ( + + ))} + + + + + + + + {/* Garatea-I */} + + + + + + + + + + {garatea1.year} + + {garatea1.title} + + + + Imagem da sonda + + + {/* Overview */} + + {['launchDate', 'altitude'].map((key) => ( + + + {garatea1[key][0]} + + {garatea1[key][1]} + + + + ))} + + + {/* Experimentos */} + + + + {garatea1.menus[3]} + + + + + + + + + {garatea1.experiments.map((experiment, index) => ( • {experiment} @@ -270,32 +734,40 @@ export default function SondasAeroespaciais() { + + + + + + + + + {garatea1Images.map((item, i) => ( + + ))} + + + - {/* Outros Anos */} - {['2019', '2017', '2016'].map((year, index) => ( - - - - {index < 2 && } - - - {year} - {year === '2019' && ( - - Descrição da imagem - - )} - - - ))} + {/* + + + + + */} ); diff --git a/package-lock.json b/package-lock.json index 8a0793c..5692c66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-countup": "^6.1.1", "react-dom": "^17.0.2", "react-icons": "^4.2.0", + "react-material-ui-carousel": "^3.4.2", "react-player": "^2.9.0", "react-responsive-carousel": "^3.2.22", "react-rotating-text": "^1.4.1", @@ -2487,6 +2488,52 @@ "is-callable": "^1.1.3" } }, + "node_modules/framer-motion": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", + "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", + "license": "MIT", + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.6", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0", + "react-dom": ">=16.8 || ^17.0.0" + } + }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "license": "MIT", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "license": "MIT", + "optional": true + }, + "node_modules/framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2726,6 +2773,12 @@ "node": ">= 0.4" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==", + "license": "MIT" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -3746,6 +3799,18 @@ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, + "node_modules/popmotion": { + "version": "9.3.6", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", + "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", + "license": "MIT", + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -3923,6 +3988,29 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, + "node_modules/react-material-ui-carousel": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz", + "integrity": "sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==", + "license": "MIT", + "dependencies": { + "@emotion/react": "^11.7.1", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.4.1", + "@mui/material": "^5.4.1", + "@mui/system": "^5.4.1", + "framer-motion": "^4.1.17" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/icons-material": "^5.0.0", + "@mui/material": "^5.0.0", + "@mui/system": "^5.0.0", + "react": "^17.0.1 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" + } + }, "node_modules/react-player": { "version": "2.16.0", "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", @@ -4386,6 +4474,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "license": "MIT", + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, "node_modules/styled-jsx": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz", diff --git a/package.json b/package.json index 345fdb0..d717359 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "react-countup": "^6.1.1", "react-dom": "^17.0.2", "react-icons": "^4.2.0", + "react-material-ui-carousel": "^3.4.2", "react-player": "^2.9.0", "react-responsive-carousel": "^3.2.22", "react-rotating-text": "^1.4.1",