From 19bc63e7c7ef3673d1abe485a54e20cd798049fd Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 24 Jan 2024 21:36:09 -0800
Subject: feat(skeleton): grid skeleton

---
 src/lib/Skeleton.svelte | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte
index 839d7985..7a278429 100644
--- a/src/lib/Skeleton.svelte
+++ b/src/lib/Skeleton.svelte
@@ -3,19 +3,32 @@
 	export let width = '100%';
 	export let height = '100px';
 	export let card = true;
+	export let grid = false;
 </script>
 
-{#each Array(count) as _, i}
-	<div class={card ? 'card card-small' : ''} style={`width: ${width};`}>
-		<div class="skeleton-container">
-			<div class="skeleton" style={`width: ${width}; height: ${height};`} />
-		</div>
+{#if grid}
+	<div class="grid">
+		{#each Array(count) as _}
+			<div class={card ? 'card card-small' : ''} style={`width: ${width};`}>
+				<div class="skeleton-container">
+					<div class="skeleton" style={`width: ${width}; height: ${height};`} />
+				</div>
+			</div>
+		{/each}
 	</div>
+{:else}
+	{#each Array(count) as _, i}
+		<div class={card ? 'card card-small' : ''} style={`width: ${width};`}>
+			<div class="skeleton-container">
+				<div class="skeleton" style={`width: ${width}; height: ${height};`} />
+			</div>
+		</div>
 
-	{#if i < count - 1}
-		<p />
-	{/if}
-{/each}
+		{#if i < count - 1}
+			<p />
+		{/if}
+	{/each}
+{/if}
 
 <style>
 	@keyframes progress {
@@ -41,4 +54,10 @@
 		display: inline-block;
 		line-height: 1;
 	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		grid-gap: 1rem;
+	}
 </style>
-- 
cgit v1.2.3