mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import styled from '@emotion/styled'
|
|
import { Box, Card, Text, useColorMode } from 'theme-ui'
|
|
import Image from 'next/image'
|
|
import theme from '../lib/theme'
|
|
|
|
const Caption = styled(Text)`
|
|
display: block;
|
|
font-size: ${theme.fontSizes[1]}px;
|
|
line-height: ${theme.lineHeights.body};
|
|
padding: ${theme.space[2]}px ${theme.space[3]}px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
border-radius: 0 0 ${theme.radii.extra}px ${theme.radii.extra}px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
z-index: 0;
|
|
`
|
|
|
|
const Photo = ({ src, width, height, alt, showAlt, dark, loading, ...props }) => {
|
|
const [colorMode] = useColorMode()
|
|
const showCaption = showAlt && alt
|
|
return (
|
|
<Card
|
|
{...props}
|
|
as="figure"
|
|
sx={{
|
|
p: [0, 0, 0],
|
|
boxShadow: 'elevated',
|
|
borderRadius: 'extra',
|
|
position: 'relative',
|
|
maxWidth: '100%',
|
|
lineHeight: 0,
|
|
height: 'fit-content',
|
|
...props.sx,
|
|
img: { objectFit: 'cover', objectPosition: 'center' }
|
|
}}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
layout="responsive"
|
|
loading={loading || 'lazy'}
|
|
/>
|
|
{showCaption && (
|
|
<Caption
|
|
as="figcaption"
|
|
variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
|
|
>
|
|
{alt}
|
|
</Caption>
|
|
)}
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default Photo
|