Fetch keynotes from backend
@@ -5,34 +5,20 @@ import { graphql, useStaticQuery } from "gatsby";
import Img from "gatsby-image";
import { jsx } from "theme-ui";
-type SpeakerProps = {
- last?: boolean;
-};
+import { KeynotesSectionQuery } from "../../generated/graphql";
-const Speaker = ({ last }: SpeakerProps) => {
- const {
- file: { childImageSharp },
- } = useStaticQuery(graphql`
- {
- file(relativePath: { eq: "images/speaker-example.jpg" }) {
- childImageSharp {
- fixed(width: 500, height: 500, fit: COVER, grayscale: true) {
- ...GatsbyImageSharpFixed
- }
- }
- }
- }
- `);
+type KeynoteProps = KeynotesSectionQuery["backend"]["conference"]["keynotes"][0];
- return (
+const Keynote = ({ title, additionalSpeakers, imageFile }: KeynoteProps) => (
<Box
sx={{
position: "relative",
borderLeft: "primary",
- borderRight: last ? "primary" : null,
+ borderRight: "primary",
}}
>
<Box sx={{ display: "inline-block", pt: "100%" }} />
+ {imageFile && (
<Img
style={{
position: "absolute",
@@ -41,8 +27,9 @@ const Speaker = ({ last }: SpeakerProps) => {
width: "100%",
height: "100%",
}}
- {...childImageSharp}
+ {...imageFile.childImageSharp}
/>
+ )}
<Box
sx={{
position: "absolute",
@@ -69,15 +56,43 @@ const Speaker = ({ last }: SpeakerProps) => {
}}
>
<Heading variant="caps" as="h3">
- Speaker name
+ {additionalSpeakers.map(speaker => speaker.fullName).join(" & ")}
</Heading>
- <Text>Talk title</Text>
+ <Text>{title}</Text>
</Flex>
</Box>
);
-};
-export const KeynotersSection = () => (
+export const KeynotersSection = () => {
+ const {
+ backend: {
+ conference: { keynotes },
+ },
+ } = useStaticQuery<KeynotesSectionQuery>(graphql`
+ query KeynotesSection {
+ backend {
+ conference {
+ keynotes {
+ id
+ title
+ image
+ imageFile {
+ childImageSharp {
+ fixed(grayscale: true, width: 600, height: 600) {
+ ...GatsbyImageSharpFixed
+ }
+ }
+ }
+ additionalSpeakers {
+ fullName
+ }
+ }
+ }
+ }
+ }
+ `);
+
+ return (
<Box sx={{ borderBottom: "primary", borderTop: "primary" }}>
<Box sx={{ borderBottom: "primary", py: 4 }}>
<Heading
@@ -93,16 +108,17 @@ export const KeynotersSection = () => (
</Box>
<Grid
- columns={3}
+ columns={[1, 3]}
gap={0}
sx={{
maxWidth: "container",
mx: "auto",
}}
>
- <Speaker />
- <Speaker />
- <Speaker last={true} />
+ {keynotes.map(keynote => (
+ <Keynote {...keynote} key={keynote.id} />
+ ))}
</Grid>
</Box>
);
+};
