From fe580cfdcd8e8ed243b0b5251c5f39d2c04ea07e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Jun 2022 10:31:26 +0200
Subject: [PATCH] feat: create box & cardGrid component

---
 src/lib/components/box.svelte      |  9 +++++++++
 src/lib/components/cardGrid.svelte | 17 +++++++++++++++++
 src/lib/components/index.ts        |  2 ++
 3 files changed, 28 insertions(+)
 create mode 100644 src/lib/components/box.svelte
 create mode 100644 src/lib/components/cardGrid.svelte

diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
new file mode 100644
index 000000000..c16d116ea
--- /dev/null
+++ b/src/lib/components/box.svelte
@@ -0,0 +1,9 @@
+<div class="box">
+    <div class="u-flex u-gap-16">
+        <slot name="image" />
+        <div class="u-cross-child-center u-line-height-1-5">
+            <slot name="title" />
+            <slot />
+        </div>
+    </div>
+</div>
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
new file mode 100644
index 000000000..04e3a561a
--- /dev/null
+++ b/src/lib/components/cardGrid.svelte
@@ -0,0 +1,17 @@
+<script>
+    import { Card } from './';
+</script>
+
+<Card>
+    <div class="common-section grid-1-2">
+        <div class="grid-1-2-col-1">
+            <slot name="left" />
+        </div>
+        <div class="grid-1-2-col-2">
+            <slot name="right" />
+        </div>
+    </div>
+    <div class="common-section card-separator u-flex u-main-end">
+        <slot name="actions" />
+    </div>
+</Card>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 2407a4d88..b1ecf9f35 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,6 +1,7 @@
 export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
 export { default as Card } from './card.svelte';
+export { default as CardGrid } from './cardGrid.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
 export { default as Back } from './back.svelte';
@@ -20,3 +21,4 @@ export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';
 export { default as SwitchBoxes } from './switchBoxes.svelte';
 export { default as Alert } from './alert.svelte';
+export { default as Box } from './box.svelte';