gladvn 0.2.36 → 0.2.37

package/src/dev/sections/forms.tsx

@@ -78,9 +78,7 @@ export default function FormsSection() {
         />
       </SectionHeader>
 
-      {/* Masonry layout */}
       <div className="columns-1 md:columns-2 gap-6 space-y-6 [&>div]:break-inside-avoid">
-        {/* 1. TEXT FIELDS */}
         <div className="rounded-2xl border border-border bg-card/40 p-6 shadow-sm transition-all hover:shadow-md flex flex-col gap-5">
           <div className="flex items-center gap-3 mb-2">
             <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
@@ -104,7 +102,7 @@ export default function FormsSection() {
                 <Input
                   id="tf-input"
                   size={globalSize}
-                  placeholder="Enter value..."
+                  placeholder="Nhập giá trị..."
                 />
               </FieldContent>
             </Field>
@@ -121,7 +119,7 @@ export default function FormsSection() {
                   id="tf-textarea"
                   size={globalSize}
                   rows={3}
-                  placeholder="Write something..."
+                  placeholder="Viết gì đó..."
                 />
               </FieldContent>
             </Field>
@@ -169,7 +167,6 @@ export default function FormsSection() {
           </div>
         </div>
 
-        {/* 2. PICKERS & DROPDOWNS */}
         <div className="rounded-2xl border border-border bg-card/40 p-6 shadow-sm transition-all hover:shadow-md flex flex-col gap-5">
           <div className="flex items-center gap-3 mb-2">
             <div className="flex size-10 items-center justify-center rounded-xl bg-success/10 text-success">
@@ -189,7 +186,7 @@ export default function FormsSection() {
               <FieldContent>
                 <Select>
                   <SelectTrigger size={globalSize}>
-                    <SelectValue placeholder="Pick a framework..." />
+                    <SelectValue placeholder="Chọn framework..." />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="next">Next.js</SelectItem>
@@ -209,7 +206,7 @@ export default function FormsSection() {
               <FieldContent>
                 <Select>
                   <SelectTrigger size={globalSize}>
-                    <SelectValue placeholder="Pick a fruit..." />
+                    <SelectValue placeholder="Chọn trái cây..." />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
@@ -233,7 +230,7 @@ export default function FormsSection() {
               <FieldContent>
                 <SelectPreset
                   size={globalSize}
-                  placeholder="Flat list..."
+                  placeholder="Danh sách..."
                   options={[
                     { value: "1", label: "Option 1" },
                     { value: "2", label: "Option 2" },
@@ -275,7 +272,7 @@ export default function FormsSection() {
               </FieldDescription>
               <FieldContent>
                 <Combobox>
-                  <ComboboxInput placeholder="Search framework..." />
+                  <ComboboxInput placeholder="Tìm framework..." />
                   <ComboboxContent>
                     <ComboboxList>
                       <ComboboxItem value="react">React</ComboboxItem>
@@ -289,7 +286,6 @@ export default function FormsSection() {
           </div>
         </div>
 
-        {/* 3. TOGGLES & SELECTORS */}
         <div className="rounded-2xl border border-border bg-card/40 p-6 shadow-sm transition-all hover:shadow-md flex flex-col gap-5">
           <div className="flex items-center gap-3 mb-2">
             <div className="flex size-10 items-center justify-center rounded-xl bg-info/10 text-info">
@@ -504,7 +500,7 @@ export default function FormsSection() {
                     id="err-input-username"
                     size={globalSize}
                     aria-invalid
-                    placeholder="e.g. john_doe"
+                    placeholder="VD: john_doe"
                   />
                 </FieldContent>
                 <FieldError
@@ -524,7 +520,7 @@ export default function FormsSection() {
                     <InputGroupInput
                       id="err-group"
                       aria-invalid
-                      placeholder="username"
+                      placeholder="tên người dùng"
                     />
                   </InputGroup>
                 </FieldContent>
@@ -538,7 +534,7 @@ export default function FormsSection() {
                 <FieldContent>
                   <Select>
                     <SelectTrigger size={globalSize} aria-invalid>
-                      <SelectValue placeholder="Invalid selection..." />
+                      <SelectValue placeholder="Lựa chọn không hợp lệ..." />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="1">Pro Plan</SelectItem>
@@ -564,7 +560,7 @@ export default function FormsSection() {
                       size={globalSize}
                       aria-invalid
                     >
-                      <SelectValue placeholder="Select option..." />
+                      <SelectValue placeholder="Chọn tuỳ chọn..." />
                     </SelectTrigger>
                     <SelectContent></SelectContent>
                   </Select>

package/src/dev/sections/interactive.tsx

@@ -7,7 +7,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components/micro/tabs";
-import { SectionHeader, ShowcaseBlock } from "../../dev/components/showcase";
+import { SectionHeader, ShowcaseExample } from "../../dev/components/showcase";
 
 export default function InteractiveSection() {
   const [tab, setTab] = useState("preview");
@@ -15,37 +15,37 @@ export default function InteractiveSection() {
     <div className="space-y-5">
       <SectionHeader title="Interactive" description="Tabs, Tooltips, Switch" />
 
-      <ShowcaseBlock title="Tabs">
-        <Tabs value={tab} onValueChange={setTab}>
-          <TabsList>
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-            <TabsTrigger value="props">Props</TabsTrigger>
-          </TabsList>
-          <TabsContent value="preview" className="pt-4">
-            <Button color="success">Save changes</Button>
-          </TabsContent>
-          <TabsContent value="code" className="pt-4">
-            <pre className="text-xs bg-muted rounded-md p-3 overflow-x-auto">
-              {`<Button color="success">Save changes</Button>`}
-            </pre>
-          </TabsContent>
-          <TabsContent value="props" className="pt-4">
-            <div className="text-xs text-muted-foreground space-y-1">
-              <div>
-                <code>variant</code> — solid | outline | soft | ghost | link
-              </div>
-              <div>
-                <code>color</code> — primary | secondary | destructive | warning
-                | success | info | tertiary
-              </div>
-              <div>
-                <code>size</code> — sm | md | lg
-              </div>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </ShowcaseBlock>
+      <ShowcaseExample title="Tabs" preview={<>
+          <Tabs value={tab} onValueChange={setTab}>
+                    <TabsList>
+                      <TabsTrigger value="preview">Preview</TabsTrigger>
+                      <TabsTrigger value="code">Code</TabsTrigger>
+                      <TabsTrigger value="props">Props</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="preview" className="pt-4">
+                      <Button color="success">Lưu thay đổi</Button>
+                    </TabsContent>
+                    <TabsContent value="code" className="pt-4">
+                      <pre className="text-xs bg-muted rounded-md p-3 overflow-x-auto">
+                        {`<Button color="success">Lưu thay đổi</Button>`}
+                      </pre>
+                    </TabsContent>
+                    <TabsContent value="props" className="pt-4">
+                      <div className="text-xs text-muted-foreground space-y-1">
+                        <div>
+                          <code>variant</code> — solid | outline | soft | ghost | link
+                        </div>
+                        <div>
+                          <code>color</code> — primary | secondary | destructive | warning
+                          | success | info | tertiary
+                        </div>
+                        <div>
+                          <code>size</code> — sm | md | lg
+                        </div>
+                      </div>
+                    </TabsContent>
+                  </Tabs>
+          </>} />
     </div>
   );
 }

package/src/dev/sections/overview.tsx

@@ -45,15 +45,13 @@ export default function OverviewSection() {
   const handleCopy = () => {
     navigator.clipboard.writeText("npm i gladvn");
     setCopied(true);
-    toast.success("Command copied to clipboard");
+    toast.success("Đã copy lệnh vào clipboard");
     setTimeout(() => setCopied(false), 2000);
   };
 
   return (
     <div className="space-y-6 overflow-hidden">
-      {/* Bento Grid */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
-        {/* 🌟 Hero Banner - Span 2 cols */}
         <div
           className="md:col-span-2 row-span-2 relative overflow-hidden rounded-2xl border border-border bg-card/40 p-6 md:p-8 shadow-sm transition-all hover:shadow-md hover:bg-card/60 group opacity-0 animate-fade-up"
           style={{ animationDelay: "0ms" }}
@@ -82,9 +80,7 @@ export default function OverviewSection() {
               </p>
             </div>
 
-            {/* Component Collage */}
             <div className="relative h-[240px] mt-8 w-full">
-              {/* Floating elements */}
               <div className="absolute top-0 right-4 lg:right-12 hover:-translate-y-1 transition-transform duration-300 animate-float-slow">
                 <Card className="w-[220px] shadow-xl bg-background/80 backdrop-blur-md border-primary/20">
                   <CardHeader className="p-4 pb-2">
@@ -110,7 +106,7 @@ export default function OverviewSection() {
                   </div>
                   <Select defaultValue="system">
                     <SelectTrigger size="sm">
-                      <SelectValue placeholder="Theme" />
+                      <SelectValue placeholder="Giao diện" />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="light">Light</SelectItem>
@@ -131,7 +127,6 @@ export default function OverviewSection() {
           </div>
         </div>
 
-        {/* 📦 Quick Example - Span 1 col */}
         <div
           className="md:col-span-1 rounded-2xl border border-border bg-card/40 p-6 shadow-sm transition-all hover:shadow-md hover:-translate-y-1 group flex flex-col justify-between opacity-0 animate-fade-up"
           style={{ animationDelay: "100ms" }}
@@ -170,7 +165,6 @@ export default function OverviewSection() {
           </Button>
         </div>
 
-        {/* 📊 Stats Grid - Span 1 col, 2x2 grid inside */}
         <div
           className="md:col-span-1 grid grid-cols-2 gap-4 opacity-0 animate-fade-up"
           style={{ animationDelay: "200ms" }}
@@ -201,7 +195,6 @@ export default function OverviewSection() {
           })}
         </div>
 
-        {/* 🎨 Color Tokens - Span 3 cols */}
         <div
           className="md:col-span-3 rounded-2xl border border-border bg-card/40 p-6 shadow-sm transition-all hover:shadow-md group opacity-0 animate-fade-up"
           style={{ animationDelay: "300ms" }}
@@ -229,7 +222,6 @@ export default function OverviewSection() {
           </div>
         </div>
 
-        {/* 📚 Architecture Cheatsheet - Span 3 cols */}
         <div
           className="md:col-span-3 rounded-2xl border border-border bg-card/40 p-6 shadow-sm transition-all hover:shadow-md group opacity-0 animate-fade-up"
           style={{ animationDelay: "400ms" }}