1 files changed, 52 insertions, 0 deletions
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
+};