2 files changed, 54 insertions, 0 deletions
diff --git a/src/components/MetaItems/MetaItem/MetaItem.module.scss b/src/components/MetaItems/MetaItem/MetaItem.module.scss
new file mode 100644
index 0000000..0b159ca
--- /dev/null
+++ b/src/components/MetaItems/MetaItem/MetaItem.module.scss
@@ -0,0 +1,18 @@
+.wrapper--article {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.title--article {
+  margin-right: var(--spacing-2xs);
+  color: var(--color-fg-light);
+}
+
+.body--article {
+  &:not(:first-of-type) {
+    &::before {
+      content: "/";
+      margin: 0 var(--spacing-2xs);
+    }
+  }
+}
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;