From 8a6f09b564d5d2f02d0a2605f6b52070a910aaa3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 25 Apr 2022 12:57:12 +0200
Subject: chore: add a PageLayout component

---
 src/components/molecules/layout/meta.module.scss | 17 +++++++++++++++++
 src/components/molecules/layout/meta.tsx         | 14 +++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/components/molecules/layout/meta.module.scss

(limited to 'src/components/molecules/layout')

diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss
new file mode 100644
index 0000000..f7cc55b
--- /dev/null
+++ b/src/components/molecules/layout/meta.module.scss
@@ -0,0 +1,17 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+  }
+}
+
+.value {
+  word-break: break-all;
+}
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index fcce473..d05396e 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -3,6 +3,7 @@ import DescriptionList, {
   type DescriptionListItem,
 } from '@components/atoms/lists/description-list';
 import { FC, ReactNode } from 'react';
+import styles from './meta.module.scss';
 
 export type MetaItem = {
   /**
@@ -23,7 +24,7 @@ export type MetaProps = {
   /**
    * Set additional classnames to the meta wrapper.
    */
-  className?: string;
+  className?: DescriptionListProps['className'];
   /**
    * The meta data.
    */
@@ -43,7 +44,7 @@ export type MetaProps = {
  *
  * Renders the page metadata.
  */
-const Meta: FC<MetaProps> = ({ data, ...props }) => {
+const Meta: FC<MetaProps> = ({ className, data, ...props }) => {
   /**
    * Transform the metadata to description list item format.
    *
@@ -68,7 +69,14 @@ const Meta: FC<MetaProps> = ({ data, ...props }) => {
     return listItems;
   };
 
-  return <DescriptionList items={getItems(data)} {...props} />;
+  return (
+    <DescriptionList
+      items={getItems(data)}
+      className={`${styles.list} ${className}`}
+      descriptionClassName={styles.value}
+      {...props}
+    />
+  );
 };
 
 export default Meta;
-- 
cgit v1.2.3