1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-06-17 10:03:13 +02:00
blog/src/components/atoms/Image.tsx

62 lines
1.4 KiB
TypeScript
Raw Normal View History

2020-05-22 14:38:19 +02:00
import React, { ReactElement } from 'react'
2019-10-02 13:35:50 +02:00
import { graphql } from 'gatsby'
2019-10-28 23:00:55 +01:00
import Img from 'gatsby-image'
import { ImageProps } from '../../@types/Image'
2021-03-06 01:35:05 +01:00
import * as styles from './Image.module.css'
2019-10-02 13:35:50 +02:00
2020-05-22 14:38:19 +02:00
export const Image = ({
title,
fluid,
fixed,
alt,
2021-03-04 01:20:39 +01:00
original,
className
2020-05-22 14:38:19 +02:00
}: ImageProps): ReactElement => (
2021-03-04 01:20:39 +01:00
<figure
className={`${styles.image} ${className ? className : ''}`}
data-original={original && original.src}
>
2021-03-07 02:48:05 +01:00
<Img
backgroundColor="transparent"
fluid={fluid}
fixed={fixed}
alt={alt}
imgStyle={{ objectFit: 'contain' }}
/>
2019-11-08 18:06:56 +01:00
{title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
</figure>
2019-10-28 23:00:55 +01:00
)
2019-10-02 13:35:50 +02:00
export const imageSizeDefault = graphql`
fragment ImageFluid on ImageSharp {
2019-10-28 23:00:55 +01:00
original {
src
}
2021-03-04 22:53:35 +01:00
fluid(maxWidth: 950, quality: 85) {
2019-10-02 13:35:50 +02:00
...GatsbyImageSharpFluid_withWebp_noBase64
}
}
`
export const imageSizeThumb = graphql`
fragment ImageFluidThumb on ImageSharp {
2019-10-28 23:00:55 +01:00
original {
src
}
2020-07-19 13:31:27 +02:00
fluid(maxWidth: 420, maxHeight: 140, quality: 85, cropFocus: CENTER) {
...GatsbyImageSharpFluid_withWebp_noBase64
}
}
`
export const photoSizeThumb = graphql`
fragment PhotoFluidThumb on ImageSharp {
original {
src
}
fluid(maxWidth: 300, maxHeight: 300, quality: 85, cropFocus: CENTER) {
2019-10-02 13:35:50 +02:00
...GatsbyImageSharpFluid_withWebp_noBase64
}
}
`