feat: improve breadcrumb demos

shuriken-ui · Dec 10, 2023 · 3761835 · 3761835
1 parent 2291f6b
commit 3761835
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/src/plugins/components/breadcrumb/breadcrumb.doc.mdx b/src/plugins/components/breadcrumb/breadcrumb.doc.mdx
@@ -22,7 +22,8 @@ Breadcrumbs allow you to quickly identify the path to the current web page.
 
 Breadcrumbs can have different separators. Below is an example of the dot separator.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex flex-col gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <div className="h-4"></div>
   <Story of={BreadcrumbStories.SeparatorDot} />
 </div>
 
@@ -32,7 +33,8 @@ Breadcrumbs can have different separators. Below is an example of the dot separa
 
 Breadcrumbs can have different separators. Below is an example of the slash separator.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex flex-col gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <div className="h-4"></div>
   <Story of={BreadcrumbStories.SeparatorSlash} />
 </div>
 
@@ -42,7 +44,8 @@ Breadcrumbs can have different separators. Below is an example of the slash sepa
 
 Breadcrumbs can have different separators. Below is an example of the chevron separator.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex flex-col gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <div className="h-4"></div>
   <Story of={BreadcrumbStories.SeparatorChevron} />
 </div>
 
@@ -52,7 +55,8 @@ Breadcrumbs can have different separators. Below is an example of the chevron se
 
 Breadcrumbs can have different separators. Below is an example of the arrow separator.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex flex-col gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <div className="h-4"></div>
   <Story of={BreadcrumbStories.SeparatorArrow} />
 </div>