feat: playground update layout

Author: Ohh-889

playground/src/app/layout.tsx

@@ -1,7 +1,11 @@
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import '../css/globals.css';
-import { Card, Sonner } from 'soybean-react-ui';
+import Link from 'next/link';
+import { ButtonIcon, Card, Icon, Popover, Sonner } from 'soybean-react-ui';
+
+import ThemeCustomize from '../components/ThemeCustomize';
+import config from '../config';
 
 const geistSans = Geist({
   subsets: ['latin'],
@@ -34,6 +38,36 @@ export default async function RootLayout({
             flexHeight
             className="h-full max-sm:h-auto"
             title="Soybean UI Components"
+            extra={
+              <div className="flex items-center gap-3">
+                <Popover
+                  align="end"
+                  classNames={{ content: 'z-15' }}
+                  side="bottom"
+                  trigger={
+                    <ButtonIcon
+                      icon="lucide:swatch-book"
+                      size="lg"
+                    />
+                  }
+                >
+                  <ThemeCustomize />
+                </Popover>
+
+                <ButtonIcon
+                  asChild
+                  size="lg"
+                >
+                  <Link
+                    href={config.githubUrl}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <Icon icon="lucide:github" />
+                  </Link>
+                </ButtonIcon>
+              </div>
+            }
           >
             {children}
           </Card>