Use Components for Announcements

Allows for consistent design (for example padding) and stats (for example Slack members)

components/announcements/amount.js

@@ -1,11 +1,11 @@
 import Sparkles from '../sparkles'
 
-const Amount = () => (
+const Amount = ({amount}) => (
   <Sparkles sx={{
     WebkitTextStroke: 'currentColor',
     WebkitTextStrokeWidth: '2px',
     WebkitTextFillColor: 'transparent'
-  }}>$500,000</Sparkles>
+  }}>{amount}</Sparkles>
 )
 
 export default Amount

components/announcements/cta.js

@@ -0,0 +1,38 @@
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+
+export default function SlackCTA() {
+  return (
+    <Box
+      as="section"
+      sx={{
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
+      }}
+    >
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+        <Icon glyph="welcome" size={72} />
+        <Box>
+          <Heading as="h2" variant="headline" mt={0}>
+            Teenager? New here? Welcome!
+          </Heading>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+            Hack Club is a global community of high school makers & student-led
+            coding clubs. We’ve got a 24/7 Slack chatroom of 15k+ teenagers
+            learning to code & building amazing projects, & you’ll fit right in.
+          </Text>
+          <br />
+          <br />
+          <NextLink href="/" passHref>
+            <Button bg="cyan" as="a">
+              Learn more
+            </Button>
+          </NextLink>
+        </Box>
+      </Grid>
+    </Box>
+  )
+}

components/announcements/holder.js

@@ -0,0 +1,22 @@
+import { Container, BaseStyles } from 'theme-ui'
+
+export default function AnnouncementHolder({ children }) {
+  return (
+    <Container
+      as={BaseStyles}
+      variant="copy"
+      sx={{
+        py: [4, 5],
+        fontSize: [2, 3],
+        h1: {
+          textAlign: ['left', 'center'],
+          color: 'cyan',
+          my: 4,
+          a: { color: 'inherit' }
+        }
+      }}
+    >
+      {children}
+    </Container>
+  )
+}

components/announcements/pills.js

@@ -0,0 +1,64 @@
+import {
+  Avatar,
+  Badge,
+  BaseStyles,
+  Box,
+  Button,
+  Container,
+  Flex,
+  Grid,
+  Heading,
+  Text
+} from 'theme-ui'
+
+export function PillHolder({ children }) {
+  return (
+    <Flex
+      sx={{
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        div: {
+          mt: 0,
+          mb: 2,
+          bg: 'white',
+          color: 'muted',
+          border: '1px solid',
+          borderColor: 'border',
+          bg: 'snow',
+          fontSize: 2,
+          fontWeight: 'body',
+          lineHeight: '36px'
+        }
+      }}
+    >
+      {children}
+    </Flex>
+  )
+}
+
+export function AuthorPill({ tag, image, firstName }) {
+  return (
+    <Badge
+      variant="pill"
+      sx={{
+        mr: [2, 3],
+        pl: 2,
+        pr: 3,
+        display: 'inline-flex',
+        alignItems: 'center'
+      }}
+    >
+      <Avatar src={image} alt={firstName} size={36} mr={2} />
+      {tag}
+    </Badge>
+  )
+}
+
+export function DatePill({ tag }) {
+  return (
+    <Badge variant="pill" px={3}>
+      {tag}
+    </Badge>
+  )
+}

components/announcements/preston-werner.mdx

@@ -1,6 +1,6 @@
 import Amount from './amount'
 
-# Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
+# Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount amount="$500,000" /> to&nbsp;[Hack&nbsp;Club](https://hackclub.com).
 
 We are deeply grateful for this gift.
 

components/announcements/relon.mdx

@@ -1,4 +1,3 @@
-<!-- # import Amount from './amount' -->
 import Signature from '../signature'
 import Signatures from '../signatures'
 import Image from 'theme-ui'

components/background-image.js

@@ -36,7 +36,6 @@ const BGImg = ({
     }}
   >
     <Image layout="responsive" {...props} />
-    
   </Box>
 )
 

components/preston-werner/amount.js

