From 2aeff71af3b7f96b092f965bb388a176da93fbcd Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Sun, 20 Aug 2023 16:40:14 +0200
Subject: [PATCH] feat: box component

---
 src/lib/components/box.svelte             | 20 ++++++++++++++++++++
 src/lib/pages/domains/wizard/retry.svelte |  5 +++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
index e69de29bb..272377152 100644
--- a/src/lib/components/box.svelte
+++ b/src/lib/components/box.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    export let radius: keyof typeof radiuses = 'small';
+    export let padding = 24;
+    let classes: string = '';
+    export { classes as class };
+
+    enum radiuses {
+        xsmall = '--border-radius-extra-large',
+        small = '--border-radius-small',
+        medium = '--border-radius-medium',
+        large = '--border-radius-large'
+    }
+</script>
+
+<div
+    class="box {classes}"
+    style:--box-border-radius={`var(${radiuses[radius]})`}
+    style:--box-padding={`${padding / 16}rem`}>
+    <slot />
+</div>
diff --git a/src/lib/pages/domains/wizard/retry.svelte b/src/lib/pages/domains/wizard/retry.svelte
index f8c1cb30d..e119d5d98 100644
--- a/src/lib/pages/domains/wizard/retry.svelte
+++ b/src/lib/pages/domains/wizard/retry.svelte
@@ -4,6 +4,7 @@
     import { domain } from './store';
     import CnameTable from './cnameTable.svelte';
     import { createEventDispatcher } from 'svelte';
+    import { Box } from '$lib/components';
 
     let retrying = false;
 
@@ -21,7 +22,7 @@
     }
 </script>
 
-<div class="box">
+<Box radius="small">
     <div class="u-flex u-gap-8 u-cross-center">
         <span
             class="icon-exclamation-circle"
@@ -46,4 +47,4 @@
     <div class="u-margin-block-start-24">
         <CnameTable />
     </div>
-</div>
+</Box>