@tipp/ui 1.0.4 → 1.0.5

package/dist/molecules/navigation.js

@@ -0,0 +1,62 @@
+import {
+  Navigation
+} from "../chunk-ALP5524J.js";
+import "../chunk-MASTHXWN.js";
+import "../chunk-IIBITN2G.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
+import "../chunk-355MU6BH.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-LPUSIN3M.js";
+import "../chunk-5AVBYDPB.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-HLOY6BIP.js";
+import "../chunk-O3T3TM3V.js";
+import "../chunk-O3DNDMV3.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-XQOZWYUA.js";
+import "../chunk-Q37G2GS6.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-P6B2PNYI.js";
+import "../chunk-YTZSKMX3.js";
+import "../chunk-4IKPNQV5.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-CNQ7RNNY.js";
+import "../chunk-O3XTRD7R.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-RET725VL.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-FYEASFUU.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-OCJNQGHN.js";
+import "../chunk-EK4ZFDYD.js";
+import "../chunk-J242TTFH.js";
+import "../chunk-EAXUQEO5.js";
+import "../chunk-CZEGRZBK.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-N552FDTV.js";
+export {
+  Navigation
+};
+//# sourceMappingURL=navigation.js.map

package/dist/molecules/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "type": "module",
   "exports": {

package/src/icon.ts

@@ -11,4 +11,8 @@ export {
   MixerHorizontalIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ClipboardIcon,
+  BarChartIcon,
+  PersonIcon,
+  GearIcon,
 } from '@radix-ui/react-icons';

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>
+  );
+}