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

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

diff --git a/src/components/Avatars.svelte b/src/components/Avatars.svelte
new file mode 100644
index 00000000..5ecd3eae
--- /dev/null
+++ b/src/components/Avatars.svelte
@@ -0,0 +1,80 @@
+<h3 class="text-lg">Standard Avatars</h3>
+<div class="relative rounded-full w-4 h-4">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-8 h-8">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-12 h-12">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-16 h-16">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-20 h-20">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<div class="relative rounded-full w-24 h-24">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+</div>
+<h3 class="text-lg">Status Avatars</h3>
+<div class="relative rounded-full w-4 h-4">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
+</div>
+<div class="relative rounded-full w-8 h-8">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
+</div>
+<div class="relative rounded-full w-12 h-12">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
+</div>
+<div class="relative rounded-full w-16 h-16">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
+</div>
+<div class="relative rounded-full w-20 h-20">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
+</div>
+<div class="relative rounded-full w-24 h-24">
+  <img
+    alt=""
+    src="https://gustui.s3.amazonaws.com/avatar.png"
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+  <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
+</div>