feat(console): init api resources (#313)

packages/console/src/App.module.scss

@@ -1,4 +1,7 @@
+@use '@/scss/underscore' as _;
+
 .content {
   flex-grow: 1;
   display: flex;
+  padding-right: _.unit(5);
 }

packages/console/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 
 import './scss/normalized.scss';
 import * as styles from './App.module.scss';
@@ -8,6 +8,7 @@ import Content from './components/Content';
 import Sidebar, { getPath, sections } from './components/Sidebar';
 import Topbar from './components/Topbar';
 import initI18n from './i18n/init';
+import ApiResources from './pages/ApiResources';
 
 const isBasenameNeeded = process.env.NODE_ENV !== 'development' || process.env.PORT === '5002';
 
@@ -28,7 +29,11 @@ const Main = () => {
       <Topbar />
       <div className={styles.content}>
         <Sidebar />
-        <Content />
+        <Content>
+          <Routes>
+            <Route path="api-resources" element={<ApiResources />} />
+          </Routes>
+        </Content>
       </div>
     </AppContent>
   );

packages/console/src/components/AppContent/index.module.scss

@@ -9,6 +9,7 @@
 }
 
 .light {
+  --color-card-background: #fff;
   --color-on-surface-variant: #47464e;
   --color-primary: #4f37f9;
   --color-primary-90: #e5dfff;

packages/console/src/components/Card/index.module.scss

@@ -0,0 +1,7 @@
+@use '@/scss/underscore' as _;
+
+.card {
+  background: var(--color-card-background);
+  border-radius: _.unit(4);
+  padding: _.unit(6);
+}

packages/console/src/components/Card/index.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  children: ReactNode;
+};
+
+const Card = ({ children }: Props) => {
+  return <div className={styles.card}>{children}</div>;
+};
+
+export default Card;

packages/console/src/components/Content/index.tsx

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import * as styles from './index.module.scss';
 
-const Content = () => {
+type Props = {
-  return <div className={styles.content}>Content</div>;
+  children: ReactNode;
+};
+
+const Content = ({ children }: Props) => {
+  return <div className={styles.content}>{children}</div>;
 };
 
 export default Content;

packages/console/src/pages/ApiResources/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import Card from '@/components/Card';
+
+const ApiResources = () => {
+  return <Card>ApiResources</Card>;
+};
+
+export default ApiResources;