From ace0e614a5881f195f97c46d45fc0a52507eccd4 Mon Sep 17 00:00:00 2001 From: Toby Brown Date: Mon, 18 Dec 2023 17:31:01 +0000 Subject: [PATCH 001/146] stuffs'a happenin'! --- components/slack/header.js | 4 +- components/slack/slack-events.js | 12 +- pages/slack.js | 213 ++++--------------------------- 3 files changed, 34 insertions(+), 195 deletions(-) diff --git a/components/slack/header.js b/components/slack/header.js index 93e54024..6185fdfa 100644 --- a/components/slack/header.js +++ b/components/slack/header.js @@ -1,4 +1,4 @@ -import { Box, Heading, Grid } from 'theme-ui' +import { Box, Grid, Heading } from 'theme-ui' import SlideUp from '../slide-up' import JoinForm from './join-form' import usePrefersMotion from '../../lib/use-prefers-motion' @@ -24,7 +24,7 @@ const Content = () => ( mb: [2, 3] }} > - Hack Club Slack + The door is open... diff --git a/components/slack/slack-events.js b/components/slack/slack-events.js index 9d811ccd..b4dae617 100644 --- a/components/slack/slack-events.js +++ b/components/slack/slack-events.js @@ -2,7 +2,7 @@ import { sample, take } from 'lodash' import React, { useEffect, useMemo, useRef, useState } from 'react' import { Slide } from 'react-reveal' import useWebSocket from 'react-use-websocket' -import { Box, Text } from 'theme-ui' +import { Flex, Text } from 'theme-ui' const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3'] @@ -78,7 +78,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => { }) return ( - { {...props} > {take(events, 7).map(({ type, channel, color }) => ( - + <> {type === 'message' && ( - <> + Message in - + )} ))} - + ) } diff --git a/pages/slack.js b/pages/slack.js index 2f60e4e9..9216198b 100644 --- a/pages/slack.js +++ b/pages/slack.js @@ -3,16 +3,15 @@ import Meta from '@hackclub/meta' import Head from 'next/head' import NextLink from 'next/link' import useSWR from 'swr' -import { Badge, Box, Card, Container, Grid, Heading, Text } from 'theme-ui' +import { Badge, Card, Container, Flex, Grid, Heading, Text } from 'theme-ui' import Footer from '../components/footer' import ForceTheme from '../components/force-theme' import Icon from '../components/icon' import Nav from '../components/nav' import Header from '../components/slack/header' -import SlackEvents from '../components/slack/slack-events' -import Stat from '../components/stat' import fetcher from '../lib/fetcher' -import { formatted, thousands } from '../lib/members' +import { thousands } from '../lib/members' +import SlackEvents from '../components/slack/slack-events' const zoomSlide = keyframes({ from: { backgroundPosition: '-32px bottom' }, @@ -40,44 +39,20 @@ const SlackPage = () => {