UI: update preview images

apps/docs/app/(home)/page.client.tsx

@@ -17,6 +17,7 @@ import { buttonVariants } from '@/components/ui/button';
 import Image from 'next/image';
 import MainImg from './main.png';
 import OpenAPIImg from './openapi.png';
+import NotebookImg from './notebook.png';
 import { cva } from 'class-variance-authority';
 
 export function CreateAppAnimation() {
@@ -294,7 +295,7 @@ function WhyPanel(props: HTMLProps<HTMLDivElement>) {
 }
 
 const previewButtonVariants = cva(
-  'w-20 h-9 text-sm font-medium transition-colors rounded-full',
+  'w-22 h-9 text-sm font-medium transition-colors rounded-full',
   {
     variants: {
       active: {
@@ -306,50 +307,53 @@ const previewButtonVariants = cva(
 );
 export function PreviewImages() {
   const [active, setActive] = useState(0);
+  const previews = [
+    {
+      image: MainImg,
+      name: 'Docs',
+    },
+    {
+      image: NotebookImg,
+      name: 'Notebook',
+    },
+    {
+      image: OpenAPIImg,
+      name: 'OpenAPI',
+    },
+  ];
 
   return (
     <div className="mt-12 min-w-[800px] overflow-hidden xl:-mx-12 dark:[mask-image:linear-gradient(to_top,transparent,white_40px)]">
       <div className="absolute flex flex-row left-1/2 -translate-1/2 bottom-4 z-2 p-1 rounded-full bg-fd-card border shadow-xl dark:shadow-fd-background">
         <div
           role="none"
-          className="absolute bg-fd-primary rounded-full w-20 h-9 transition-transform z-[-1]"
+          className="absolute bg-fd-primary rounded-full w-22 h-9 transition-transform z-[-1]"
           style={{
-            transform: `translateX(calc(var(--spacing) * 20 * ${active}))`,
+            transform: `translateX(calc(var(--spacing) * 22 * ${active}))`,
           }}
         />
-        <button
-          className={cn(previewButtonVariants({ active: active === 0 }))}
-          onClick={() => setActive(0)}
-        >
-          Docs
-        </button>
-        <button
-          className={cn(previewButtonVariants({ active: active === 1 }))}
-          onClick={() => setActive(1)}
-        >
-          OpenAPI
-        </button>
+        {previews.map((item, i) => (
+          <button
+            key={i}
+            className={cn(previewButtonVariants({ active: active === i }))}
+            onClick={() => setActive(i)}
+          >
+            {item.name}
+          </button>
+        ))}
       </div>
-      <Image
-        src={MainImg}
-        alt="preview"
-        priority
-        className={cn(
-          'w-full select-none duration-1000 animate-in fade-in -mb-60 slide-in-from-bottom-12 lg:-mb-40',
-          active !== 0 && 'hidden',
-        )}
-      />
-      {active === 1 && (
+      {previews.map((item, i) => (
         <Image
-          src={OpenAPIImg}
+          key={i}
+          src={item.image}
           alt="preview"
           priority
           className={cn(
             'w-full select-none duration-1000 animate-in fade-in -mb-60 slide-in-from-bottom-12 lg:-mb-40',
-            active !== 1 && 'hidden',
+            active !== i && 'hidden',
           )}
         />
-      )}
+      ))}
     </div>
   );
 }

packages/ui/src/layouts/docs/index.tsx

@@ -281,7 +281,7 @@ export function DocsLayout({
         <LayoutBody
           {...props.containerProps}
           className={cn(
-            'xl:[--fd-toc-width:286px]',
+            'md:[&_#nd-page_article]:pt-12 xl:[--fd-toc-width:286px] xl:[&_#nd-page_article]:px-8',
             sidebarEnabled && sidebarVariables,
             !nav.component &&
               nav.enabled !== false &&

packages/ui/src/layouts/docs/page.tsx

@@ -70,7 +70,7 @@ export function PageArticle(props: ComponentProps<'article'>) {
     <article
       {...props}
       className={cn(
-        'flex min-w-0 w-full flex-col gap-4 px-4 pt-8 md:px-6 md:mx-auto 2xl:pt-12 2xl:px-12',
+        'flex min-w-0 w-full flex-col gap-4 pt-8 px-4 md:px-6 md:mx-auto',
         props.className,
       )}
     >

packages/ui/src/layouts/notebook/client.tsx

@@ -131,6 +131,7 @@ function LayoutTab({
     <Link
       className={cn(
         'inline-flex border-b border-transparent transition-colors items-center py-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap',
+        option.unlisted && !selected && 'hidden',
         selected && 'border-fd-primary text-fd-primary',
       )}
       href={option.url}