Card elemenets for displaying alerts of different types

src/lib/components/Card.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { modal } from '$lib/store';
+
+	export let title = '';
+	export let iconBackground = 'var(--background)';
+
+	export let opens: any = null;
+	export let data: any = {};
+	export let borderLess = false;
+
+	function openModal() {
+		if (opens) {
+			$modal = { opens, data };
+		}
+	}
+</script>
+
+<div
+	class={`card ${borderLess ? 'border-less' : ''}`}
+	on:click={openModal}
+	on:keyup={(e) => e?.code === 'Enter' && openModal()}
+	role="button"
+	tabindex="0"
+>
+	<div class="hive-icon" style={`background-color: ${iconBackground}`}>
+		<div class="img">
+			<slot name="logo" />
+		</div>
+	</div>
+
+	<div class="details">
+		<div class="top-row">
+			<h2>{title}</h2>
+		</div>
+		<div class="bottom-row">
+			<div class="metric">
+				<div class="icon">
+					<slot name="first-icon" />
+				</div>
+
+				<span class="value"><slot name="first-value" /></span>
+			</div>
+
+			<div class="metric">
+				<div class="icon">
+					<slot name="second-icon" />
+				</div>
+
+				<span class="value"><slot name="second-value" /></span>
+			</div>
+
+			<div class="metric">
+				<div class="icon">
+					<slot name="third-icon" />
+				</div>
+
+				<span class="value"><slot name="third-value" /></span>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.card {
+		display: flex;
+		align-items: center;
+		color: var(--color);
+		background-color: var(--highlight);
+		border-radius: 1rem;
+		padding: 0.75rem 1rem;
+		cursor: pointer;
+		will-change: filter;
+		transition: filter 250ms ease;
+		margin-bottom: 1rem;
+
+		&:hover {
+			filter: drop-shadow(0 0 2px #646cffaa);
+		}
+
+		&.border-less {
+			padding-left: 0;
+			padding-right: 0;
+			background-color: var(--background);
+			filter: none !important;
+			cursor: auto;
+			margin-bottom: 0;
+		}
+
+		.hive-icon {
+			background-color: var(--background);
+			display: grid;
+			place-items: center;
+			min-height: 50px;
+			min-width: 50px;
+			max-height: 50px;
+			max-width: 50px;
+			border-radius: 1rem;
+			margin-right: 1rem;
+
+			.img {
+				height: 30px;
+				width: 30px;
+			}
+		}
+
+		.details {
+			width: 100%;
+		}
+
+		.top-row h2 {
+			margin: 0 0 0.2rem 0;
+			text-align: left;
+			font-size: 1.1rem;
+			text-transform: capitalize;
+		}
+
+		.bottom-row {
+			display: flex;
+			justify-content: space-between;
+
+			.metric {
+				display: flex;
+				align-items: center;
+			}
+
+			.metric span {
+				font-size: 0.9rem;
+			}
+
+			.metric .icon {
+				max-width: 22px;
+				height: 22px;
+				margin-right: 0.25rem;
+			}
+		}
+	}
+
+	:global(.metric .icon svg) {
+	}
+</style>

src/lib/components/cards/HighTemperature.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Card from "../Card.svelte";
+  import ThermometerHotIcon from "$lib/icons/thermometerHot.svelte";
+
+    export let temperature: string | number;
+    export let borderLess: boolean = false;
+</script>
+
+<Card title="High temperature" iconBackground="#F93131" {borderLess}>
+  <ThermometerHotIcon slot="logo" fill="var(--highlight)" />
+
+  <span slot="first-value">Over: { temperature }°C</span>
+</Card>
+

src/lib/components/cards/LowBattery.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import Card from "../Card.svelte";
+    import BatteryLowIcon from "$lib/icons/batteryLow.svelte";
+
+    export let battery: number | string;
+    export let borderLess: boolean = false;
+</script>
+
+<!-- <Card title="Low battery" iconBackground="#FF6B00" {borderLess}> -->
+<Card title="Low battery" iconBackground="#58C73A" {borderLess}>
+  <BatteryLowIcon slot="logo" fill="var(--highlight)" />
+
+  <span slot="first-value">Under: { battery }%</span>
+</Card>
+

src/lib/components/cards/LowTemperature.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Card from "../Card.svelte";
+    import ThermometerColdIcon from "$lib/icons/thermometerCold.svelte";
+
+    export let temperature: number | string;
+    export let borderLess: boolean = false;
+</script>
+
+<Card title="low temperature" iconBackground="#05B4EC" {borderLess}>
+  <ThermometerColdIcon slot="logo" fill="var(--highlight)" />
+
+  <span slot="first-value">Under: { temperature }°C</span>
+</Card>
+

src/lib/components/cards/NoData.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Card from "../Card.svelte";
+    import NetworkDisconnectedIcon from "$lib/icons/networkDisconnected.svelte";
+
+    export let time: String | Number;
+    export let borderLess: boolean = false;
+</script>
+
+<Card title="no data" iconBackground="#ECECEC" {borderLess}>
+  <NetworkDisconnectedIcon slot="logo" fill="#213547" />
+
+  <span slot="first-value">More than: { time } hours</span>
+</Card>
+

src/lib/components/cards/WeightChanged.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import Card from "../Card.svelte";
+    import WeightIcon from "$lib/icons/weight.svelte";
+
+    export let from: string | number;
+    export let to: string | number;
+    export let borderLess: boolean = false;
+</script>
+
+<Card title="Weight changed" iconBackground="#F6B138" {borderLess}>
+  <WeightIcon slot="logo" fill="var(--highlight)" />
+
+  <span slot="first-value">From { from }kg to { to }kg</span>
+</Card>
+