Create reusable Announcement component

components/home/announcement.js

@@ -0,0 +1,62 @@
+import { Card, Text } from 'theme-ui'
+import { keyframes } from '@emotion/core'
+import Icon from '../icon'
+
+const unfold = keyframes({
+  from: { transform: 'scaleY(0)' },
+  to: { transform: 'scaleY(100%)' }
+})
+
+const Announcement = ({
+  caption,
+  copy,
+  iconLeft,
+  iconRight = 'info',
+  color = 'accent',
+  ...props
+}) => (
+  <Card
+    as={props.href ? 'a' : 'div'}
+    variant="interactive"
+    sx={{
+      mx: 'auto',
+      maxWidth: 'narrow',
+      width: '100%',
+      bg: 'rgba(255, 255, 255, 0.98)',
+      textAlign: 'left',
+      textDecoration: 'none',
+      lineHeight: 'caption',
+      display: 'flex',
+      alignItems: 'center',
+      p: [2, 3],
+      mb: [3, 4],
+      mt: [null, -3, -5],
+      transform: 'scale(1)',
+      willChange: 'transform',
+      animation: `${unfold} 0.5s ease-out`,
+      '@media (prefers-reduced-motion: reduce)': { animation: 'none' }
+    }}
+    {...props}
+  >
+    {iconLeft && (
+      <Icon
+        glyph={iconLeft}
+        sx={{ mr: [2, 3], color, display: ['none', 'block'] }}
+      />
+    )}
+    <Text
+      as="p"
+      sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] } }}
+    >
+      {caption && (
+        <Text as="span" variant="caption" color="secondary">
+          {caption}{' '}
+        </Text>
+      )}
+      <strong>{copy}</strong>
+    </Text>
+    <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />
+  </Card>
+)
+
+export default Announcement

pages/index.js

@@ -14,8 +14,8 @@ import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
 import ForceTheme from '../components/force-theme'
-import Icon from '../components/icon'
 import Footer from '../components/footer'
+import Announcement from '../components/home/announcement'
 import SlackEvents from '../components/home/slack-events'
 import JoinForm from '../components/home/join-form'
 
@@ -24,10 +24,6 @@ const slide = keyframes({
   from: { transform: 'translateY(-200%)' },
   to: { transform: 'translateY(0)' }
 })
-const unfold = keyframes({
-  from: { transform: 'scaleY(0)' },
-  to: { transform: 'scaleY(100%)' }
-})
 
 const CardLink = (props) => (
   <Link
@@ -150,42 +146,14 @@ export default () => (
         }}
       />
       <Container sx={{ textAlign: 'center' }}>
-        <Card
-          as="a"
+        <Announcement
+          iconLeft="message-new"
+          iconRight="info"
+          caption="Tomorrow at 1PM PT/4PM ET:"
+          copy="AMA with Patreon CEO Jack&nbsp;Conte"
           href="https://events.hackclub.com/ama-with-jack-conte"
-          variant="interactive"
-          sx={{
-            mx: 'auto',
-            maxWidth: 'narrow',
-            width: '100%',
-            backgroundColor: 'rgba(255, 255, 255, 0.98)',
-            textAlign: 'left',
-            textDecoration: 'none',
-            lineHeight: 'caption',
-            display: 'flex',
-            alignItems: 'center',
-            p: [2, 3],
-            mb: [3, 4],
-            mt: [null, -3, -5],
-            transform: 'scale(1)',
-            strong: { display: ['inline', 'block'] },
-            willChange: 'transform',
-            animation: `${unfold} 0.5s ease-out`,
-            '@media (prefers-reduced-motion: reduce)': { animation: 'none' }
-          }}
-        >
-          <Icon
-            glyph="event-check"
-            sx={{ mr: [2, 3], color: 'cyan', display: ['none', 'block'] }}
-          />
-          <Text as="span" sx={{ flex: '1 1 auto' }}>
-            <Text as="span" variant="caption" color="secondary">
-              Tomorrow @ 1PM PT/4PM ET:{' '}
-            </Text>
-            <strong>AMA with Patreon CEO Jack&nbsp;Conte</strong>
-          </Text>
-          <Icon glyph="info" sx={{ ml: [2, 3], color: 'cyan' }} />
-        </Card>
+          color="cyan"
+        />
         <Heading
           as="h1"
           variant="title"