From 2d6ce654f4161242256da88c7c2548ffb8222c23 Mon Sep 17 00:00:00 2001
From: Sumit Kolhe <35036894+sumitkolhe@users.noreply.github.com>
Date: Sat, 27 May 2023 01:50:34 +0530
Subject: [PATCH] docs: add close button to Slideover example (#211)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../content/examples/SlideoverExample.vue     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/components/content/examples/SlideoverExample.vue b/docs/components/content/examples/SlideoverExample.vue
index 73c34998..6d154e5c 100644
--- a/docs/components/content/examples/SlideoverExample.vue
+++ b/docs/components/content/examples/SlideoverExample.vue
@@ -7,8 +7,23 @@ const isOpen = ref(false)
     <UButton label="Open" @click="isOpen = true" />
 
     <USlideover v-model="isOpen">
-      <div class="p-4 h-full">
-        <Placeholder class="w-full h-full" />
+      <div class="p-4 sm:p-6 flex flex-col flex-1 gap-4 sm:gap-6">
+        <div class="flex items-center justify-between">
+          <h2 class="font-semibold text-gray-900 dark:text-white">
+            Title
+          </h2>
+
+          <UButton
+            icon="i-heroicons-x-mark-20-solid"
+            color="gray"
+            variant="link"
+            size="md"
+            :padded="false"
+            @click="isOpen = false"
+          />
+        </div>
+
+        <Placeholder class="flex-1 w-full" />
       </div>
     </USlideover>
   </div>