pycon/frontend/src/components/job-board-layout/index.tsx at 05a78a14e5e779ff67caeca1a4650abe071b11b8 · pythonitalia/pycon · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {
  Button,
  Grid,
  GridColumn,
  Heading,
  LayoutContent,
  Page,
  Section,
  Spacer,
  StyledHTMLText,
  Text,
} from "@python-italia/pycon-styleguide";
import React from "react";
import { FormattedMessage } from "react-intl";

import { JobListingAccordion } from "~/components/job-listing-accordion";
import type { AllJobListingsQueryResult } from "~/types";

import { Article } from "../article";
import { MetaTags } from "../meta-tags";

type Props = {
  jobListings: AllJobListingsQueryResult["data"]["jobListings"];
  jobListing: AllJobListingsQueryResult["data"]["jobListings"][0];
  onMobileShowOnly: "jobListings" | "jobListing";
};

export const JobBoardLayout = ({
  jobListings,
  jobListing,
  onMobileShowOnly,
}: Props) => {
  return (
    <Page endSeparator={false}>
      <FormattedMessage id="jobboard.title">
        {(text) => <MetaTags title={text} />}
      </FormattedMessage>
      <Section>
        <Heading size="display1">
          <FormattedMessage id="jobboard.title" />
        </Heading>
      </Section>

      <Section>
        <Grid cols={12}>
          <GridColumn colSpan={4}>
            <LayoutContent
              showFrom={
                onMobileShowOnly === "jobListing" ? "desktop" : "mobile"
              }
              as="ul"
              position="sticky"
              style={{
                top: 0,
              }}
              overflow="scroll"
              fullScreenHeight
            >
              {jobListings.map((job) => (
                <JobListingAccordion key={job.id} job={job} />
              ))}
            </LayoutContent>
          </GridColumn>
          <GridColumn colSpan={8}>
            <LayoutContent
              showFrom={
                onMobileShowOnly === "jobListings" ? "desktop" : "mobile"
              }
            >
              <Heading size={2}>{jobListing.title}</Heading>
              <Spacer size="small" />
              <Text size={2} color="grey-500">
                {jobListing.company}
              </Text>
              <Spacer size="small" />
              {jobListing.applyUrl && (
                <Button
                  target="_blank"
                  href={jobListing.applyUrl}
                  variant="secondary"
                >
                  <FormattedMessage id="jobboard.applyNow" />
                </Button>
              )}
              <Spacer size="large" />
              <Article>
                <StyledHTMLText
                  baseTextSize={2}
                  text={jobListing.description}
                />
              </Article>
              <Spacer size="xl" />
              {jobListing.applyUrl && (
                <Button
                  target="_blank"
                  href={jobListing.applyUrl}
                  variant="secondary"
                >
                  <FormattedMessage id="jobboard.applyNow" />
                </Button>
              )}
            </LayoutContent>
            <Spacer size="medium" />
          </GridColumn>
        </Grid>
      </Section>
    </Page>
  );
};