aboutsummaryrefslogtreecommitdiff
path: root/components/List/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/List/index.tsx')
-rw-r--r--components/List/index.tsx52
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
+};