Skip to content

Commit

Permalink
Merge pull request #9369 from amit-ksh/chakra/contributorsPage
Browse files Browse the repository at this point in the history
refactor: contributors page to chakra
  • Loading branch information
pettinarip authored Feb 14, 2023
2 parents 5c583b1 + 7cf1cc6 commit d97e452
Showing 1 changed file with 54 additions and 50 deletions.
104 changes: 54 additions & 50 deletions src/pages/contributing/translation-program/contributors.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
// Libraries
import React from "react"
import styled from "@emotion/styled"
import {
Box,
BoxProps,
Flex,
Heading,
HeadingProps,
ListItem,
SimpleGrid,
Text,
UnorderedList,
} from "@chakra-ui/react"
import { useIntl } from "react-intl"
import { graphql, PageProps } from "gatsby"
import type { Context } from "../../../types"
Expand All @@ -10,37 +20,15 @@ import Breadcrumbs from "../../../components/Breadcrumbs"
import Link from "../../../components/Link"
import Translation from "../../../components/Translation"
import PageMetadata from "../../../components/PageMetadata"
import {
Content,
ListItem,
Page,
} from "../../../components/SharedStyledComponents"

// Utils
import { translateMessageId } from "../../../utils/translations"
import FeedbackCard from "../../../components/FeedbackCard"

// Styles
const HorizontalUl = styled.ul`
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
@media (max-width: ${(props) => props.theme.breakpoints.xl}) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: ${(props) => props.theme.breakpoints.s}) {
grid-template-columns: 1fr;
}
`
const Content = (props: BoxProps) => <Box py={4} px={8} w="full" {...props} />
const ContentHeading = (props: HeadingProps) => (
<Heading lineHeight={1.4} {...props} />
)

const Contributors = ({
data,
Expand Down Expand Up @@ -83,7 +71,7 @@ const Contributors = ({
) ?? []

return (
<Page>
<Flex direction="column" align="center" w="full">
<PageMetadata
title={translateMessageId(
"page-contributing-translation-program-contributors-meta-title",
Expand All @@ -97,56 +85,72 @@ const Contributors = ({

<Content>
<Breadcrumbs slug={location.pathname} />
<h1>
<ContentHeading
as="h1"
fontSize={{ base: "2.5rem", md: "5xl" }}
fontWeight={700}
>
<Translation id="page-contributing-translation-program-contributors-title" />
</h1>
<h4>
<strong>
</ContentHeading>
<ContentHeading
as="h4"
fontSize={{ base: "md", md: "xl" }}
fontWeight={500}
>
<Text as="strong">
<Translation id="page-contributing-translation-program-contributors-number-of-contributors" />{" "}
{translatorData.length}
</strong>
</h4>
<p>
</Text>
</ContentHeading>
<Text>
<Translation id="page-contributing-translation-program-contributors-our-translators-1" />
</p>
<p>
</Text>
<Text>
<Translation id="page-contributing-translation-program-contributors-our-translators-2" />
</p>
<p>
</Text>
<Text>
<Translation id="page-contributing-translation-program-contributors-our-translators-3" />
</p>
<p>
</Text>
<Text>
<Translation id="page-languages-interested" />{" "}
<Link to="/contributing/translation-program/">
<Translation id="page-languages-learn-more" />
</Link>
.
</p>
<h2>
</Text>
<ContentHeading
as="h2"
fontSize={{ base: "2xl", md: "2rem" }}
fontWeight={600}
>
<Translation id="page-contributing-translation-program-contributors-thank-you" />
</h2>
<HorizontalUl>
</ContentHeading>
<SimpleGrid as={UnorderedList} columns={[1, 2, 3, 4, 6]} ms="1.45rem">
{translatorData
.map(({ user }) => user.username)
.sort((user1, user2) =>
user1.toLowerCase().localeCompare(user2.toLowerCase())
)
.map((user) => {
return <ListItem key={user}>{user}</ListItem>
return (
<ListItem key={user} color="text300">
{user}
</ListItem>
)
})}
</HorizontalUl>
<p>
</SimpleGrid>
<Text>
<Translation id="page-languages-interested" />{" "}
<Link to="/contributing/translation-program/">
<Translation id="page-languages-learn-more" />
</Link>
.
</p>
</Text>
</Content>
<Content>
<FeedbackCard />
</Content>
</Page>
</Flex>
)
}

Expand Down

0 comments on commit d97e452

Please sign in to comment.