add empty list placeholder.

2021-01-04 15:48:12 +01:00
parent a6b7469f77
commit da2f71b306
5 changed files with 67 additions and 4 deletions
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { IconName } from "../external/icons";
+  import Icon from "./Icon.svelte";
+
+  export let icon: IconName = "moon";
+  export let text: string = "All good!";
+</script>
+
+<div class="empty-list">
+  <div class="icon">
+    <Icon name={icon} />
+  </div>
+  <div class="text">
+    {text}
+  </div>
+</div>
+
+<style>
+  div.empty-list {
+    font-size: 2em;
+    text-align: center;
+    color: #555;
+    padding: 2em 0;
+  }
+
+  div.icon {
+    font-size: 3em;
+  }
+</style>