mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
dfdd2a9c91
* Begin Elon page * Get content on Elon page * Add content * First pass * Small change * Light second pass * Round 3 updates * Small wording change * Do another pass * Remove biography paragraph * Grammar * Wording * Break out sentence into own paragraph * Grammar * More small changes * Fix small issue * More small adjustments * Final small changes for this pass * Link Hack Club Bank * Add preface * Clarify that I had skillz * Add frank.ly * Clarify how money is spent in Elon text * Add social card to Elon page * Add Zach's signature * Begin Elon page * Get content on Elon page * Add content * First pass * Small change * Light second pass * Round 3 updates * Small wording change * Do another pass * Remove biography paragraph * Grammar * Wording * Break out sentence into own paragraph * Grammar * More small changes * Fix small issue * More small adjustments * Final small changes for this pass * Link Hack Club Bank * Add preface * Clarify that I had skillz * Add frank.ly * Clarify how money is spent in Elon text * Add social card to Elon page * Add Zach's signature * Update to latest * Add my name under signature * Upgrade dependencies * Add sparkles * Continue editing Elon page * Improve badges * Rebase * Update card * Pass of latest copy * Small wording improvements * Switch to @hackclub/meta 1.0.0 * Improve readability * Add homepage announcement * Fix meta tags on Elon page Co-authored-by: Zach Latta <zach@zachlatta.com> Co-authored-by: Christina Asquith <60162904+christinaasquith@users.noreply.github.com>
64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
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 = 'announcement',
|
|
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' },
|
|
svg: { flexShrink: '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'] } }}
|
|
>
|
|
<strong>{copy}</strong>
|
|
{caption && (
|
|
<Text as="span" variant="caption" color="secondary">
|
|
{' '}
|
|
{caption}
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
<Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />
|
|
</Card>
|
|
)
|
|
|
|
export default Announcement
|