Team page

@types/generated/contentful.d.ts

@@ -124,7 +124,69 @@ export interface IMetaTag extends Entry<IMetaTagFields> {
   }
 }
 
-export type CONTENT_TYPE = 'contentPage' | 'coordinatesConfiguration' | 'layout' | 'metaTag'
+export interface IWarTeamFields {
+  /** Title */
+  title: string
+
+  /** Members */
+  members: string[]
+}
+
+export interface IWarTeam extends Entry<IWarTeamFields> {
+  sys: {
+    id: string
+    type: string
+    createdAt: string
+    updatedAt: string
+    locale: string
+    contentType: {
+      sys: {
+        id: 'warTeam'
+        linkType: 'ContentType'
+        type: 'Link'
+      }
+    }
+  }
+}
+
+export interface IWarTeamsPageFields {
+  /** Group A name */
+  groupAName: string
+
+  /** GroupA */
+  groupA: IWarTeam[]
+
+  /** Group B name */
+  groupBName: string
+
+  /** GroupB */
+  groupB: IWarTeam[]
+}
+
+export interface IWarTeamsPage extends Entry<IWarTeamsPageFields> {
+  sys: {
+    id: string
+    type: string
+    createdAt: string
+    updatedAt: string
+    locale: string
+    contentType: {
+      sys: {
+        id: 'warTeamsPage'
+        linkType: 'ContentType'
+        type: 'Link'
+      }
+    }
+  }
+}
+
+export type CONTENT_TYPE =
+  | 'contentPage'
+  | 'coordinatesConfiguration'
+  | 'layout'
+  | 'metaTag'
+  | 'warTeam'
+  | 'warTeamsPage'
 
 export type LOCALE_CODE = 'pl-PL'
 

src/components/elements/Columns.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled'
+import theme from '../../assets/theme'
+
+const Columns = styled('div')<{ columns?: string }>`
+  display: grid;
+  grid-template-columns: ${(props) => props.columns ?? '1fr 1fr'};
+
+  @media (max-width: ${theme.breakpoints.md}) {
+    grid-template-columns: 1fr;
+  }
+`
+
+export default Columns

src/components/elements/DesktopContainer.ts

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled'
 import theme from '../../assets/theme'
 
