init commit,

99_references/cf-identity-wallet-main/services/credential-server-ui/src/App.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import "./App.css";
+import { Routes, Route } from "react-router-dom";
+import NavBar from "./components/NavBar";
+import ConnectionsIssuer from "./pages/ConnectionsIssuerPage";
+import { Container, CssBaseline, Paper } from "@mui/material";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import ConnectionPage from "./pages/ConnectionPage";
+import CredentialPage from "./pages/CredentialPage";
+import { RequestCredential } from "./pages/RequestCredential";
+
+export const MENU_ITEMS = [
+  {
+    key: "connections",
+    label: "Connection",
+    path: "/connection",
+    component: <ConnectionPage />,
+  },
+  {
+    key: "issue-credential",
+    label: "Issue Credential",
+    path: "/issue-credential",
+    component: <CredentialPage />,
+  },
+  {
+    key: "request-credential",
+    label: "Request Credential",
+    path: "/request-credential",
+    component: <RequestCredential />,
+  },
+];
+
+function App() {
+  return (
+    <div>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <CssBaseline />
+        <NavBar />
+        <Container component="main" maxWidth="md" sx={{ mb: 4 }}>
+          <Paper
+            variant="outlined"
+            sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}
+          >
+            <Routes>
+              <Route path="/" element={<ConnectionPage />} />
+              <Route
+                path="/connections-issuer"
+                element={<ConnectionsIssuer />}
+              />
+              {MENU_ITEMS.map((item) => (
+                <Route
+                  key={item.key}
+                  path={item.path}
+                  element={item.component}
+                />
+              ))}
+            </Routes>
+          </Paper>
+        </Container>
+      </LocalizationProvider>
+    </div>
+  );
+}
+
+export default App;