zhereh-frontend

commit a2975206dc3a1c77df5b1b35ede95f3f122073c3
parent 806d39c59fc4d20b4c96f411ef450a5479d4882f
Author: William Muli <willi.wambu@gmail.com>
Date:   Tue, 13 Jun 2023 18:40:05 +0300

Added navigation

Diffstat:
M
.prettierrc
 | 
3
++-
M
src/app.css
 | 
6
+++---
A
src/components/nav/nav.svelte
 | 
46
++++++++++++++++++++++++++++++++++++++++++++++
A
src/options/nav-options.ts
 | 
20
++++++++++++++++++++
M
src/routes/+page.svelte
 | 
8
+++++---

5 files changed, 76 insertions(+), 7 deletions(-)
diff --git a/.prettierrc b/.prettierrc
@@ -5,5 +5,6 @@
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "semi": false
 }
diff --git a/src/app.css b/src/app.css
@@ -1,4 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
-\ No newline at end of file
+@tailwind utilities;
+\ No newline at end of file
diff --git a/src/components/nav/nav.svelte b/src/components/nav/nav.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { NavOptions } from "../../options/nav-options";
+</script>
+
+<nav class="flex items-center justify-between flex-wrap bg-black p-6">
+	<div class="flex items-center flex-shrink-0 text-white mr-6">
+		<svg
+			class="fill-current h-8 w-8 mr-2"
+			width="54"
+			height="54"
+			viewBox="0 0 54 54"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
+			/></svg
+		>
+		<span class="font-semibold text-xl tracking-tight">EVM Token Vote</span>
+	</div>
+	<div class="block lg:hidden">
+		<button
+			class="flex items-center px-3 py-2 border rounded text-white border-teal-400 hover:text-white hover:border-white"
+		>
+			<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+				><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg
+			>
+		</button>
+	</div>
+	<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto lg:ml-20">
+		<div class="text-sm lg:flex-grow">
+      {#each NavOptions as { url, name} }
+        <a
+          href={url}
+          class="block mt-4 lg:inline-block lg:mt-0 text-gray-400 font-bold hover:text-white hover:text-md mr-4"
+        >
+          {name}
+        </a>
+      {/each}
+    </div>
+		<div>
+			<button
+				class="inline-block text-sm px-4 py-2 leading-none rounded text-white bg-emerald-500 hover:text-teal-500 hover:bg-emerald-600 mt-4 lg:mt-0"
+				>Connect wallet</button
+			>
+		</div>
+	</div>
+</nav>
diff --git a/src/options/nav-options.ts b/src/options/nav-options.ts
@@ -0,0 +1,20 @@
+export type NavOption = {
+  name: string
+  url: string
+}
+
+export const NavOptions: NavOption[] = [
+  {
+    
+    name: 'Proposals',
+    url: 'proposals'
+  },
+  {
+    name: 'Activity',
+    url: 'activity'
+  },
+  {
+    name: 'Add chain',
+    url: 'add-chain'
+  }
+]
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,9 +3,11 @@
 	<meta name="description" content="Vote on propositions with zero or more options using ERC20 tokens." />
 </svelte:head>
 
-<h1 class="text-3xl font-bold font-body font-poppins">
-  Hello world!
-</h1>
+<script lang="ts">
+  import Nav from "../components/nav/nav.svelte";
+</script>
+
+<Nav />
 
 <style lang="postcss">
   :global(html) {