-const DesktopContainer = styled('div')`
-  @media (max-width: ${theme.breakpoints.lg}) {
+const DesktopContainer = styled('div')<{ breakpoint?: string }>`
+  @media (max-width: ${(props) => props.breakpoint ?? theme.breakpoints.lg}) {
     display: none;
   }
 `

src/components/elements/MobileContainer.ts

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled'
 import theme from '../../assets/theme'
 
-const MobileContainer = styled('div')`
-  @media (min-width: ${theme.breakpoints.md}) {
+const MobileContainer = styled('div')<{ breakpoint?: string }>`
+  @media (min-width: ${(props) => props.breakpoint ?? theme.breakpoints.md}) {
     display: none;
   }
 `

src/components/elements/Typography/TypographyP.ts

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled'
 
-const TypographyP = styled('p')``
+const TypographyP = styled('p')`
+  font-size: 18px;
+`
 
 export default TypographyP

src/components/elements/WarTeam/index.tsx

@@ -0,0 +1,54 @@
+import { css } from '@emotion/css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFortAwesome } from '@fortawesome/free-brands-svg-icons'
+import React from 'react'
+import { IWarTeam } from '../../../../@types/generated/contentful'
+import theme from '../../../assets/theme'
+
+const WarTeam = (props: IWarTeam) => (
+  <div
+    className={css`
+      display: flex;
+      flex-direction: column;
+    `}
+  >
+    <span
+      className={css`
+        position: relative;
+        text-align: center;
+        padding: 4px 16px 6px;
+        margin: 0 auto;
+
+        &::after {
+          position: absolute;
+          content: '';
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 1px;
+          background: ${theme.colors.warSecondary};
+          opacity: 0.25;
+        }
+      `}
+    >
+      <FontAwesomeIcon icon={faFortAwesome} style={{ marginRight: '4px' }} />
+      {props.fields.title}
+    </span>
+    <div
+      className={css`
+        display: flex;
+        column-gap: 8px;
+        row-gap: 8px;
+        justify-content: center;
+        margin: 18px 0;
+        flex-wrap: wrap;
+      `}
+    >
+      {props.fields.members.map((member) => (
+        <span key={member}>{member}</span>
+      ))}
+    </div>
+  </div>
+)
+
+export default WarTeam

src/containers/WarTeamsPage/WarTeamsPageView.tsx

@@ -0,0 +1,138 @@
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
+import { css } from '@emotion/css'
+import React from 'react'
+
+import { IWarTeamsPageProps } from '../../pages/teams'
+import { IWarTeamsPageStateProps } from './useWarTeamsPage'
+
+import ContentPage from '../../components/blocks/ContentPage'
+import PageNavigation from '../../components/elements/PageNavigation'
+import options from '../../assets/configs/contentfulRichTextOptions'
+import Columns from '../../components/elements/Columns'
+import WarTeam from '../../components/elements/WarTeam'
+import { TypographyP } from '../../components/elements/Typography'
+import DesktopContainer from '../../components/elements/DesktopContainer'
+import MobileContainer from '../../components/elements/MobileContainer'
+import theme from '../../assets/theme'
+
+interface IWarTeamsPageViewProps extends IWarTeamsPageProps, IWarTeamsPageStateProps {}
+
+const WarTeamsPageView = (props: IWarTeamsPageViewProps) => (
+  <ContentPage>
+    <ContentPage.Container>
+      <PageNavigation
+        contentPages={props.layout.fields.contentPages}
+        activePage={props.contentPage}
+      />
+      <ContentPage.DocumentContainer>
+        <ContentPage.Title>{props.contentPage.fields.title}</ContentPage.Title>
+        {documentToReactComponents(props.contentPage.fields.content, options)}
+        <DesktopContainer breakpoint={theme.breakpoints.md}>
+          <Columns
+            className={css`
+              position: relative;
+              grid-column-gap: 16px;
+              grid-row-gap: 8px;
+
+              &::after {
+                position: absolute;
+                content: '';
+                top: 0;
+                bottom: 0;
+                right: calc(50% - (1px / 2));
+                width: 1px;
+                background: ${theme.colors.warSecondary};
+                opacity: 0.25;
+
+                @media (max-width: ${theme.breakpoints.md}) {
+                  display: none;
+                }
+              }
+            `}
+          >
+            <TypographyP
+              className={css`
+                text-align: center;
+                font-size: 24px;
+              `}
+            >
+              {props.warTeamsPage.fields.groupAName}
+            </TypographyP>
+            <TypographyP
+              className={css`
+                text-align: center;
+                font-size: 24px;
+              `}
+            >
+              {props.warTeamsPage.fields.groupBName}
+            </TypographyP>
+            {Array.from(
+              Array(
+                props.warTeamsPage.fields.groupA.length > props.warTeamsPage.fields.groupB.length
+                  ? props.warTeamsPage.fields.groupA.length
+                  : props.warTeamsPage.fields.groupB.length
+              ).keys()
+            ).map((id) => (
+              <React.Fragment key={id}>
+                {(props.warTeamsPage.fields.groupA[id] && (
+                  <WarTeam key={id + 'a'} {...props.warTeamsPage.fields.groupA[id]} />
+                )) ?? <div />}
+                {(props.warTeamsPage.fields.groupB[id] && (
+                  <WarTeam key={id + 'b'} {...props.warTeamsPage.fields.groupB[id]} />
+                )) ?? <div />}
+              </React.Fragment>
+            ))}
+          </Columns>
+        </DesktopContainer>
+        <MobileContainer>
+          <Columns
+            className={css`
+              position: relative;
+              grid-column-gap: 16px;
+              grid-row-gap: 64px;
+            `}
+          >
+            <Columns
+              columns={'1fr'}
+              className={css`
+                grid-row-gap: 8px;
+              `}
+            >
+              <TypographyP
+                className={css`
+                  text-align: center;
+                  font-size: 24px;
+                `}
+              >
+                {props.warTeamsPage.fields.groupAName}
+              </TypographyP>
+              {props.warTeamsPage.fields.groupA?.map((team) => (
+                <WarTeam key={team.sys.id} {...team} />
+              ))}
+            </Columns>
+            <Columns
+              columns={'1fr'}
+              className={css`
+                grid-row-gap: 8px;
+              `}
+            >
+              <TypographyP
+                className={css`
+                  text-align: center;
+                  font-size: 24px;
+                `}
+              >
+                {props.warTeamsPage.fields.groupBName}
+              </TypographyP>
+              {props.warTeamsPage.fields.groupB?.map((team) => (
+                <WarTeam key={team.sys.id} {...team} />
+              ))}
+            </Columns>
+          </Columns>
+        </MobileContainer>
+      </ContentPage.DocumentContainer>
+    </ContentPage.Container>
+  </ContentPage>
+)
+
+export default WarTeamsPageView

src/containers/WarTeamsPage/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { IWarTeamsPageProps } from '../../pages/teams'
+
+import useWarTeamsPage from './useWarTeamsPage'
+import WarTeamsPageView from './WarTeamsPageView'
+
+const WarTeamsPage = (props: IWarTeamsPageProps) => {
+  const state = useWarTeamsPage(props)
+  return <WarTeamsPageView {...props} {...state} />
+}
+
+export default WarTeamsPage

src/containers/WarTeamsPage/useWarTeamsPage.ts

@@ -0,0 +1,10 @@
+import { IWarTeamsPageProps } from '../../pages/teams'
+
+export interface IWarTeamsPageStateProps {}
+
+const useWarTeamsPage = (props: IWarTeamsPageProps): IWarTeamsPageStateProps => {
+  console.log(props)
+  return {}
+}
+
+export default useWarTeamsPage

src/pages/[id].tsx

@@ -34,7 +34,7 @@ export const getStaticProps: GetStaticProps<IContentPageProps, TGetStaticPaths>
   }
 }
 
