re-structure to monorepo.

packages/webapp/src/components/PageForm/FormTopbar.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { Navbar } from '@blueprintjs/core';
+
+/**
+ * Form the topbar.
+ * @param   {JSX.Element} children
+ * @returns {JSX.Element}
+ */
+export function FormTopbar({ className, children }) {
+  return <FormTopBarRoot className={className}>{children}</FormTopBarRoot>;
+}
+
+const FormTopBarRoot = styled(Navbar)`
+  box-shadow: 0 0 0;
+  border-bottom: 1px solid #c7d5db;
+  height: 35px;
+  padding: 0 20px;
+
+  .bp3-navbar-group {
+    height: 35px;
+  }
+  .bp3-navbar-divider {
+    border-left-color: #d2dce2;
+  }
+  .bp3-skeleton {
+    max-height: 10px;
+  }
+  .bp3-button {
+    &:hover {
+      background: rgba(167, 182, 194, 0.12);
+      color: #32304a;
+    }
+  }
+`;
+
+export const DetailsBarSkeletonBase = styled.div`
+  letter-spacing: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 8px;
+  width: 140px;
+  height: 10px;
+`;

packages/webapp/src/components/PageForm/PageFormBigNumber.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { Money } from '@/components';
+
+import '@/style/components/BigAmount.scss';
+
+export function PageFormBigNumber({ label, amount, currencyCode }) {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+      <div class="big-amount">
+        <span class="big-amount__label">{label}</span>
+        <h1 class="big-amount__number">
+          <Money amount={amount} currency={currencyCode} />
+        </h1>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/components/PageForm/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './FormTopbar';
+export * from './PageFormBigNumber';