feat(vth): render themas with card

frameless · Oct 4, 2023 · 81252b2 · 81252b2
1 parent 4d05b5d
commit 81252b2
Show file tree

Hide file tree

Showing 53 changed files with 116 additions and 75,573 deletions.
diff --git a/apps/vth-frontend/next.config.js b/apps/vth-frontend/next.config.js
@@ -9,9 +9,6 @@ const nextConfig = {
         hostname: hostname,
         port: port,
       },
-      {
-        hostname: 'omgevingsvisie.utrecht.nl',
-      },
     ],
   },
   experimental: {

diff --git a/apps/vth-frontend/src/app/[locale]/layout.tsx b/apps/vth-frontend/src/app/[locale]/layout.tsx
@@ -65,6 +65,7 @@ const getNavListData = (t: (text: string) => string) => [
 ];
 
 export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = await useTranslation(locale, 'common');
   return {
     title: {
@@ -170,7 +171,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         <QueryClientProvider>
           <Page className="utrecht-page--full-width">
             <PageHeader>
-              <Grid>
+              <Grid className={'utrecht-grid--content-padding'}>
                 <Logo locale={locale} />
               </Grid>
             </PageHeader>

diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -1,8 +1,9 @@
 import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
 import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
-import { Heading1, Heading2, Link, UnorderedList, UnorderedListItem } from '@utrecht/component-library-react';
+import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
+import { Card } from '@/components/Card';
 import { Grid } from '@/components/Grid';
 import { Markdown } from '@/components/Markdown';
 import { GET_HOME_PAGE } from '@/query';
@@ -39,25 +40,27 @@ const Home = async ({ params: { locale } }: { params: any }) => {
   const themas = data?.themas?.data;
 
   return (
-    <Grid>
-      <div className={'two-thirds'}>
+    <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown>{content}</Markdown>
       </div>
-      <div className={'two-thirds'}>
-        <Heading2>Themas</Heading2>
-        <UnorderedList>
-          {themas &&
-            themas.map((thema: any) => {
-              const { title, slug } = thema.attributes;
-              return (
-                <UnorderedListItem key={`thema-${slug}`}>
-                  <Link href={`/themas/${slug}`}>{title}</Link>
-                </UnorderedListItem>
-              );
-            })}
-        </UnorderedList>
-      </div>
+      <Grid className={'utrecht-grid__full-width'}>
+        {themas &&
+          themas.map((thema: any) => {
+            const { title, description, slug } = thema.attributes;
+            return (
+              <Card
+                className={'utrecht-grid__one-third'}
+                key={`thema-${slug}`}
+                title={title}
+                description={description}
+                image={{ url: '', alt: '' }}
+                link={{ href: `/themas/${slug}` }}
+              />
+            );
+          })}
+      </Grid>
     </Grid>
   );
 };

diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx
@@ -41,8 +41,8 @@ const Thema = async ({ params: { locale, contentSlug } }: Params) => {
   const { title, content, parents } = data.findSlug.data.attributes;
 
   return (
-    <Grid>
-      <div className={'two-thirds'}>
+    <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
         <Heading2>Themas</Heading2>

diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
@@ -1,13 +1,6 @@
 import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
 import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
-import {
-  Heading1,
-  Heading2,
-  Link,
-  Paragraph,
-  UnorderedList,
-  UnorderedListItem,
-} from '@utrecht/component-library-react';
+import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
 import { useTranslation } from '@/app/i18n';
@@ -23,9 +16,6 @@ type Params = {
   };
 };
 
-const cardBody =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam aliquam, nunc nisl aliquam nisl, nec aliquam nisl nisl nec nisl.';
-
 export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = await useTranslation(locale, 'thema');
@@ -42,82 +32,45 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
     variables: { slug: themaSlug, locale: locale },
   });
 
-  const { title, content, parents, child_themas, child_contents } = data.findSlug.data.attributes;
+  const { title, content, child_themas, child_contents } = data.findSlug.data.attributes;
 
   return (
-    <Grid>
-      <div className={'two-thirds'}>
+    <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
       </div>
-      <div className={'two-thirds'}>
-        <Card
-          alt={''}
-          body={cardBody}
-          href={'/themas/afval'}
-          imgSrc={'https://omgevingsvisie.utrecht.nl/fileadmin/_processed_/2/6/csm_bouwprojecten-header_b14a8b7229.jpg'}
-          title={'Afval'}
-        />
-      </div>
-      <div className={'two-thirds'}>
-        <Heading2>Hoofd-themas</Heading2>
-        {parents.data[0] ? (
-          <UnorderedList>
-            {parents.data &&
-              parents.data.map((content: any) => {
-                const { title, slug: parentSlug } = content.attributes;
-                return (
-                  <UnorderedListItem key={`thema-${parentSlug}`}>
-                    <Link href={`/themas/${parentSlug}`}>{title}</Link>
-                  </UnorderedListItem>
-                );
-              })}
-          </UnorderedList>
-        ) : (
-          <>
-            <Paragraph>Geen content paginas verbonden.</Paragraph>
-          </>
-        )}
-      </div>
-      <div className={'two-thirds'}>
-        <Heading2>Sub-themas</Heading2>
-        {child_themas.data[0] ? (
-          <UnorderedList>
-            {child_themas.data.map((thema: any) => {
-              const { title, slug: childSlug } = thema.attributes;
-              return (
-                <UnorderedListItem key={`thema-${childSlug}`}>
-                  <Link href={`/themas/${childSlug}`}>{title}</Link>
-                </UnorderedListItem>
-              );
-            })}
-          </UnorderedList>
-        ) : (
-          <>
-            <Paragraph>Geen sub-themas verbonden.</Paragraph>
-          </>
-        )}
-      </div>
-      <div className={'two-thirds'}>
-        <Heading2>Content paginas</Heading2>
-        {child_contents.data[0] ? (
-          <UnorderedList>
-            {child_contents.data &&
-              child_contents.data.map((content: any) => {
-                const { title, slug: contentSlug } = content.attributes;
-                return (
-                  <UnorderedListItem key={`thema-${contentSlug}`}>
-                    <Link href={`/themas/${themaSlug}/content/${contentSlug}`}>{title}</Link>
-                  </UnorderedListItem>
-                );
-              })}
-          </UnorderedList>
-        ) : (
-          <>
-            <Paragraph>Geen content paginas verbonden.</Paragraph>
-          </>
-        )}
-      </div>
+      <Grid className={'utrecht-grid__full-width'}>
+        {child_themas.data[0] &&
+          child_themas.data.map((thema: any) => {
+            const { title, description, slug: childSlug } = thema.attributes;
+            return (
+              <Card
+                className={'utrecht-grid__one-third'}
+                image={{ url: '', alt: '' }}
+                title={title}
+                description={description}
+                key={`thema-${childSlug}`}
+                link={{ href: `/themas/${childSlug}` }}
+              />
+            );
+          })}
+        {child_contents.data[0] &&
+          child_contents.data &&
+          child_contents.data.map((content: any) => {
+            const { title, description, slug: contentSlug } = content.attributes;
+            return (
+              <Card
+                className={'utrecht-grid__one-third'}
+                title={title}
+                description={description}
+                key={`thema-${contentSlug}`}
+                image={{ url: '', alt: '' }}
+                link={{ href: `/themas/${themaSlug}/content/${contentSlug}` }}
+              />
+            );
+          })}
+      </Grid>
     </Grid>
   );
 };

diff --git a/apps/vth-frontend/src/components/Card/index.style.css b/apps/vth-frontend/src/components/Card/index.style.css
@@ -4,5 +4,8 @@
 }
 
 .utrecht-card__content {
-  padding: 0 1rem 1rem 1rem;
+  padding-block-end: 1rem;
+  padding-block-start: 0;
+  padding-inline-end: 1rem;
+  padding-inline-start: 1rem;
 }
