Support API in frontend

frontend/src/main.rs

@@ -1,20 +1,56 @@
+mod pages;
+
 use yew::prelude::*;
+use yew_router::prelude::*;
+
+use pages::cdr::{Cdr};
+use pages::did::{DidListComponent};
+
+#[derive(Clone, Routable, PartialEq)]
+enum Route {
+    #[at("/")]
+    Home,
+    #[at("/did")]
+    Did,
+    #[at("/cdr")]
+    Cdr,
+}
+
+fn switch(routes: Route) -> Html {
+    match routes {
+        Route::Home => html! {
+            <DidListComponent />
+         },
+        Route::Did => html! {
+            <DidListComponent />
+        },
+        Route::Cdr => html! {
+            <Cdr />
+        },
+    }
+}
 
 #[component]
 fn App() -> Html {
 html! {
-    <div class="navbar bg-base-100 shadow-sm">
-        <div class="navbar-start">
+    <BrowserRouter>
+        <div class="navbar bg-base-100 shadow-sm">
+            <div class="navbar-start">
+            </div>
+            <div class="navbar-center lg:flex">
+                <ul class="menu menu-horizontal px-1">
+                    <li>
+                        <Link<Route> to={Route::Home}>{"DID"}</Link<Route>>
+                    </li>
+                    <li><Link<Route> to={Route::Cdr}>{"CDR"}</Link<Route>></li>
+                </ul>
+            </div>
+            <div class="navbar-end">
+            </div>
         </div>
-        <div class="navbar-center lg:flex">
-            <ul class="menu menu-horizontal px-1">
-                <li><a>{"DID"}</a></li>
-                <li><a>{"CDR"}</a></li>
-            </ul>
-        </div>
-        <div class="navbar-end">
-        </div>
-    </div>
+        <Switch<Route> render={switch} />
+    </BrowserRouter>        
+
     }
 }