From 2fa102b5430cbd57dfb63823450c15abd71bbd3b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 30 Dec 2020 11:55:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Badges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #5
---
 src/components/Badges.svelte | 53 ++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/components/Badges.svelte

diff --git a/src/components/Badges.svelte b/src/components/Badges.svelte
new file mode 100644
index 00000000..903e3a90
--- /dev/null
+++ b/src/components/Badges.svelte
@@ -0,0 +1,53 @@
+<h3 class="text-lg">badges</h3>
+<span
+  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
+<span
+  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
+<span
+  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
+<h3 class="text-lg">closable badges</h3>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
+  Primary
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
+  Secondary
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
+  Success
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
+  Danger
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
+  Warning
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
+  Info
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
+  Light<span class="ml-2 text-base cursor-pointer">×</span>
+</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
+  Dark
+  <span class="ml-2 text-base cursor-pointer">×</span>
+</span>