Cortex Example Component

FeaturedPostsFragment.tsx

import { Component, createElement, getContext } from 'cortex'
import { Route } from 'cortex-router'

import { Article } from '~/models/Article'

import { Poster } from '~/views/components/Poster'

export const FeaturedPostsFragment: Component.Fn<FeaturedPostsFragment.Props> = props => {
    const route = getContext(Route)

    if (!route?.active || !props.featuredPosts) {
        return []
    }

    return props.featuredPosts.map(article => (
        <Poster 
            date={ article.publishedAt } 
            onclick={ () => props.onclick && props.onclick(article) } 
            orientation={ props.landscape ? Poster.Orientation.Landscape : Poster.Orientation.Portrait } 
            src={ article.coverImage.url } 
            title={ article.title }/>
    ))
}

export namespace FeaturedPostsFragment {

    export interface Props { 
        featuredPosts?: Article[]
        landscape?: boolean
        onclick?: (post: any) => void
    }
}

IndexPage.tsx

import { Component, createElement } from 'cortex'
import { createStyleSheet } from 'cortex-css'
import { Route, Router } from 'cortex-router'

import { GraphCMS } from '~/services/GraphCMS'

import { Container } from '~/views/components/Container'
import { Footer } from '~/views/components/Footer'
import { Grid } from '~/views/components/Grid'
import { Header } from '~/views/components/Header'
import { Indicator } from '~/views/components/Indicator'
import { Section } from '~/views/components/Section'
import { Spacer } from '~/views/components/Spacer'

import { FeaturedPostsFragment } from '~/views/fragments/FeaturedPostsFragment'
import { RecentExcerptsFragment } from '~/views/fragments/RecentExcerptsFragment'

export class IndexPage extends Component {

    protected handlePostClick(article: any) {
        this.getContext(Router)?.navigate(`/news/${ article.id }/${ article.slug }`)
    }

    protected render() {
        const cms = this.getContext(GraphCMS)
        const route = this.getContext(Route)
        
        if (!cms || !route?.active) {
            return []
        }

        const featuredArticlesStatus = this.useHook(cms.monitorArticles())
        const featuredArticles = featuredArticlesStatus.response?.body?.data?.posts

        if (featuredArticlesStatus.loading) {
            return [
                <Indicator/>
            ]
        }

        return [
            <Header/>,
            <Container padding={ 24 }>
                <Section glyph='base-station-fill' heading='Latest_Findings'>
                    <Grid columns={ 3 } gap={ 64 }>
                        <FeaturedPostsFragment featuredPosts={ featuredArticles?.slice(0, 3) } onclick={ post => this.handlePostClick(post) }/>
                    </Grid>
                    <Spacer height={ 64 }/>
                    <Grid columns={ 2 } gap={ 64 }>
                        <RecentExcerptsFragment recentPosts={ featuredArticles?.slice(0, 2) }/>
                    </Grid> 
                    <Spacer height={ 64 }/>
                    <Grid columns={ 4 } gap={ 64 }>
                        <FeaturedPostsFragment featuredPosts={ featuredArticles?.reverse().slice(0, 4) } onclick={ post => this.handlePostClick(post) }/>
                    </Grid>
                    <Spacer height={ 64 }/>
                    <Grid columns={ 3 } gap={ 64 }>
                        <Container>
                            <Grid columns={ 1 } gap={ 64 }>
                                <RecentExcerptsFragment recentPosts={ featuredArticles?.slice(0, 4) }/>
                            </Grid>
                        </Container>
                        <Section glyph='play-circle-fill' heading='On_Demand' id='subsection'>
                            <Grid columns={ 2 } gap={ 64 }>
                                <FeaturedPostsFragment featuredPosts={ featuredArticles?.slice(0, 4) } landscape onclick={ post => this.handlePostClick(post) }/>
                            </Grid>
                        </Section>
                    </Grid>
                </Section>
            </Container>,
            <Footer/>
        ]
    }

    protected theme() {
        return createStyleSheet(css => {

            css.selectHost(css => {
                css.write(`
                    display: contents;
                `)
            })

            css.selectId('subsection', css => {
                css.write(`
                    grid-column-end: span 2;
                    grid-column-start: 2;
                    grid-row-end: span;
                `)
            })
        })
    }
}