From 6fef6e5c41b6b02521324a5c9f6dcd66a6a9d3ef Mon Sep 17 00:00:00 2001
From: Navneet Sharma <navneetnnavneet1@gmail.com>
Date: Mon, 7 Feb 2022 17:26:26 +0530
Subject: [PATCH] Added the Stats Cards components

---
 .../ui/components/cards/StatsCard.svelte      | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/lib/shared/ui/components/cards/StatsCard.svelte

diff --git a/src/lib/shared/ui/components/cards/StatsCard.svelte b/src/lib/shared/ui/components/cards/StatsCard.svelte
new file mode 100644
index 0000000..0b1c330
--- /dev/null
+++ b/src/lib/shared/ui/components/cards/StatsCard.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	// core components
+
+	export let statSubtitle = 'Traffic';
+	export let statTitle = '350,897';
+	// The value must match one of these strings
+	// "up" or "down"
+	export let statArrow = 'up';
+	export let statPercent = '3.48';
+	// can be any of the text color utilities
+	// from tailwindcss
+	export let statPercentColor = 'text-emerald-500';
+	export let statDescripiron = 'Since last month';
+	export let statIconName = 'far fa-chart-bar';
+	// can be any of the background color utilities
+	// from tailwindcss
+	export let statIconColor = 'bg-red-500';
+</script>
+
+<div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow">
+	<div class="flex-auto p-4">
+		<div class="flex flex-wrap">
+			<div class="relative w-full pr-4 max-w-full flex-grow flex-1">
+				<h5 class="text-gray-400 uppercase font-bold text-xs">
+					{statSubtitle}
+				</h5>
+				<span class="font-semibold text-xl text-gray-700">
+					{statTitle}
+				</span>
+			</div>
+			<div class="relative w-auto pl-4 flex-initial">
+				<div
+					class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow rounded-full {statIconColor}"
+				>
+					<i class="{statIconName}"></i>
+				</div>
+			</div>
+		</div>
+		<p class="text-sm text-gray-400 mt-4">
+			<span class="mr-2 {statPercentColor}">
+				<i class="{statArrow === 'up' ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
+				{statPercent}%
+			</span>
+			<span class="whitespace-nowrap">{statDescripiron}</span>
+		</p>
+	</div>
+</div>