tabbit

Thu Jan 06 2022
Copied to clipboard! Copy reply
import React from "react";
import { graphql } from "gatsby";
import styled from "styled-components";
import { backgrounds } from "@resourcehub/resourcehub-assets";
import {
    ButtonStyled,
    ChildContentWrapper,
    Link,
    ListButton,
    PageSectionEmpty,
    PageSectionImageText,
    PageSectionVideoText,
    PageTemplateWrapper,
    TitleWrapper
} from "@resourcehub/resourcehub-components";
import configGenerator from "@resourcehub/resourcehub-configuration";
import { getImage } from "gatsby-plugin-image";

const CustomPageStyles = styled.div`
    label: CustomPageStyles;
    > div:first-of-type {
        padding-bottom: 100px;
        padding-top: 12px;
    }
    > div:not(:first-of-type) {
        padding: 128px 0;
    }
    > div:nth-of-type(1) {
        background-repeat: no-repeat;
        background-size: cover;
        ${({ headerBackground }) => `background-image: url(${headerBackground});`};

        //Mobile-landscape (and larger)
        @media (min-width: 320px) {
            padding-top: 50px;
            background-position-x: -323px;
            img {
                display: none;
            }
        }
        //Mobile-landscape (and larger)
        @media (min-width: 480px) {
            padding-top: 50px;
            background-position-x: -323px;
            img {
                display: none;
            }
        }
        // Tablet-portrait (and larger)
        @media (min-width: 768px) {
            padding-top: 50px;
            background-position-x: -323px;
            img {
                display: none;
            }
        }
        // Tablet-landscape (and larger)
        @media (min-width: 992px) {
            padding-top: 50px;
            background-position-x: 0;
            img {
                display: none;
            }
        }
        // Laptops (and longer)
        @media (min-width: 1200px) {
            padding-top: 20px;
            background-position-x: 0;
            img {
                display: block;
            }
        }
    }
`;

const ContactsSection = styled.div`
    label: ContactsSection;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    > div:first-of-type {
        padding-bottom: 25px;
    }

    //Mobile-landscape (and larger)
    @media (min-width: 320px) {
        > div:last-of-type {
            padding-top: 25px;
            font-size: 16pt;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-wrap: nowrap;
            a {
                font-size: 16pt;
            }
            div:nth-of-type(2) {
                margin-bottom: 30px;
            }
        }
    }
    //Mobile-landscape (and larger)
    @media (min-width: 480px) {
        > div:last-of-type {
            padding-top: 25px;
            font-size: 16pt;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-wrap: nowrap;
            a {
                font-size: 16pt;
            }
            div:nth-of-type(2) {
                margin-bottom: 30px;
            }
        }
    }
    // Tablet-portrait (and larger)
    @media (min-width: 768px) {
        > div:last-of-type {
            padding-top: 25px;
            font-size: 16pt;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-wrap: nowrap;
            a {
                font-size: 16pt;
            }
            div:nth-of-type(2) {
                margin-bottom: 30px;
            }
        }
    }
    // Tablet-landscape (and larger)
    @media (min-width: 992px) {
        > div:last-of-type {
            padding-top: 25px;
            font-size: 16pt;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-wrap: nowrap;
            a {
                font-size: 16pt;
            }
            div:nth-of-type(2) {
                margin-bottom: 10px;
            }
        }
    }
    // Laptops (and longer)
    @media (min-width: 1200px) {
        > div:last-of-type {
            padding-top: 25px;
            font-size: 16pt;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            > div {
                padding: 10px;
                width: 48%;
                font-size: 16pt;
                :nth-of-type(2n - 1) {
                    line-height: 1.5;
                    font-weight: 700;
                    text-align: right;
                }
            }
        }
    }
`;

const GettingStartedButtons = styled.div`
    label: GettingStartedButtons;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
`;

const TeacherResourcesList = styled.ul`
    label: TeacherResourcesList;
    list-style: none;
    margin: 0;

    li {
        list-style: none;
        font-size: 22pt;
        margin-bottom: 30px;
        ::before {
            content: "\\2022"; /* Add content: \\2022 is the CSS Code/unicode for a bullet */
            color: #377eb3; /* Change the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 1em; /* Also needed for space (tweak if needed) */
            margin-left: -1em; /* Also needed for space (tweak if needed) */
        }
        span,
        a {
            font-size: 14pt;
        }
    }
`;

const GettingStartedWrapper = styled.div`
    padding: 0 !important;
    > div {
        padding: 128px 0;
    }
`;

const CurrentVideoToggleWrapper = styled.div`
    padding: 0 !important;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;

    @media (max-width: 1200px) {
        justify-content: center;
    }
`;

const CurrentVideoToggle = styled.div`
    transform: translateY(100px);
    width: calc(20% + 390px);
    cursor: pointer;
    font-family: helvetica, sans-serif;

    @media (max-width: 1200px) {
        width: initial;
    }

    span:nth-child(2) {
        margin: 0 5px;
    }
`;

const VideoToggle = styled.span`
    font-weight: ${({ isActive }) => (isActive ? "600" : "400")};
    color: ${({ isActive }) => (isActive ? "black" : "#0099DA")};
    text-decoration: ${({ isActive }) => (isActive ? "none" : "underline")};
`;

const ContactsSeparator = styled.div`
    label: ContactsSeparator;
    box-sizing: border-box;
    height: 1px;
    width: 70%;
    border: 1px solid #b7cfe7;
`;

