feat: layout create

src/pages/Pool-V3/components/CreatePosition/index.module.scss

@@ -2,4 +2,68 @@
 @import 'src/styles/mixins';
 
 .createPosition {
+  display: flex;
+  padding: 48px 64px 24px 64px;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  flex-shrink: 0;
+}
+
+.box {
+  width: 100%;
+  display: flex;
+  //   max-width: 926px;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+
+  border-radius: var(--Dimension-Corner-Radius-modal, 12px);
+  border: 1px solid var(--Colors-Neutral-Border-border-default, #232521);
+  background: var(--Colors-Neutral-Surface-bg-swap, #1b1d19);
+
+  /* Shadow/1 */
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+
+  .header {
+    width: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--Colors-Neutral-Border-border-default, #232521);
+
+    h1 {
+      color: var(--Colors-Neutral-Text-text-token-name, #f7f7f7);
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 150%; /* 27px */
+    }
+
+    svg {
+      path {
+        @include theme {
+          fill: theme-get('neutral-9');
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 32px;
+
+    display: flex;
+    gap: 48px;
+
+    .item {
+      flex: 1;
+    }
+
+    @include mobile {
+      flex-direction: column;
+    }
+  }
 }

src/pages/Pool-V3/components/CreatePosition/index.tsx

@@ -1,7 +1,33 @@
+import classNames from 'classnames';
+import { ReactComponent as BackIcon } from 'assets/icons/back.svg';
+import { ReactComponent as SettingIcon } from 'assets/icons/setting.svg';
 import styles from './index.module.scss';
+import { useNavigate } from 'react-router-dom';
+import useTheme from 'hooks/useTheme';
 
 const CreatePosition = () => {
-  return <div className={styles.createPosition}>CreatePosition</div>;
+  const navigate = useNavigate();
+  const theme = useTheme();
+
+  return (
+    <div className={classNames('small_container', styles.createPosition)}>
+      <div className={styles.box}>
+        <div className={styles.header}>
+          <div className={styles.back} onClick={() => navigate('/pools-v3')}>
+            <BackIcon />
+          </div>
+          <h1>Add new liquidity position</h1>
+          <div className={styles.setting}>
+            <SettingIcon />
+          </div>
+        </div>
+        <div className={styles.content}>
+          <div className={styles.item}>TOKEN section</div>
+          <div className={styles.item}>PRICE section</div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default CreatePosition;

src/routes.tsx

@@ -44,7 +44,7 @@ export default () => (
       <Route path="/pools-v3" element={<PoolsV3 />} />
       <Route path="/pools-v3/:poolId" element={<PoolV3Detail />} />
       <Route path="/new-position/:item1?/:item2?/:item3?" element={<CreatePosition />} />
-      <Route path="/position/:address/:id" element={<PositionDetail />} />
+      {/* <Route path="/position/:address/:id" element={<PositionDetail />} /> */}
       <Route path="/pools-v3/swap" element={<SwapPoolV3 />} />
       <Route path="/staking" element={<StakingPage />} />
       <Route path="/co-harvest" element={<CoHarvest />} />