@@ -1,11 +0,0 @@
-import Sparkles from '../sparkles'
-
-const Amount = () => (
-  <Sparkles sx={{
-    WebkitTextStroke: 'currentColor',
-    WebkitTextStrokeWidth: '2px',
-    WebkitTextFillColor: 'transparent'
-  }}>$500,000</Sparkles>
-)
-
-export default Amount

components/slack/header.js

@@ -1,8 +1,6 @@
 import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
 import SlideUp from '../slide-up'
-import Announcement from '../announcement'
 import Icon from '../icon'
-import Stat from '../stat'
 import JoinForm from './join-form'
 import usePrefersMotion from '../../lib/use-prefers-motion'
 import useHasMounted from '../../lib/use-has-mounted'

pages/elon.js

@@ -1,23 +1,13 @@
-import {
-  Avatar,
-  Badge,
-  BaseStyles,
-  Box,
-  Button,
-  Container,
-  Flex,
-  Grid,
-  Heading,
-  Text
-} from 'theme-ui'
+import { Box, Container, Heading, Text } from 'theme-ui'
+import { PillHolder, AuthorPill, DatePill } from '../components/announcements/pills'
 import Head from 'next/head'
-import NextLink from 'next/link'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
-import Icon from '../components/icon'
 import ForceTheme from '../components/force-theme'
 import Footer from '../components/footer'
-import ElonCopy from '../components/elon/copy.mdx'
+import ElonCopy from '../components/announcements/elon.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
 const ElonPage = () => (
   <>
@@ -57,91 +47,18 @@ const ElonPage = () => (
         <Text variant="headline">—Elon Musk</Text>
       </Container>
     </Box>
-    <Container
-      as={BaseStyles}
-      variant="copy"
-      sx={{
-        py: [4, 5],
-        fontSize: [2, 3],
-        h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
-          my: 4,
-          a: { color: 'inherit' }
-        }
-      }}
-    >
-      <Flex
-        sx={{
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignItems: 'center',
-          div: {
-            mt: 0,
-            mb: 2,
-            bg: 'white',
-            color: 'muted',
-            border: '1px solid',
-            borderColor: 'border',
-            bg: 'snow',
-            fontSize: 2,
-            fontWeight: 'body',
-            lineHeight: '36px'
-          }
-        }}
-      >
-        <Badge
-          variant="pill"
-          sx={{
-            mr: [2, 3],
-            pl: 0,
-            pr: 3,
-            display: 'inline-flex',
-            alignItems: 'center'
-          }}
-        >
-          <Avatar
-            src="https://hackclub.com/team/zach.jpg"
-            alt="Zach"
-            size={36}
-            mr={2}
-          />
-          Zach Latta, founder
-        </Badge>
-        <Badge variant="pill" px={3}>
-          May 15, 2020
-        </Badge>
-      </Flex>
+    <AnnouncementHolder>
+      <PillHolder>
+        <AuthorPill
+          firstName="Zach"
+          tag="Zach Latta, founder"
+          image="https://hackclub.com/team/zach.jpg"
+        />
+        <DatePill tag="May 15, 2020" />
+      </PillHolder>
       <ElonCopy />
-    </Container>
-    <Box
-      as="section"
-      sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
-      }}
-    >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
-        <Icon glyph="welcome" size={72} />
-        <Box>
-          <Heading as="h2" variant="headline" mt={0}>
-            Teenager? New here? Welcome!
-          </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
-            Hack Club is a global community of high school makers & student-led
-            coding clubs. We’ve got a 24/7 Slack chatroom of 10k+ teenagers
-            learning to code & building amazing projects, & you’ll fit right in.
-          </Text><br /><br />
-          <NextLink href="/" passHref>
-            <Button bg="cyan" as="a">
-              Learn more
-            </Button>
-          </NextLink>
-        </Box>
-      </Grid>
-    </Box>
+    </AnnouncementHolder>
+    <SlackCTA />
     <Footer />
   </>
 )

pages/preston-werner.js

