works more!

components/slack/project.js

@@ -8,8 +8,7 @@ export default function Project({
   sx,
   color,
   img,
-  itemId,
-  width
+  itemId
 }) {
   const visible = useContext(VisibilityContext)
   const isVisible = visible.isItemVisible(itemId)
@@ -28,10 +27,10 @@ export default function Project({
         overflow: 'clip',
         width: '70rem',
         height: '100%',
-        overflowX: 'auto',
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
         opacity: isVisible ? 1 : 0.25,
+        mx: 16,
         sx
       }}
       itemId={itemId}

pages/slack.js

@@ -1,7 +1,7 @@
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
 import { Box, Container, Flex, Heading, Text } from 'theme-ui'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import { ScrollMenu } from 'react-horizontal-scrolling-menu'
 import 'react-horizontal-scrolling-menu/dist/styles.css'
 
@@ -21,24 +21,6 @@ import Arrows from '../components/slack/arrows'
 const SlackPage = () => {
   const nameInputRef = useRef(null)
 
-  const [currentIndex, setCurrentIndex] = useState(0)
-
-  const handleLeftClick = () => {
-    if (currentIndex > 0) {
-      setCurrentIndex(currentIndex - 1)
-    }
-  }
-
-  const handleRightClick = () => {
-    if (currentIndex < projects.length - 1) {
-      setCurrentIndex(currentIndex + 1)
-    }
-  }
-
-  const [containerWidth, setContainerWidth] = useState(0)
-  const containerRef = useRef()
-  const itemWidth = containerWidth / 2 || 160
-
   return (
     <>
       <Meta
@@ -92,20 +74,19 @@ const SlackPage = () => {
           Where the makers hang out...
         </Text>
         <Text as="p" variant="subtitle" sx={{ fontSize: [2, 3], mt: 3 }}>
-          Everything here was built by Hack Clubbers.
+          These projects were built by Hack Clubbers all around the world on the
+          Hack Club Slack.
         </Text>
       </Container>
       <ScrollMenu Footer={Arrows} onWheel={onWheel}>
-        {projects.map((project, index, id) => (
+        {projects.map(project => (
           <Project
             title={project.title}
             description={project.description}
             img={project.img}
             color={project.color}
-            itemId={id}
-            selected={id === currentIndex}
-            width={itemWidth + 'px'}
-            key={id}
+            itemId={project.itemId}
+            key={project.itemId}
           />
         ))}
       </ScrollMenu>