@tipp/ui 1.0.3 → 1.0.5

package/src/molecules/index.ts

@@ -1 +1,2 @@
 export * from './expand-table';
+export * from './navigation';

package/src/molecules/navigation.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Flex, Typo } from '../atoms';
+
+interface Item {
+  itemRender?: (item: Item) => React.ReactNode;
+  key: string;
+  onClick?: () => void;
+  title: string;
+  icon?: React.ReactNode;
+  children?: Item[];
+}
+
+export interface NavigationProps {
+  items?: Item[];
+  fontColor?: string;
+  backgroundColor?: string;
+}
+
+export function Navigation({
+  items,
+  fontColor,
+  backgroundColor,
+}: NavigationProps): React.ReactNode {
+  return (
+    <Flex
+      direction="column"
+      gap="4"
+      style={{
+        color: fontColor || 'var(--white-a12)',
+        backgroundColor: backgroundColor || 'var(--black-a12)',
+      }}
+    >
+      {items?.map((item) => {
+        const { key, title, icon, itemRender, onClick, children } = item;
+        return (
+          <Flex direction="column" key={key} onClick={onClick}>
+            {itemRender ? (
+              itemRender(item)
+            ) : (
+              <Flex align="center" gap="3" height="36px" pl="4" pr="4">
+                {icon}
+                <Typo variant="subtitle">{title}</Typo>
+              </Flex>
+            )}
+            {children?.map((el) => {
+              return el.itemRender ? (
+                el.itemRender(el)
+              ) : (
+                <Flex
+                  align="center"
+                  height="32px"
+                  key={el.key}
+                  ml="6"
+                  onClick={onClick}
+                  pl="2"
+                  pr="2"
+                >
+                  <Typo variant="subtitle">{el.title}</Typo>
+                </Flex>
+              );
+            })}
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}