@@ -1,7 +1,5 @@
 import {
   Avatar,
-  Badge,
-  BaseStyles,
   Box,
   Button,
   Container,
@@ -11,13 +9,14 @@ import {
   Text
 } from 'theme-ui'
 import Head from 'next/head'
-import NextLink from 'next/link'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
-import Icon from '../components/icon'
 import ForceTheme from '../components/force-theme'
 import Footer from '../components/footer'
-import PrestonWernerCopy from '../components/preston-werner/copy.mdx'
+import PrestonWernerCopy from '../components/announcements/preston-werner.mdx'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
+import { PillHolder, AuthorPill, DatePill } from '../components/announcements/pills'
 
 const Page = () => (
   <>
@@ -69,112 +68,23 @@ const Page = () => (
         </Text>
       </Container>
     </Box>
-    <Container
-      as={BaseStyles}
-      variant="copy"
-      sx={{
-        py: [4, 5],
-        fontSize: [2, 3],
-        h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
-          my: 4,
-          a: { color: 'inherit' }
-        }
-      }}
-    >
-      <Flex
-        sx={{
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignItems: 'center',
-          div: {
-            mt: 0,
-            mb: 2,
-            bg: 'white',
-            color: 'muted',
-            border: '1px solid',
-            borderColor: 'border',
-            bg: 'snow',
-            fontSize: 2,
-            fontWeight: 'body',
-            lineHeight: '36px'
-          }
-        }}
-      >
-        <Badge
-          variant="pill"
-          sx={{
-            mr: [1, 2],
-            pl: 0,
-            pr: 3,
-            display: 'inline-flex',
-            alignItems: 'center'
-          }}
-        >
-          <Avatar
-            src="https://cloud-macp9mbpq.vercel.app/0image.png"
-            alt="Christina"
-            size={36}
-            ml={2}
-            mr={2}
-          />
-          Christina Asquith, COO
-        </Badge>
-        <Badge
-          variant="pill"
-          sx={{
-            mr: [1, 2],
-            pl: 0,
-            pr: 3,
-            display: 'inline-flex',
-            alignItems: 'center'
-          }}
-        >
-          <Avatar
-            src="https://hackclub.com/team/zach.jpg"
-            alt="Zach"
-            size={36}
-            ml={2}
-            mr={2}
-          />
-          Zach Latta, founder
-        </Badge>
-        <Badge variant="pill" px={3}>
-          Jan 27, 2021
-        </Badge>
-      </Flex>
+    <AnnouncementHolder>
+      <PillHolder>
+        <AuthorPill
+          firstName="Christina"
+          tag="Christina Asquith, COO"
+          image="https://cloud-macp9mbpq.vercel.app/0image.png"
+        />
+        <AuthorPill
+          firstName="Zach"
+          tag="Zach Latta, founder"
+          image="https://hackclub.com/team/zach.jpg"
+        />
+        <DatePill tag="Jan 27, 2021" />
+      </PillHolder>
       <PrestonWernerCopy />
-    </Container>
-    <Box
-      as="section"
-      sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
-      }}
-    >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
-        <Icon glyph="welcome" size={72} />
-        <Box>
-          <Heading as="h2" variant="headline" mt={0}>
-            Teenager? New here? Welcome!
-          </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
-            Hack Club is a global community of high school hackers & student-led
-            Hack Clubs. Join the community-led 24/7 Hack Club Slack of 11k+
-            teenagers learning to code & building amazing projects. You’ll fit
-            right in.
-          </Text>
-          <NextLink href="/" passHref>
-            <Button bg="cyan" as="a">
-              Learn more
-            </Button>
-          </NextLink>
-        </Box>
-      </Grid>
-    </Box>
+    </AnnouncementHolder>
+    <SlackCTA />
     <Footer />
   </>
 )

pages/relon.js

@@ -10,27 +10,20 @@ import {
   Heading,
   Text,
 } from 'theme-ui'
+import { PillHolder, AuthorPill, DatePill } from '../components/announcements/pills'
 import Head from 'next/head'
 import NextLink from 'next/link'
 import styled from '@emotion/styled'
 import theme from '../lib/theme'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
-import Icon from '../components/icon'
 import ForceTheme from '../components/force-theme'
 import Footer from '../components/footer'
