-
-
Notifications
You must be signed in to change notification settings - Fork 722
/
blog-post-ef-meets-graphql.tsx
41 lines (36 loc) · 1.07 KB
/
blog-post-ef-meets-graphql.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { graphql, useStaticQuery } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React, { FC } from "react";
import styled from "styled-components";
import { GetBlogPostEfMeetsGraphQlImageQuery } from "@/graphql-types";
export const BlogPostEFMeetsGraphQL: FC = () => {
const data = useStaticQuery<GetBlogPostEfMeetsGraphQlImageQuery>(graphql`
query getBlogPostEFMeetsGraphQLImage {
file(
relativePath: {
eq: "2020-03-18-entity-framework/banner-entityframework.png"
}
sourceInstanceName: { eq: "blog" }
) {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, width: 1200, quality: 100)
}
}
}
`);
return (
<Container>
<GatsbyImage
image={data.file?.childImageSharp?.gatsbyImageData}
alt="Get started with Hot Chocolate and Entity Framework"
/>
</Container>
);
};
const Container = styled.div`
padding: 30px;
.gatsby-image-wrapper {
border-radius: var(--border-radius);
box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
}
`;