Added routes

Author: deadblackclover

src/lib/components/Account.svelte

@@ -42,15 +42,13 @@
 </div>
 
 <style>
+    @import "$lib/styles/style.css";
+
     .account button {
         border: 0;
         background-color: transparent;
     }
 
-    .account button:hover {
-        cursor: pointer;
-    }
-
     .avatar {
         display: flex;
         justify-content: center;

src/lib/components/Edit.svelte

@@ -37,6 +37,8 @@
 </div>
 
 <style>
+    @import "$lib/styles/style.css";
+
     .edit {
         display: flex;
         flex-direction: column;
@@ -54,14 +56,6 @@
         padding: 0 35px;
     }
 
-    .item > input {
-        padding: 5px;
-        border: 0;
-        border-radius: 10px;
-        background: #f3f6f4;
-        text-align: center;
-    }
-
     .buttons {
         box-sizing: border-box;
         display: flex;
@@ -70,16 +64,4 @@
         margin-top: 20px;
         padding: 0 35px;
     }
-
-    .buttons button {
-        background-color: black;
-        color: white;
-        padding: 5px;
-        border: 0;
-        border-radius: 10px;
-    }
-
-    .buttons button:hover {
-        cursor: pointer;
-    }
 </style>

src/lib/styles/style.css

@@ -0,0 +1,29 @@
+.block {
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 5px 15px;
+    border-radius: 10px;
+    text-align: center;
+    background-color: white;
+}
+
+input {
+    padding: 5px;
+    border: 0;
+    border-radius: 10px;
+    text-align: center;
+    background: #f3f6f4;
+}
+
+button {
+    padding: 5px;
+    border: 0;
+    border-radius: 10px;
+    background-color: black;
+    color: white;
+}
+
+button:hover {
+    cursor: pointer;
+}

src/routes/+layout.js

@@ -40,47 +40,17 @@
 </div>
 
 <style>
-    .block {
-        max-width: 400px;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 5px 15px;
-        border-radius: 10px;
-        text-align: center;
-        background-color: white;
-    }
+    @import "$lib/styles/style.css";
 
     .block input {
         width: 100%;
-        padding: 5px;
-        border: 0;
-        border-radius: 10px;
-        text-align: center;
-        background: #f3f6f4;
-    }
-
-    .block button {
-        padding: 5px;
-        border: 0;
-        border-radius: 10px;
-        background-color: black;
-        color: white;
     }
 
-    .block button:hover {
-        cursor: pointer;
-    }
-
-    .head {
+    .head,
+    .search {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 35px;
     }
-
-    .search {
-        display: flex;
-        justify-content: space-around;
-        padding: 0 35px;
-    }
 </style>

src/routes/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { getAccountInfo } from "$lib/contract";
+    import type { PageProps } from "./$types";
+    import Account from "$lib/components/Account.svelte";
+
+    let { data }: PageProps = $props();
+
+    let promise = $state(getAccountInfo(data.account));
+</script>
+
+<div class="block">
+    <h1>EOS Account</h1>
+    <div>
+        {#await promise}
+            <div>...</div>
+        {:then data}
+            <Account {data} />
+        {/await}
+    </div>
+</div>
+
+<style>
+    @import '$lib/styles/style.css';
+</style>

src/routes/[account]/+page.svelte

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ params }) => {
+    return {
+        account: params.account
+    }
+};

src/routes/[account]/+page.ts

@@ -6,7 +6,10 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
+		router: {
+			type: 'hash'
+		}
 	}
 };