diff --git a/apps/vth-frontend/src/components/Card/index.tsx b/apps/vth-frontend/src/components/Card/index.tsx
@@ -6,22 +6,26 @@ import React, { FC, HTMLAttributes } from 'react';
 import './index.style.css';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  alt: string;
-  body: string;
-  href: string;
-  imgSrc: string;
   title: string;
+  description: string;
+  image: {
+    url: string;
+    alt: string;
+  };
+  link: {
+    href: string;
+  };
 }
 
-export const Card: FC<CardProps> = ({ alt, body, href, imgSrc, title, ...props }) => {
+export const Card: FC<CardProps> = ({ description, title, image: { url = '', alt }, link: { href }, ...props }) => {
   return (
     <div {...props} className={clsx('utrecht-card', props.className)}>
-      <Image src={imgSrc} alt={alt} className={'utrecht-card__image'} width={312} height={200} />
+      {url && <Image src={url} alt={alt} className={'utrecht-card__image'} width={312} height={200} />}
       <div className={'utrecht-card__content'}>
         <Link href={href} className={'utrecht-link'}>
           <Heading2 className="utrecht-card__title">{title}</Heading2>
         </Link>
-        <Paragraph className="utrecht-card__body">{body}</Paragraph>
+        <Paragraph className="utrecht-card__body">{description}</Paragraph>
       </div>
     </div>
   );

diff --git a/apps/vth-frontend/src/components/Footer/index.module.scss b/apps/vth-frontend/src/components/Footer/index.module.scss
@@ -9,8 +9,8 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  max-width: 70rem;
   margin-inline: auto;
+  max-width: 70rem;
 }
 
 .utrecht-footer__list-item--6 {