From d67f3514eff4f45ad1ca84cde6465e622acd4dcc Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Thu, 7 Sep 2023 21:28:37 -0500
Subject: Scoped global styling to all markdown

Make React compatible with markdown-style HTML by added components
with identical styling to markdown. This is done while CSS scoping
is maintained. Additional style is loaded through the markdown loader
by injecting default-styling tags into the components. This allows
default-margin to be added to these elements in addition to the styling
found in the React elements. The homepage reflects the domain, as defined
by an environmental variable.
---
 components/List/index.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 components/List/index.tsx

(limited to 'components/List/index.tsx')

diff --git a/components/List/index.tsx b/components/List/index.tsx
new file mode 100644
index 0000000..ae5c190
--- /dev/null
+++ b/components/List/index.tsx
@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { getSystemStyle, SystemProps } from '../utils/systemProps';
+import clsx from 'clsx';
+
+interface ListProps extends SystemProps {
+  style?: React.CSSProperties;
+  variant : 'ordered' | 'unordered';
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const List : FC<ListProps> = ({ style, className, variant, children, ...props }) => {
+
+  const systemStyle = getSystemStyle(props, style);
+
+  const Tag = {
+    'ordered': 'ol',
+    'unordered': 'ul'
+  }[variant] as keyof React.ReactHTML;
+
+  const styleClass = 'md-' + Tag;
+
+  return (
+    <Tag
+      className={clsx(styleClass, 'md-list', className)}
+      children={children}
+      style={systemStyle}
+    />
+  );
+};
+
+interface ListItemProps extends SystemProps {
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const ListItem : FC<ListItemProps> = ({ style, className, children, ...props }) => {
+  const systemStyle = getSystemStyle(props, style);
+
+  return (
+    <li
+      className={clsx('md-li', className)}
+      style={systemStyle}
+    >{children}</li>
+  );
+}
+
+export {
+  List,
+  ListItem
+};
-- 
cgit v1.2.3

