mirror of
https://github.com/System-End/site.git
synced 2026-04-20 00:25:19 +00:00
67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import { Card, Text } from 'theme-ui'
|
|
import { keyframes } from '@emotion/react'
|
|
import Icon from './icon'
|
|
|
|
const unfold = keyframes({
|
|
from: { transform: 'scaleY(0)' },
|
|
to: { transform: 'scaleY(100%)' }
|
|
})
|
|
|
|
const Announcement = ({
|
|
caption,
|
|
copy,
|
|
iconLeft,
|
|
iconRight,
|
|
color = 'accent',
|
|
sx = {},
|
|
...props
|
|
}) => (
|
|
<Card
|
|
as={props.href ? 'a' : 'div'}
|
|
variant="interactive"
|
|
sx={{
|
|
variant: 'cards.translucent',
|
|
mx: 'auto',
|
|
maxWidth: 'narrow',
|
|
width: '100%',
|
|
textAlign: 'left',
|
|
textDecoration: 'none',
|
|
lineHeight: 'caption',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
p: [2, 2],
|
|
px: 3,
|
|
mb: [3, 4],
|
|
mt: [null, -3, -5],
|
|
transform: 'scale(1)',
|
|
'@media (prefers-reduced-motion: no-preference)': {
|
|
animation: `${unfold} 0.5s ease-out`
|
|
},
|
|
svg: { flexShrink: 'none' },
|
|
...sx
|
|
}}
|
|
{...props}
|
|
>
|
|
{iconLeft && (
|
|
<Icon
|
|
glyph={iconLeft}
|
|
sx={{ mr: [2, 3], ml: 2, 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>
|
|
{iconRight && <Icon glyph={iconRight} sx={{ ml: [2, 3], color }} />}
|
|
</Card>
|
|
)
|
|
|
|
export default Announcement
|