const Page = ({ data }) => {
    const { parent_resources, teacher_resources, professional_development, site } = data;
    const config = configGenerator({
        market: site.siteMetadata.market,
        site: site.siteMetadata.site,
        locale: site.siteMetadata.lang,
        page: "home"
    });

    const [currentVideo, setCurrentVideo] = React.useState("english");

    config.page.content.getting_started.panels[0].children = (
        <GettingStartedButtons>
            <ListButton {...config.page.content.getting_started.panels[0].custom.list_button_1} />
            <ListButton {...config.page.content.getting_started.panels[0].custom.list_button_2} />
        </GettingStartedButtons>
    );
    config.page.content.helpful_resources.panels[0].children = (
        <ChildContentWrapper>
            <p dangerouslySetInnerHTML={{ __html: config.page.content.helpful_resources.panels[0].custom.li_1 }} />
            <p dangerouslySetInnerHTML={{ __html: config.page.content.helpful_resources.panels[0].custom.li_2 }} />
            <p dangerouslySetInnerHTML={{ __html: config.page.content.helpful_resources.panels[0].custom.li_3 }} />
        </ChildContentWrapper>
    );

    config.page.content.teacher_resources.panels[0].image.src = getImage(teacher_resources);
    config.page.content.teacher_resources.panels[0].children = (
        <TeacherResourcesList>
            <li dangerouslySetInnerHTML={{ __html: config.page.content.teacher_resources.panels[0].custom.li_1 }} />
            <li dangerouslySetInnerHTML={{ __html: config.page.content.teacher_resources.panels[0].custom.li_2 }} />
            <li dangerouslySetInnerHTML={{ __html: config.page.content.teacher_resources.panels[0].custom.li_3 }} />
        </TeacherResourcesList>
    );

    config.page.content.parent_resources.panels[0].image.src = getImage(parent_resources);
    config.page.content.parent_resources.panels[0].children = (
        <>
            <p dangerouslySetInnerHTML={{ __html: config.page.content.parent_resources.panels[0].custom.li_1 }} />
            <p dangerouslySetInnerHTML={{ __html: config.page.content.parent_resources.panels[0].custom.li_2 }} />
        </>
    );
    config.page.content.professional_development.panels[0].image.src = getImage(professional_development);
    config.page.content.professional_development.panels[0].children = (
        <>
            <p
                dangerouslySetInnerHTML={{ __html: config.page.content.professional_development.panels[0].custom.li_1 }}
            />
            <p
                dangerouslySetInnerHTML={{ __html: config.page.content.professional_development.panels[0].custom.li_2 }}
            />
            <ButtonStyled {...config.page.content.professional_development.panels[0].custom.cta_1} />
        </>
    );

    const gettingStartedDefaultVideoUrl = config.page.content.getting_started.panels[0].video.currentVideoUrl;
    const spanishVideoUrl = config.page.content.getting_started.panels[0].video.spanishVideoUrl;

    config.page.content.getting_started.panels[0].video.currentVideoUrl =
        currentVideo === "english" ? gettingStartedDefaultVideoUrl : spanishVideoUrl;

    return (
        <PageTemplateWrapper config={config}>
            <CustomPageStyles headerBackground={backgrounds.headerBlueYellowSvg}>
                <PageSectionImageText {...config.page.content.heading} />
                <PageSectionEmpty {...config.page.content.contacts}>
                    <ContactsSection>
                        <TitleWrapper {...config.page.content.contacts.custom.title} />
                        <ContactsSeparator />
                        <div>
                            <div>{config.page.content.contacts.custom.contact_1_label.content}</div>
                            <Link {...config.page.content.contacts.custom.contact_1_link} />
                            <div>{config.page.content.contacts.custom.contact_2_label.content}</div>
                            <Link {...config.page.content.contacts.custom.contact_2_link} />
                        </div>
                    </ContactsSection>
                </PageSectionEmpty>
                <GettingStartedWrapper>
                    <CurrentVideoToggleWrapper>
                        <CurrentVideoToggle>
                            <VideoToggle
                                isActive={currentVideo === "english"}
                                onClick={() => setCurrentVideo("english")}
                            >
                                English
                            </VideoToggle>
                            <span>/</span>
                            <VideoToggle
                                isActive={currentVideo === "spanish"}
                                onClick={() => setCurrentVideo("spanish")}
                            >
                                Spanish
                            </VideoToggle>
                        </CurrentVideoToggle>
                    </CurrentVideoToggleWrapper>
                    <PageSectionVideoText {...config.page.content.getting_started} />
                </GettingStartedWrapper>
                <PageSectionVideoText {...config.page.content.helpful_resources} />
                <PageSectionImageText {...config.page.content.teacher_resources} />
                <PageSectionImageText {...config.page.content.parent_resources} />
                <PageSectionImageText {...config.page.content.professional_development} />
            </CustomPageStyles>
        </PageTemplateWrapper>
    );
};

export default Page;

export const pageQuery = graphql`
    {
        site {
            ...SiteFragment
        }
        parent_resources: file(relativePath: { eq: "pages/us-consumer-lausd/parent-resources.jpg" }) {
            childImageSharp {
                gatsbyImageData(width: 487, height: 300, placeholder: TRACED_SVG, layout: CONSTRAINED)
            }
        }
        professional_development: file(relativePath: { eq: "pages/us-consumer-lausd/professional-development.jpg" }) {
            childImageSharp {
                gatsbyImageData(width: 487, height: 300, placeholder: TRACED_SVG, layout: CONSTRAINED)
            }
        }
        teacher_resources: file(relativePath: { eq: "pages/us-consumer-lausd/teacher-resources.jpg" }) {
            childImageSharp {
                gatsbyImageData(width: 487, height: 300, placeholder: TRACED_SVG, layout: CONSTRAINED)
            }
        }
    }
`;