refactor(route): Use flowbite-react components in Sidebar example

themesberg · May 2, 2022 · d96fe4e · d96fe4e
1 parent b8d5ff2
commit d96fe4e
Showing 1 changed file with 6 additions and 9 deletions.
diff --git a/src/docs/pages/SidebarPage.tsx b/src/docs/pages/SidebarPage.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { BiBuoy } from 'react-icons/bi';
 import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
-import { Sidebar } from '../components';
+import { Sidebar, Badge, Button } from '../../lib';
 import { CodeExample, DemoPage } from './DemoPage';
 
 const SidebarPage: FC = () => {
@@ -144,14 +144,11 @@ const SidebarPage: FC = () => {
           </Sidebar.Items>
           <Sidebar.CTA>
             <div className="mb-3 flex items-center">
-              <span className="mr-2 rounded bg-orange-100 px-2.5 py-0.5 text-sm font-semibold text-orange-800 dark:bg-orange-200 dark:text-orange-900">
-                Beta
-              </span>
-              <button
-                type="button"
-                className="-mx-1.5 -my-1.5 ml-auto inline-flex h-6 w-6 rounded-lg bg-blue-50 p-1 text-blue-900 hover:bg-blue-200 focus:ring-2 focus:ring-blue-400 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
-                data-collapse-toggle="dropdown-cta"
+              <Badge color="yellow">Beta</Badge>
+              <Button
                 aria-label="Close"
+                className="-mx-1.5 -my-1.5 ml-auto !h-6 !w-6 bg-transparent !p-1 text-blue-900 hover:bg-blue-200"
+                data-collapse-toggle="dropdown-cta"
               >
                 <span className="sr-only">Close</span>
                 <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -161,7 +158,7 @@ const SidebarPage: FC = () => {
                     clipRule="evenodd"
                   ></path>
                 </svg>
-              </button>
+              </Button>
             </div>
             <p className="mb-3 text-sm text-blue-900 dark:text-blue-400">
               Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in