-const customPages = ['/', '/coordinates-calculation']
+const customPages = ['/', '/coordinates-calculation', '/teams']
 
 export const getStaticPaths: GetStaticPaths<TGetStaticPaths> = async () => {
   const contentPageData = await getAllContentPageData()

src/pages/teams.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import Layout from '../components/elements/Layout'
+import WarTeamsPage from '../containers/WarTeamsPage'
+import getLayoutData, { ILayoutData } from '../utils/contentful/models/getLayoutData'
+import getContentPageData, { IContentPageData } from '../utils/contentful/models/getContentPageData'
+import getCoordinatesData, { ICoordinatesData } from '../utils/contentful/models/getCoordinatesData'
+import getWarTeamsPageData, {
+  IWarTeamsPageData
+} from '../utils/contentful/models/getWarTeamsPageData'
+
+export interface IWarTeamsPageProps
+  extends ILayoutData,
+    IContentPageData,
+    ICoordinatesData,
+    IWarTeamsPageData {}
+
+const CoordinatesCalculation = (props: IWarTeamsPageProps) => (
+  <Layout
+    {...props}
+    title={`${props.contentPage?.fields.title} | ${props.layout.fields.projectNameShort}`}
+    metaTags={props.contentPage.fields.metaTags}
+  >
+    <WarTeamsPage {...props} />
+  </Layout>
+)
+
+export const getStaticProps = async (): Promise<{ props: IWarTeamsPageProps }> => {
+  const layout = await getLayoutData()
+  const contentPage = await getContentPageData('teams')
+  const coordinatesData = await getCoordinatesData()
+  const warTeams = await getWarTeamsPageData()
+
+  return {
+    props: {
+      ...layout,
+      ...contentPage,
+      ...coordinatesData,
+      ...warTeams
+    }
+  }
+}
+
+export default CoordinatesCalculation