update component preview layout

Author: mehdibha

www/content/docs/components/buttons/button.mdx

@@ -12,7 +12,10 @@ links:
     href: https://github.com/mehdibha/dotUI/tree/main/content/components/buttons/button.mdx?plain=1
 ---
 
-<ComponentPreview name="button/default" preview={`<Button>button</Button>`} />
+<ComponentPreview
+  name="button/default"
+  preview={`<Button>button</Button>`}
+/>
 
 ## Installation
 

www/public/og.jpg

@@ -80,9 +80,9 @@ const CodeBlockClient = ({
         <div className="flex items-center gap-2">
           {(preview || expandable) && (
             <Button
-              variant="default"
+              variant="outline"
               size="sm"
-              className="h-7 text-xs"
+              className="bg-bg-inverse/5 h-7 text-xs"
               onPress={handleExpand}
             >
               {isExpanded ? "Collapse" : "Expand"} code
@@ -152,9 +152,9 @@ const CodeBlockCopyButton = ({ code, ...props }: CodeBlockCopyButtonProps) => {
     <Button
       size="sm"
       shape="square"
-      variant="default"
+      variant="outline"
       onPress={handleCopy}
-      className="size-7 [&_svg]:size-3"
+      className="bg-bg-inverse/5 size-7 [&_svg]:size-3"
       {...props}
     >
       {copied ? (

www/src/components/docs/code-block-client.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { ScrollArea } from "@radix-ui/react-scroll-area";
-import { PaintBucket } from "lucide-react";
+import {
+  PaintBucket,
+  Settings2Icon,
+  SlidersHorizontalIcon,
+} from "lucide-react";
 import { getFileSource } from "@/lib/get-file-source";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/core/button";
@@ -25,6 +29,7 @@ export interface ComponentPreviewProps {
   fullWidth?: boolean;
   resizable?: boolean;
   suspense?: boolean;
+  primary?: boolean;
 }
 
 export const ComponentPreview = async ({
@@ -35,6 +40,7 @@ export const ComponentPreview = async ({
   fullWidth = false,
   resizable = false,
   suspense = false,
+  primary = false,
 }: ComponentPreviewProps) => {
   const demoItem = Index[name];
 
@@ -55,33 +61,49 @@ export const ComponentPreview = async ({
     <div
       className={cn("overflow-hidden rounded-md border", containerClassName)}
     >
+      {/* <div className="bg-bg-muted flex items-center justify-between rounded-t-[inherit] border-b p-2">
+        <StyleSwitcher
+          // @ts-expect-error TODO fix later
+          componentName={getComponentName(name)}
+          variant="outline"
+          className="bg-bg-inverse/5 h-7 text-xs font-normal"
+        />
+        <ThemeCustomizerDialog>
+          <Tooltip
+            content={
+              <span>
+                <span className="text-fg-muted">Theme:</span> dotUI
+              </span>
+            }
+          >
+            <Button
+              variant="outline"
+              shape="square"
+              size="sm"
+              className="bg-bg-inverse/5 size-7 text-sm font-normal"
+            >
+              <PaintBucket />
+            </Button>
+          </Tooltip>
+        </ThemeCustomizerDialog>
+      </div> */}
       <div className="bg-bg-muted">
         <ResizableContainer resizable={resizable}>
           <Loader>
             <ThemeOverride className="relative duration-300">
-              {/* @ts-expect-error fix later */}
-              <StyleSwitcher componentName={getComponentName(name)} />
-              <ThemeCustomizerDialog>
-                <Tooltip
-                  content={
-                    <span>
-                      <span className="text-fg-muted">Theme:</span> dotUI
-                    </span>
-                  }
-                >
-                  <Button
-                    shape="square"
-                    size="sm"
-                    className="border-border absolute right-2 top-2 z-10 font-normal"
-                  >
-                    <PaintBucket />
-                  </Button>
-                </Tooltip>
-              </ThemeCustomizerDialog>
+              <Button
+                variant="quiet"
+                shape="square"
+                size="sm"
+                className="absolute right-2 top-2 z-10"
+              >
+                <SlidersHorizontalIcon />
+              </Button>
               <ScrollArea className="bg-bg text-fg">
                 <div
                   className={cn(
-                    "flex min-h-52 py-20",
+                    "flex py-10",
+                    primary && "min-h-48 py-20",
                     fullWidth
                       ? "px-8 lg:px-12"
                       : "flex items-center justify-center px-4"

www/src/components/docs/component-preview.tsx

@@ -4,13 +4,18 @@ import React from "react";
 import { ChevronDownIcon } from "lucide-react";
 import { useComponentsVariants } from "@/lib/create-dynamic-component";
 import { useThemes } from "@/hooks/use-themes";
-import { Button } from "@/components/core/button";
+import { Button, ButtonProps } from "@/components/core/button";
 import { ListBox, ListBoxItem } from "@/components/core/list-box";
 import { Popover } from "@/components/core/popover";
 import { SelectRoot, SelectValue } from "@/components/core/select";
 import { core } from "@/registry/registry-core";
 
-export function StyleSwitcher({ componentName }: { componentName: string }) {
+export function StyleSwitcher({
+  componentName,
+  ...props
+}: {
+  componentName: string;
+} & ButtonProps) {
   const primitiveInfo = getPrimitiveInfo(componentName);
   const { variants: contextVariants, setVariants } = useComponentsVariants();
   const { currentTheme } = useThemes();
@@ -35,11 +40,7 @@ export function StyleSwitcher({ componentName }: { componentName: string }) {
       }}
       className="w-auto"
     >
-      <Button
-        size="sm"
-        suffix={<ChevronDownIcon />}
-        className="border-border absolute left-2 top-2 z-10 text-xs font-normal"
-      >
+      <Button size="sm" suffix={<ChevronDownIcon />} {...props}>
         <span className="font-bold">{primitiveName}:</span> <SelectValue />
       </Button>
       <Popover>

www/src/components/docs/style-switcher.tsx

@@ -85,14 +85,6 @@ const Logo = () => {
       href="/"
       className="flex items-center gap-2 rounded opacity-100 transition-[opacity,transform] duration-300 ease-out"
     >
-      {/* <Avatar
-        src={siteConfig.global.logo}
-        alt={siteConfig.global.name}
-        width={24}
-        height={24}
-        loading="lazy"
-        className="m-1 size-6 rounded-sm"
-      /> */}
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width={20}

www/src/components/header.tsx

@@ -61,7 +61,7 @@ export const MobileNav = ({
                       <div className="font-josefin group-data-collapsed/sidebar:opacity-0 mt-[5px] font-bold leading-normal tracking-tighter transition-colors">
                         {siteConfig.global.name}
                       </div>
-                    </Link>
+                      </Link>
                     <Button size="sm" shape="square" onPress={close}>
                       <PanelLeftCloseIcon />
                     </Button>