From 8bd9784acdee6871ad70e86d0d7120299bf76969 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 1 Mar 2022 22:05:08 +0100
Subject: refactor: split posts meta into smaller components

---
 src/components/MetaItems/MetaItem/MetaItem.tsx | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/MetaItems/MetaItem/MetaItem.tsx

(limited to 'src/components/MetaItems/MetaItem/MetaItem.tsx')

diff --git a/src/components/MetaItems/MetaItem/MetaItem.tsx b/src/components/MetaItems/MetaItem/MetaItem.tsx
new file mode 100644
index 0000000..5c51283
--- /dev/null
+++ b/src/components/MetaItems/MetaItem/MetaItem.tsx
@@ -0,0 +1,36 @@
+import { MetaKind } from '@ts/types/app';
+import { ReactElement } from 'react';
+import styles from './MetaItem.module.scss';
+
+const MetaItem = ({
+  title,
+  value,
+  values,
+  info,
+  kind = 'list',
+}: {
+  title: string;
+  value?: ReactElement | string;
+  values?: ReactElement[] | string[];
+  info?: string;
+  kind: MetaKind;
+}) => {
+  return (
+    <div className={styles[`wrapper--${kind}`]}>
+      <dt className={styles[`title--${kind}`]}>{title}</dt>
+      {value && (
+        <dd className={styles[`body--${kind}`]} title={info}>
+          {value}
+        </dd>
+      )}
+      {values &&
+        values.map((currentValue, index) => (
+          <dd key={index} className={styles[`body--${kind}`]} title={info}>
+            {currentValue}
+          </dd>
+        ))}
+    </div>
+  );
+};
+
+export default MetaItem;
-- 
cgit v1.2.3