WIP

packages/app/src/components/Sidebar/PageTree.tsx

@@ -1,12 +1,13 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import ItemsTree from './PageTree/ItemsTree';
+
 
 type Props = {
 }
 
 const PageTree:FC<Props> = (props: Props) => {
-
   const { t } = useTranslation();
 
   return (
@@ -14,8 +15,9 @@ const PageTree:FC<Props> = (props: Props) => {
       <div className="grw-sidebar-content-header p-3 d-flex">
         <h3 className="mb-0">{t('Page Tree')}</h3>
       </div>
+
       <div className="grw-sidebar-content-body p-3">
-        TBD
+        <ItemsTree />
       </div>
     </>
   );

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -0,0 +1,21 @@
+import React, { memo, ReactNode } from 'react';
+import { IPage } from '../../../interfaces/page';
+
+type Props = {
+  page: IPage
+  isOpen: boolean
+  isTarget: boolean
+  children?: ReactNode
+}
+
+const Item = memo<Props>((props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      Item
+      {children}
+    </>
+  );
+});
+
+export default Item;

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactNode, ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IPage } from '../../../interfaces/page';
+
+import Item from './Item';
+
+
+type Props = {
+}
+
+// TODO: use swr for state
+const ancestors: IPage[] = [];
+const target: IPage = {};
+const siblings: IPage[] = [];
+const ancestorsSiblings: IPage[] = [];
+
+const PageTree:FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
+
+
+  return (
+    <>
+      { ancestors && ancestors.length > 0 && () }
+    </>
+  );
+};
+
+export default PageTree;