-import ElonCopy from '../components/relon/copy.mdx'
-import Sparkles from '../components/sparkles'
+import ElonCopy from '../components/announcements/relon.mdx'
+import Amount from '../components/announcements/amount'
+import SlackCTA from '../components/announcements/cta'
+import AnnouncementHolder from '../components/announcements/holder'
 
-const Amount = () => (
-  <Sparkles sx={{
-    WebkitTextStroke: 'currentColor',
-    WebkitTextStrokeWidth: '2px',
-    WebkitTextFillColor: 'transparent'
-  }}>
-    $1,000,000
-  </Sparkles>
-)
 
 const StyledLink = styled.a`
   text-decoration: none;
@@ -81,112 +74,27 @@ const RelonPage = () => (
             }
           }}
         >
-          Elon Musk is donating <Amount /> to <RelonLink href="/">Hack Club</RelonLink>
+          Elon Musk is donating <Amount amount="$1,000,000" /> to <RelonLink href="/">Hack Club</RelonLink>
         </Heading>
       </Container>
     </Box>
-    <Container
-      as={BaseStyles}
-      variant="copy"
-      sx={{
-        py: [4, 5],
-        fontSize: [2, 3],
-        h1: {
-          textAlign: ['left', 'center'],
-          color: 'cyan',
-          my: 4,
-          a: { color: 'inherit' }
-        }
-      }}
-    >
-      <Flex
-        sx={{
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignItems: 'center',
-          div: {
-            mt: 1,
-            mb: 3,
-            color: 'muted',
-            border: '1px solid',
-            borderColor: 'border',
-            bg: 'snow',
-            fontSize: 2,
-            fontWeight: 'body',
-            lineHeight: '36px'
-          }
-        }}
-      >
-        <Badge
-          variant="pill"
-          sx={{
-            mr: [2, 3],
-            pl: 0,
-            pr: 3,
-            display: 'inline-flex',
-            alignItems: 'center'
-          }}
-        >
-          <Avatar
-            src="https://hackclub.com/team/christina.jpg"
-            alt="Christina"
-            size={36}
-            mr={2}
-          />
-          Christina Asquith, COO
-        </Badge>
-        <Badge
-          variant="pill"
-          sx={{
-            mr: [2, 3],
-            pl: 0,
-            pr: 3,
-            display: 'inline-flex',
-            alignItems: 'center'
-          }}
-        >
-          <Avatar
-            src="https://hackclub.com/team/zach.jpg"
-            alt="Zach"
-            size={36}
-            mr={2}
-          />
-          Zach Latta, Founder
-        </Badge>
-      </Flex>
-      <Heading as="h4" variant="headline" py={3} sx={{'textAlign': 'center',}}>
-        Friday, October 8th, 2021
-      </Heading>
+    <AnnouncementHolder>
+      <PillHolder>
+        <AuthorPill
+          firstName="Christina"
+          tag="Christina Asquith, COO"
+          image="https://hackclub.com/team/christina.jpg"
+        />
+        <AuthorPill
+          firstName="Zach"
+          tag="Zach Latta, founder"
+          image="https://hackclub.com/team/zach.jpg"
+        />
+        <DatePill tag="Oct 8, 2021" />
+      </PillHolder>
       <ElonCopy />
-    </Container>
-    <Box
-      as="section"
-      sx={{
-        bg: 'orange',
-        backgroundImage: t => t.util.gx('yellow', 'orange'),
-        color: 'white',
-        py: [4, 5]
-      }}
-    >
-      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
-        <Icon glyph="welcome" size={72} />
-        <Box>
-          <Heading as="h2" variant="headline" mt={0}>
-            Teenager? New here? Welcome!
-          </Heading>
-          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
-            Hack Club is a global community of high school makers & student-led
-            coding clubs. We’ve got a 24/7 Slack chatroom of 10k+ teenagers
-            learning to code & building amazing projects, & you’ll fit right in.
-          </Text><br /><br />
-          <NextLink href="/" passHref>
-            <Button bg="cyan" as="a">
-              Learn more
-            </Button>
-          </NextLink>
-        </Box>
-      </Grid>
-    </Box>
+    </AnnouncementHolder>
+    <SlackCTA />
     <Footer />
   </>
 )