-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DIGG-207: Adding single type to handle multi language StartPage
- Loading branch information
1 parent
68ab075
commit fb24bc3
Showing
15 changed files
with
1,402 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import { usePathname } from "next/navigation"; | ||
| import { FC } from "react"; | ||
| import Link from "next/link"; | ||
| import dynamic from "next/dynamic"; | ||
| import { StartPageDataFragment } from "@/graphql/__generated__/operations"; | ||
| import { BlockList } from "@/components/content/blocks/BlockList"; | ||
| import { Heading } from "@/components/global/Typography/Heading"; | ||
| import { Container } from "@/components/layout/Container"; | ||
| import { Preamble } from "@/components/global/Typography/Preamble"; | ||
| import { ContentBox } from "@/components/content/ContentBox"; | ||
| import { dataCategories } from "@/utilities/dataCategories"; | ||
| import { ButtonLink } from "@/components/global/Button"; | ||
| import { isExternalLink } from "@/utilities"; | ||
| import ArrowRightIcon from "@/assets/icons/arrowRight.svg"; | ||
| import ExternalLinkIcon from "@/assets/icons/external-link.svg"; | ||
| import useTranslation from "next-translate/useTranslation"; | ||
|
|
||
| export interface StartPageProps extends StartPageDataFragment {} | ||
|
|
||
| const DynamicStatisticGraph = dynamic( | ||
| () => import("@/components/content/Statistic/StatisticGraph"), | ||
| { | ||
| ssr: false, | ||
| }, | ||
| ); | ||
|
|
||
| const DynamicStatisticNumbers = dynamic( | ||
| () => import("@/components/content/Statistic/StatisticNumbers"), | ||
| { | ||
| ssr: false, | ||
| }, | ||
| ); | ||
|
|
||
| const DynamicStatistic = dynamic( | ||
| () => import("@/components/content/Statistic"), | ||
| { | ||
| ssr: false, | ||
| }, | ||
| ); | ||
|
|
||
| const contentBoxLinks = [ | ||
| { label: "Bidra till Sveriges dataportal", href: "/om-oss" }, | ||
| { label: "Hitta datasamverkan", href: "/datasamverkan" }, | ||
| { | ||
| label: "Delta i communityt", | ||
| href: "https://community.dataportal.se/", | ||
| }, | ||
| ]; | ||
|
|
||
| export const StartPage: FC<StartPageProps> = (props) => { | ||
| const { heading, preamble, image, blocks } = props; | ||
| const pathname = usePathname(); | ||
| const { t, lang } = useTranslation(); | ||
|
|
||
| return ( | ||
| <Container> | ||
| <div id="startPage" className="space-y-md lg:space-y-xl"> | ||
| {!image && heading && ( | ||
| <Heading level={1} size="lg" className="mb-lg md:mb-xl"> | ||
| {heading} | ||
| </Heading> | ||
| )} | ||
|
|
||
| {pathname === `/${t("routes|search-api$path")}` || | ||
| (!image && preamble) ? ( | ||
| <Preamble className="max-w-md">{preamble}</Preamble> | ||
| ) : null} | ||
|
|
||
| <div className={"mb-xl"}> | ||
| {blocks && <BlockList blocks={blocks} landingPage={true} />} | ||
| </div> | ||
|
|
||
| {lang === "sv" && ( | ||
| <> | ||
| <ContentBox | ||
| heading="Var med och delta" | ||
| description="På Sveriges dataportal kan du som delar eller använder data, eller på andra sätt vill att data ska bli en strategisk resurs för bred samhällsnytta, delta på olika sätt. Här kan du ha dialoger med andra, bidra med innehåll eller kanske hitta en framtida samverkanspart." | ||
| > | ||
| <div className="flex flex-wrap justify-center gap-md lg:gap-xl"> | ||
| {contentBoxLinks.map((link, idx: number) => ( | ||
| <ButtonLink | ||
| key={idx} | ||
| href={link.href} | ||
| label={link.label} | ||
| icon={ | ||
| isExternalLink(link.href) | ||
| ? ExternalLinkIcon | ||
| : ArrowRightIcon | ||
| } | ||
| iconPosition="right" | ||
| /> | ||
| ))} | ||
| </div> | ||
| </ContentBox> | ||
| </> | ||
| )} | ||
|
|
||
| <ContentBox heading={t("pages|startpage$datasets_by_category")}> | ||
| <ul className="flex flex-wrap justify-center gap-md lg:gap-lg"> | ||
| {dataCategories?.map((category, idx: number) => ( | ||
| <li key={idx}> | ||
| <ButtonLink | ||
| className="text-center" | ||
| aria-label={t("pages|startpage$search_datasets_format", { | ||
| category: t(`resources|${category.href}`), | ||
| })} | ||
| href={`/${t("routes|datasets$path")}?f=${encodeURIComponent( | ||
| `http://www.w3.org/ns/dcat#theme||${ | ||
| category.href | ||
| }||FALSE||uri||${t( | ||
| "resources|http://www.w3.org/ns/dcat#theme", | ||
| )}||${t("resources|" + category.href)}`, | ||
| )}`} | ||
| label={t(`resources|${category.href}`)} | ||
| /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </ContentBox> | ||
|
|
||
| <section id="statistics" className="my-xl"> | ||
| <div className="mb-2xl flex flex-col justify-between gap-sm md:flex-row md:items-end"> | ||
| <Heading level={2} size={"lg"}> | ||
| {t("pages|statistic$statistic-numbers")} | ||
| </Heading> | ||
| <Link | ||
| href={`/${t("routes|statistics$path")}`} | ||
| locale={lang} | ||
| className="statistic-link" | ||
| > | ||
| {t("pages|statistic$statistic-link")} | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="mb-2xl flex flex-wrap justify-between"> | ||
| <DynamicStatisticGraph /> | ||
| <DynamicStatisticNumbers /> | ||
| </div> | ||
| <div className="flex flex-col items-start gap-xl md:grid md:grid-cols-2"> | ||
| <DynamicStatistic /> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </Container> | ||
| ); | ||
| }; |
Oops, something went wrong.