From d1d1d1f08e35107e0e04aa58f865d6e4de123de1 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 21 May 2022 09:49:08 +0200
Subject: [PATCH] better toggle between list and grid

---
 src/components/listOrGrid.svelte | 30 ++++++++++++++++++++++++++++++
 src/pages/index.svelte           |  7 ++-----
 2 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 src/components/listOrGrid.svelte

diff --git a/src/components/listOrGrid.svelte b/src/components/listOrGrid.svelte
new file mode 100644
index 0000000..94fd270
--- /dev/null
+++ b/src/components/listOrGrid.svelte
@@ -0,0 +1,30 @@
+<script>
+    export var list = false;
+</script>
+
+<div>
+    <button on:click={() => list = !list} class:active={list == false}>Grid</button><!--
+    --><button on:click={() => list = !list} class:active={list == true}>List</button>
+</div>
+
+<style>
+    div {
+        margin-left: auto;
+        width: max-content;
+    }
+    button {
+        border-radius: 0;
+        margin: 0;
+    }
+    button:first-child {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+    button:last-child {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+    button.active {
+        background: rgb(202, 202, 202);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
index 6c7798a..36d3cdb 100644
--- a/src/pages/index.svelte
+++ b/src/pages/index.svelte
@@ -3,6 +3,7 @@
     import { goto } from '@roxi/routify/runtime/helpers';
 	import { getUserDetails, getUserManga, isLogedIn } from "../util/anilist";
 	import Items from "../components/items.svelte";
+	import ListOrGrid from "../components/listOrGrid.svelte";
     
 	var name = "";
 
@@ -61,11 +62,7 @@
 		<a href="https://mangadex.org">Mangadex.org</a>
 	</div>
 
-	<div>
-		<label for="list-style">Show as list</label>
-		<input type="checkbox" name="list-style" id="list-style" bind:checked={listStyle}>
-	</div>
-
+	<ListOrGrid bind:list={listStyle} />
 		
 	{#if isLogedIn()}
 		<div>