Add about section

src/lib/components/Settings/About.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { READER_VERSION } from '$lib/consts';
+  import { showSnackbar } from '$lib/util';
+  import { A, AccordionItem, Badge, Helper, Span } from 'flowbite-svelte';
+  import { GithubSolid } from 'flowbite-svelte-icons';
+
+  function toClipboard() {
+    navigator.clipboard.writeText(
+      'pip install git+https://github.com/kha-white/mokuro.git@web-reader'
+    );
+    showSnackbar('Copied to clipboard');
+  }
+</script>
+
+<AccordionItem>
+  <span slot="header">About</span>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-row justify-between">
+      <p class="font-semibold">Mokuro reader {READER_VERSION} <Badge>BETA</Badge></p>
+      <a
+        class="hover:text-primary-600"
+        href="https://github.com/ZXY101/mokuro-reader"
+        target="_blank"
+      >
+        <GithubSolid />
+      </a>
+    </div>
+    <p>
+      An online reader, gallery and stat tracker for <A href="https://github.com/kha-white/mokuro"
+        >mokuro</A
+      > processed manga.
+    </p>
+    <div>
+      <p>
+        To use the reader, manga must be processed with mokuro <A
+          href="https://github.com/kha-white/mokuro/tree/web-reader">0.2.0-beta.6</A
+        > which can be installed via:
+      </p>
+      <div role="none" on:click={toClipboard}>
+        <code class="text-primary-600 bg-slate-900"
+          >pip install git+https://github.com/kha-white/mokuro.git@web-reader</code
+        >
+      </div>
+    </div>
+    <p>
+      Once processed, upload your manga along with the <span class="text-primary-500">.mokuro</span>
+      file.
+    </p>
+    <Helper
+      >Created by <A href="https://github.com/ZXY101">ZXY101</A> & <A
+        class="https://github.com/kha-white/mokuro">kha-white</A
+      ></Helper
+    >
+  </div>
+</AccordionItem>