gladvn 0.2.32 → 0.2.34

package/src/dev/App.tsx

@@ -1,4 +1,5 @@
-import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import { cn } from "../lib/utils";
+import React, { Suspense, lazy, useCallback, useEffect, useState, useMemo } from "react";
 
 import {
   LayersIcon,
@@ -42,7 +43,7 @@ const groupedComponents = COMPONENTS.reduce(
   {} as Record<string, (typeof COMPONENTS)[number][]>,
 );
 
-const categoryOrder = [
+const componentCategories = [
   "Layout & Structure",
   "Forms & Inputs",
   "Feedback & Overlays",
@@ -51,6 +52,12 @@ const categoryOrder = [
   "Other",
 ];
 
+const blockCategories = [
+  "Dashboards",
+  "Settings",
+  "Authentication",
+];
+
 function ComponentViewer({ id }: { id: string }) {
   const compDef = COMPONENTS.find((c) => c.id === id);
   if (!compDef) return null;
@@ -70,7 +77,24 @@ function ComponentViewer({ id }: { id: string }) {
   );
 }
 
+function PreviewViewer({ blockId }: { blockId: string }) {
+  const Block = useMemo(() => lazy(() => import(`../blocks/${blockId}.tsx`)), [blockId]);
+
+  return (
+    <Suspense fallback={<div className="p-12 text-center text-muted-foreground animate-pulse">Loading preview...</div>}>
+      <div className="w-full min-h-screen bg-background antialiased">
+        <Block />
+      </div>
+    </Suspense>
+  );
+}
+
 export default function App() {
+  if (typeof window !== "undefined" && window.location.pathname.startsWith("/preview/")) {
+    const blockId = window.location.pathname.replace(/^\/preview\//, "");
+    return <PreviewViewer blockId={blockId} />;
+  }
+
   const theme = useTheme();
   const { size, setSize } = useDevContext();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -90,6 +114,8 @@ export default function App() {
     return "overview";
   });
 
+  const activeComponent = useMemo(() => COMPONENTS.find((c) => c.id === active), [active]);
+
   const setActive = useCallback((id: string) => {
     setActiveState(id);
     setIsMobileMenuOpen(false);
@@ -99,13 +125,7 @@ export default function App() {
       url.searchParams.delete("component");
       url.pathname = id === "overview" ? "/" : `/${id}`;
       window.history.pushState({}, "", url);
-
-      setTimeout(() => {
-        const el = document.getElementById(id);
-        if (el) {
-          el.scrollIntoView({ behavior: "smooth" });
-        }
-      }, 50);
+      window.scrollTo({ top: 0, behavior: "smooth" });
     }
   }, []);
 
@@ -114,12 +134,9 @@ export default function App() {
       const params = new URLSearchParams(window.location.search);
       const queryComp = params.get("component");
       const comp = queryComp || window.location.pathname.replace(/^\/+/, "");
-      
+
       if (comp && comp !== "overview") {
-        setTimeout(() => {
-          const el = document.getElementById(comp);
-          if (el) el.scrollIntoView({ behavior: "smooth" });
-        }, 100);
+        window.scrollTo({ top: 0, behavior: "smooth" });
       }
     }
   }, []);
@@ -130,8 +147,7 @@ export default function App() {
       const queryComp = params.get("component");
       const comp = queryComp || window.location.pathname.replace(/^\/+/, "") || "overview";
       setActiveState(comp);
-      const el = document.getElementById(comp);
-      if (el) el.scrollIntoView({ behavior: "smooth" });
+      window.scrollTo({ top: 0, behavior: "smooth" });
     };
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
@@ -166,9 +182,8 @@ export default function App() {
       if (active === "overview") {
         document.title = "gladvn — Tailwind CSS React Components";
       } else {
-        const compDef = COMPONENTS.find((c) => c.id === active);
-        if (compDef) {
-          document.title = `${compDef.label} — gladvn Components`;
+        if (activeComponent) {
+          document.title = `${activeComponent.label} — gladvn Components`;
         }
       }
     }
@@ -178,7 +193,7 @@ export default function App() {
     <div className="min-h-screen bg-background text-foreground">
       {/* Top nav */}
       <header className="sticky top-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-md">
-        <div className="mx-auto flex h-16 max-w-[1440px] items-center justify-between px-6">
+        <div className="mx-auto flex h-16 max-w-[1440px] items-center justify-between px-4 md:px-6">
           {/* Left — Logo + version */}
           <div className="flex items-center gap-3">
             <button
@@ -200,21 +215,70 @@ export default function App() {
             </a>
           </div>
 
-          {/* Center — Search bar (opens Command Palette) */}
-          <button
-            id="cmd-search-trigger"
-            onClick={() => setCmdOpen(true)}
-            className="hidden md:flex h-9 items-center gap-2.5 px-4 rounded-lg border border-border bg-muted/30 text-sm text-muted-foreground hover:bg-muted/60 transition-colors w-64 xl:w-80"
-            aria-label="Tìm component (⌘K)"
-          >
-            <SearchIcon className="size-3.5 shrink-0" />
-            <span className="flex-1 text-left text-[13px]">
-              Tìm component...
-            </span>
-            <kbd className="text-[10px] bg-background border border-border/80 rounded px-1.5 py-0.5 font-sans leading-none">
-              ⌘K
-            </kbd>
-          </button>
+          {/* Center — Navigation Tabs & Search */}
+          <div className="flex-1 justify-center gap-6 hidden md:flex items-center mx-4">
+            <button
+              onClick={() => setActive("overview")}
+              className={cn(
+                "text-[14px] font-medium transition-colors",
+                {
+                  "text-foreground": active === "overview",
+                  "text-muted-foreground hover:text-foreground": !(active === "overview")
+                }
+              )}
+            >
+              Overview
+            </button>
+            <button
+              onClick={() => {
+                if (active === "overview" || blockCategories.includes(activeComponent?.category || "")) {
+                  setActive("accordion");
+                }
+              }}
+              className={cn(
+                "text-[14px] font-medium transition-colors",
+                {
+                  "text-foreground": active !== "overview" && !blockCategories.includes(activeComponent?.category || ""),
+                  "text-muted-foreground hover:text-foreground": !(active !== "overview" && !blockCategories.includes(activeComponent?.category || ""))
+                }
+              )}
+            >
+              Components
+            </button>
+            <button
+              onClick={() => {
+                if (!blockCategories.includes(activeComponent?.category || "")) {
+                  setActive("dashboard-block");
+                }
+              }}
+              className={cn(
+                "text-[14px] font-medium transition-colors",
+                {
+                  "text-foreground": blockCategories.includes(activeComponent?.category || ""),
+                  "text-muted-foreground hover:text-foreground": !(blockCategories.includes(activeComponent?.category || ""))
+                }
+              )}
+            >
+              Blocks
+            </button>
+
+            <div className="mx-2 h-4 w-px bg-border/50"></div>
+
+            <button
+              id="cmd-search-trigger"
+              onClick={() => setCmdOpen(true)}
+              className="flex h-8 items-center gap-2 px-3 rounded-md border border-border bg-muted/30 text-[13px] text-muted-foreground hover:bg-muted/60 transition-colors w-56"
+              aria-label="Tìm component (⌘K)"
+            >
+              <SearchIcon className="size-3.5 shrink-0" />
+              <span className="flex-1 text-left">
+                Search...
+              </span>
+              <kbd className="text-[10px] bg-background border border-border/80 rounded px-1.5 py-0.5 font-sans leading-none">
+                ⌘K
+              </kbd>
+            </button>
+          </div>
 
           {/* Right — GitHub + npx + theme toggle */}
           <div className="flex items-center gap-1.5">
@@ -276,56 +340,112 @@ export default function App() {
 
         {/* Sidebar */}
         <aside
-          className={`fixed inset-y-0 left-0 z-50 w-64 transform border-r bg-background border-border pt-4 px-3 transition-transform duration-200 ease-in-out md:sticky md:top-16 md:block md:h-[calc(100vh-4rem)] md:w-56 md:translate-x-0 md:pt-6 md:z-0 overflow-y-auto custom-scrollbar ${
-            isMobileMenuOpen ? "translate-x-0 shadow-2xl" : "-translate-x-full"
-          }`}
+          className={cn(
+            "fixed inset-y-0 left-0 z-50 w-64 transform border-r bg-background border-border pt-4 px-3 transition-transform duration-200 ease-in-out md:sticky md:top-16 md:h-[calc(100vh-4rem)] md:w-56 md:translate-x-0 md:pt-6 md:z-0 overflow-y-auto custom-scrollbar",
+            {
+              "translate-x-0 shadow-2xl": isMobileMenuOpen,
+              "-translate-x-full": !isMobileMenuOpen,
+              "md:hidden": active === "overview",
+              "md:block": active !== "overview"
+            }
+          )}
         >
-          <nav className="space-y-0.5">
+          <nav className="space-y-0.5 md:hidden">
             <button
               onClick={() => setActive("overview")}
-              className={`w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left mb-2 ${
-                active === "overview"
-                  ? "bg-accent text-accent-foreground font-medium"
-                  : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-              }`}
+              className={cn(
+                "w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left mb-2",
+                {
+                  "bg-accent text-accent-foreground font-medium": active === "overview",
+                  "text-muted-foreground hover:bg-muted/60 hover:text-foreground": !(active === "overview")
+                }
+              )}
             >
               <LayersIcon className="size-3.5" />
               Overview
             </button>
+            <div className="h-px bg-border/50 my-2 mx-1"></div>
+            <button
+              onClick={() => setActive("accordion")}
+              className={cn(
+                "w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left",
+                {
+                  "bg-accent text-accent-foreground font-medium": active !== "overview" && !blockCategories.includes(activeComponent?.category || ""),
+                  "text-muted-foreground hover:bg-muted/60 hover:text-foreground": !(active !== "overview" && !blockCategories.includes(activeComponent?.category || ""))
+                }
+              )}
+            >
+              Components
+            </button>
+            <button
+              onClick={() => setActive("dashboard-block")}
+              className={cn(
+                "w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left mb-2",
+                {
+                  "bg-accent text-accent-foreground font-medium": blockCategories.includes(activeComponent?.category || ""),
+                  "text-muted-foreground hover:bg-muted/60 hover:text-foreground": !(blockCategories.includes(activeComponent?.category || ""))
+                }
+              )}
+            >
+              Blocks
+            </button>
+            <div className="h-px bg-border/50 my-2 mx-1"></div>
           </nav>
 
           <div className="mt-6">
-            {categoryOrder.map((cat) => {
-              const comps = groupedComponents[cat];
-              if (!comps || comps.length === 0) return null;
-              return (
-                <div key={cat} className="mb-4">
-                  <p className="mb-2 px-2 text-[10px] font-bold uppercase tracking-wider text-foreground/70">
-                    {cat}
-                  </p>
-                  <nav className="space-y-0.5">
-                    {comps.map(({ id, label }) => (
-                      <button
-                        key={id}
-                        onClick={() => setActive(id)}
-                        className={`w-full flex items-center justify-between gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left ${
-                          active === id
-                            ? "bg-accent text-accent-foreground font-medium"
-                            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-                        }`}
-                      >
-                        <span>{label}</span>
-                      </button>
-                    ))}
-                  </nav>
-                </div>
-              );
-            })}
+            {blockCategories.includes(activeComponent?.category || "") ? (
+              <nav className="space-y-0.5">
+                {COMPONENTS.filter(c => blockCategories.includes(c.category)).map(({ id, label }) => (
+                  <button
+                    key={id}
+                    onClick={() => setActive(id)}
+                    className={cn(
+                      "w-full flex items-center justify-between gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left",
+                      {
+                        "bg-accent text-accent-foreground font-medium": active === id,
+                        "text-muted-foreground hover:bg-muted/60 hover:text-foreground": !(active === id)
+                      }
+                    )}
+                  >
+                    <span>{label}</span>
+                  </button>
+                ))}
+              </nav>
+            ) : (
+              componentCategories.map((cat) => {
+                const comps = groupedComponents[cat];
+                if (!comps || comps.length === 0) return null;
+                return (
+                  <div key={cat} className="mb-4">
+                    <p className="mb-2 px-2 text-[10px] font-bold uppercase tracking-wider text-foreground/70">
+                      {cat}
+                    </p>
+                    <nav className="space-y-0.5">
+                      {comps.map(({ id, label }) => (
+                        <button
+                          key={id}
+                          onClick={() => setActive(id)}
+                          className={cn(
+                            "w-full flex items-center justify-between gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left",
+                            {
+                              "bg-accent text-accent-foreground font-medium": active === id,
+                              "text-muted-foreground hover:bg-muted/60 hover:text-foreground": !(active === id)
+                            }
+                          )}
+                        >
+                          <span>{label}</span>
+                        </button>
+                      ))}
+                    </nav>
+                  </div>
+                );
+              })
+            )}
           </div>
         </aside>
 
         {/* Main */}
-        <main className="flex-1 min-w-0 px-6 py-8">
+        <main className="flex-1 min-w-0 px-3 md:px-6 py-6 md:py-8">
           <div className="pb-24">
             {active === "overview" && <OverviewSection />}
             {active !== "overview" && <ComponentViewer id={active} />}
@@ -334,7 +454,7 @@ export default function App() {
       </div>
 
       {/* Floating Size Toggle */}
-      {COMPONENTS.find((c) => c.id === active)?.hasSize && (
+      {activeComponent?.hasSize && (
         <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-1.5 items-end animate-in fade-in slide-in-from-bottom-4 duration-300">
           <div className="rounded-xl border border-border/50 bg-background/80 p-1 shadow-2xl backdrop-blur-xl">
             <SizeToggle value={size} onValueChange={setSize} />

package/src/dev/components/BlockViewer.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import { Maximize2Icon, MonitorIcon, SmartphoneIcon, TabletIcon } from "lucide-react";
+
+import { Button } from "../../components/micro/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/micro/tabs";
+import { SectionHeader } from "./showcase";
+import { CodeHighlighter } from "./code-highlighter";
+import { cn } from "../../lib/utils";
+
+export function BlockViewer({
+  blockId,
+  title,
+  description,
+  codeString,
+}: {
+  blockId: string;
+  title: string;
+  description?: string;
+  codeString: string;
+}) {
+  const [width, setWidth] = useState<"100%" | "768px" | "375px">("100%");
+  
+  return (
+    <div className="mb-12">
+      <SectionHeader title={title} description={description} />
+      
+      <Tabs defaultValue="preview" className="w-full relative group">
+        <div className="flex items-center justify-between mb-6 pb-4 border-b border-border/50">
+          <TabsList className="bg-muted/50 p-1 rounded-lg h-auto">
+            <TabsTrigger value="preview" className="data-[state=active]:bg-background data-[state=active]:shadow-sm border-transparent rounded-md h-7 px-3 text-xs">Preview</TabsTrigger>
+            <TabsTrigger value="code" className="data-[state=active]:bg-background data-[state=active]:shadow-sm border-transparent rounded-md h-7 px-3 text-xs">Code</TabsTrigger>
+          </TabsList>
+          
+          <div className="flex items-center gap-1.5 opacity-100 md:opacity-60 md:group-hover:opacity-100 transition-opacity">
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              onClick={() => setWidth("100%")}
+              className={cn("size-7", width === "100%" ? "bg-muted text-foreground" : "text-muted-foreground")}
+              aria-label="Desktop view"
+            >
+              <MonitorIcon className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              onClick={() => setWidth("768px")}
+              className={cn("size-7 hidden sm:flex", width === "768px" ? "bg-muted text-foreground" : "text-muted-foreground")}
+              aria-label="Tablet view"
+            >
+              <TabletIcon className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              onClick={() => setWidth("375px")}
+              className={cn("size-7", width === "375px" ? "bg-muted text-foreground" : "text-muted-foreground")}
+              aria-label="Mobile view"
+            >
+              <SmartphoneIcon className="size-3.5" />
+            </Button>
+            
+            <div className="w-px h-4 bg-border mx-1" />
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              render={<a href={`/preview/${blockId}`} target="_blank" rel="noreferrer" />}
+              nativeButton={false}
+              className="size-7 text-muted-foreground hover:text-foreground"
+              title="Open full screen"
+            >
+              <Maximize2Icon className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+
+        <TabsContent value="preview" className="mt-4">
+          <div className="flex justify-center w-full">
+            <div 
+              className="bg-background rounded-xl overflow-hidden border border-border shadow-sm transition-all duration-500 ease-in-out relative flex flex-col"
+              style={{ width, height: "750px", maxWidth: "100%" }}
+            >
+              <div className="h-10 border-b border-border bg-muted/30 flex items-center px-4 gap-2 shrink-0">
+                <div className="flex gap-1.5">
+                  <div className="size-2.5 rounded-full bg-border/80" />
+                  <div className="size-2.5 rounded-full bg-border/80" />
+                  <div className="size-2.5 rounded-full bg-border/80" />
+                </div>
+                <div className="flex-1 text-center text-[10px] text-muted-foreground/60 font-medium font-mono select-none">
+                  localhost:5173/preview/{blockId}
+                </div>
+              </div>
+              
+              <iframe 
+                src={`/preview/${blockId}`}
+                className="w-full flex-1 border-0"
+                title={`${title} Preview`}
+              />
+            </div>
+          </div>
+        </TabsContent>
+        
+        <TabsContent value="code" className="mt-4 relative group/code">
+          <div className="rounded-2xl border border-border overflow-hidden [&_.shiki]:!m-0 [&_.shiki]:!rounded-none [&_.shiki]:!p-6 [&_.shiki]:max-h-[750px] overflow-auto custom-scrollbar">
+            <CodeHighlighter code={codeString} />
+          </div>
+          <Button
+            size="sm"
+            iconOnly
+            variant="soft"
+            className="absolute top-4 right-4 z-10 bg-background/80 backdrop-blur-sm text-muted-foreground hover:text-foreground shadow-sm"
+            onClick={() => {
+              navigator.clipboard.writeText(codeString);
+              const el = document.getElementById(`copy-${blockId}`);
+              if (el) {
+                el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check size-4 text-green-500"><path d="M20 6 9 17l-5-5"/></svg>';
+                setTimeout(() => {
+                  el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy size-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
+                }, 2000);
+              }
+            }}
+          >
+            <span id={`copy-${blockId}`}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="lucide lucide-copy size-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+            </span>
+          </Button>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/dev/components/code-highlighter.tsx

@@ -59,10 +59,22 @@ export function CodeHighlighter({
   }
 
   return (
-    <div
-      ref={containerRef}
-      className="code-highlighter overflow-x-auto text-[13px] leading-relaxed"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <>
+      <style>{`
+        html.dark .shiki,
+        html.dark .shiki span {
+          color: var(--shiki-dark) !important;
+          background-color: var(--shiki-dark-bg) !important;
+          font-style: var(--shiki-dark-font-style) !important;
+          font-weight: var(--shiki-dark-font-weight) !important;
+          text-decoration: var(--shiki-dark-text-decoration) !important;
+        }
+      `}</style>
+      <div
+        ref={containerRef}
+        className="code-highlighter overflow-x-auto text-[13px] leading-relaxed"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </>
   );
 }

package/src/dev/data.ts

@@ -484,6 +484,46 @@ export const COMPONENTS = [
     status: "stable",
     hasSize: true,
   },
+  {
+    id: "dashboard-block",
+    category: "Dashboards",
+    label: "Dashboard",
+    hasMicro: false,
+    hasMacro: false,
+    status: "new",
+  },
+  {
+    id: "settings-block",
+    category: "Settings",
+    label: "Settings Layout",
+    hasMicro: false,
+    hasMacro: false,
+    status: "new",
+  },
+  {
+    id: "auth-form-block",
+    category: "Authentication",
+    label: "Login Form",
+    hasMicro: false,
+    hasMacro: false,
+    status: "new",
+  },
+  {
+    id: "auth-recovery-block",
+    category: "Authentication",
+    label: "Password Recovery",
+    hasMicro: false,
+    hasMacro: false,
+    status: "new",
+  },
+  {
+    id: "auth-split-block",
+    category: "Authentication",
+    label: "Login (Split Screen)",
+    hasMicro: false,
+    hasMacro: false,
+    status: "new",
+  },
   {
     id: "why",
     category: "Other",

package/src/dev/showcase/auth-form-block.tsx

@@ -0,0 +1,13 @@
+import { BlockViewer } from "../components/BlockViewer";
+import codeString from "../../blocks/auth-form.tsx?raw";
+
+export default function AuthFormBlockShowcase() {
+  return (
+    <BlockViewer 
+      blockId="auth-form" 
+      title="Login Form" 
+      description="A clean, simple authentication form layout for login and registration."
+      codeString={codeString} 
+    />
+  );
+}

package/src/dev/showcase/auth-recovery-block.tsx

@@ -0,0 +1,13 @@
+import { BlockViewer } from "../components/BlockViewer";
+import codeString from "../../blocks/auth-recovery.tsx?raw";
+
+export default function AuthRecoveryBlockShowcase() {
+  return (
+    <BlockViewer 
+      blockId="auth-recovery" 
+      title="Auth Recovery" 
+      description="A simple password recovery and reset flow."
+      codeString={codeString} 
+    />
+  );
+}

package/src/dev/showcase/auth-split-block.tsx

@@ -0,0 +1,13 @@
+import { BlockViewer } from "../components/BlockViewer";
+import codeString from "../../blocks/auth-split.tsx?raw";
+
+export default function AuthSplitBlockShowcase() {
+  return (
+    <BlockViewer 
+      blockId="auth-split" 
+      title="Auth Split Layout" 
+      description="A split-screen authentication page with an image or branding area."
+      codeString={codeString} 
+    />
+  );
+}