created slide show

Signed-off-by: Giuseppe Macri <[email protected]>
keplergl · Aug 29, 2023 · 3d5edaf · 3d5edaf
1 parent d48e65a
commit 3d5edaf
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/website/src/components/common/swipeable.js b/website/src/components/common/swipeable.js
@@ -22,6 +22,12 @@ import React, {PureComponent} from 'react';
 import styled from 'styled-components';
 import SwipeableViews from 'react-swipeable-views';
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 72px;
+`;
+
 const PaginationContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -58,12 +64,14 @@ export default class Swipeable extends PureComponent {
   render() {
     const {children, onChange, selectedIndex} = this.props;
     return (
-      <div>
+      <Container>
         <SwipeableViews enableMouseEvents index={selectedIndex} onChange={onChange}>
           {children}
         </SwipeableViews>
-        <Pagination items={children} selectedIndex={selectedIndex} onChange={onChange} />
-      </div>
+        <div>
+          <Pagination items={children} selectedIndex={selectedIndex} onChange={onChange} />
+        </div>
+      </Container>
     );
   }
 }
diff --git a/website/src/components/studio.js b/website/src/components/studio.js
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import styled from 'styled-components';
+import Swipeable from './common/swipeable';
 
 const Flex = styled.div`
   display: flex;
@@ -13,6 +14,9 @@ const StudioContainer = styled(Flex)`
 
 const Section = styled(Flex)`
   gap: 56px;
+  width: 100%;
+  justify-content: center;
+  justify-items: center;
 `;
 
 const MapCard = styled(Flex)`
@@ -138,7 +142,7 @@ const SECTIONS = [
 const CardSection = ({cards}) => (
   <Section>
     {cards.map(card => (
-      <MapCard>
+      <MapCard key={card.imageUrl}>
         <MapCardImage src={card.imageUrl} alt={card.title} />
         <MapCardBody>
           <MapCardIcon src={card.icon} alt={card.title} />
@@ -151,11 +155,18 @@ const CardSection = ({cards}) => (
 );
 
 const Studio = () => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const onChange = useCallback(index => {
+    setSelectedIndex(index);
+  }, []);
+
   return (
     <StudioContainer>
-      {SECTIONS.slice(0, 1).map((cards, index) => (
-        <CardSection key={index} cards={cards} />
-      ))}
+      <Swipeable onChange={onChange} selectedIndex={selectedIndex}>
+        {SECTIONS.map((cards, index) => (
+          <CardSection key={index} cards={cards} />
+        ))}
+      </Swipeable>
     </StudioContainer>
   );
 };