gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/popover.tsx

@@ -18,25 +18,19 @@ import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Default"
-          description="Cửa sổ Popover tiêu chuẩn."
-          codeString={`<Popover>
+        <ShowcaseExample title="Mặc định" description="Cửa sổ Popover tiêu chuẩn." code={`<Popover>
   <PopoverTrigger
     render={
       <Button variant="outline" size="${globalSize}">
@@ -53,7 +47,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
     </PopoverHeader>
     <div className="grid gap-4 mt-4">
       <div className="grid grid-cols-3 items-center gap-4">
-        <Label htmlFor="width">Width</Label>
+        <Label htmlFor="width">Chiều rộng</Label>
         <Input
           id="width"
           defaultValue="100%"
@@ -71,51 +65,49 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
     </div>
   </PopoverContent>
 </Popover>
-`}
-        >
-          <Popover>
-            <PopoverTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  Open Popover
-                </Button>
-              }
-            />
+`} preview={
+                      <>
+              <Popover>
+                          <PopoverTrigger
+                            render={
+                              <Button variant="outline" size={globalSize}>
+                                Open Popover
+                              </Button>
+                            }
+                          />
 
-              <PopoverContent className="w-80" sideOffset={8}>
-                <PopoverHeader>
-                  <PopoverTitle>Dimensions</PopoverTitle>
-                  <PopoverDescription>
-                    Cài đặt kích thước cho layer.
-                  </PopoverDescription>
-                </PopoverHeader>
-                <div className="grid gap-4 mt-4">
-                  <div className="grid grid-cols-3 items-center gap-4">
-                    <Label htmlFor="width">Width</Label>
-                    <Input
-                      id="width"
-                      defaultValue="100%"
-                      className="col-span-2 h-8"
-                    />
-                  </div>
-                  <div className="grid grid-cols-3 items-center gap-4">
-                    <Label htmlFor="height">Height</Label>
-                    <Input
-                      id="height"
-                      defaultValue="200px"
-                      className="col-span-2 h-8"
-                    />
-                  </div>
-                </div>
-              </PopoverContent>
-            
-          </Popover>
-        </ExampleSection>
+                            <PopoverContent className="w-80" sideOffset={8}>
+                              <PopoverHeader>
+                                <PopoverTitle>Dimensions</PopoverTitle>
+                                <PopoverDescription>
+                                  Cài đặt kích thước cho layer.
+                                </PopoverDescription>
+                              </PopoverHeader>
+                              <div className="grid gap-4 mt-4">
+                                <div className="grid grid-cols-3 items-center gap-4">
+                                  <Label htmlFor="width">Chiều rộng</Label>
+                                  <Input
+                                    id="width"
+                                    defaultValue="100%"
+                                    className="col-span-2 h-8"
+                                  />
+                                </div>
+                                <div className="grid grid-cols-3 items-center gap-4">
+                                  <Label htmlFor="height">Height</Label>
+                                  <Input
+                                    id="height"
+                                    defaultValue="200px"
+                                    className="col-span-2 h-8"
+                                  />
+                                </div>
+                              </div>
+                            </PopoverContent>
+                          
+                        </Popover>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Icon Trigger"
-          description="Mở Popover bằng Icon Button."
-          codeString={`<div className="flex gap-4">
+        <ShowcaseExample title="Icon Trigger" description="Mở Popover bằng Icon Button." code={`<div className="flex gap-4">
     <Popover>
       <PopoverTrigger
         render={
@@ -181,72 +173,70 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
         </PopoverContent>
       
     </Popover>
-  </div>`}
-        >
-          <div className="flex gap-4">
-            <Popover>
-              <PopoverTrigger
-                render={
-                  <Button
-                    variant="ghost"
-                    size="md"
-                    iconOnly
-                    className="rounded-full"
-                  >
-                    <Bell className="size-4" />
-                  </Button>
-                }
-              />
+  </div>`} preview={
+                      <>
+              <div className="flex gap-4">
+                          <Popover>
+                            <PopoverTrigger
+                              render={
+                                <Button
+                                  variant="ghost"
+                                  size="md"
+                                  iconOnly
+                                  className="rounded-full"
+                                >
+                                  <Bell className="size-4" />
+                                </Button>
+                              }
+                            />
 
-                <PopoverContent className="w-64" sideOffset={8} align="start">
-                  <PopoverHeader>
-                    <PopoverTitle>Thông báo</PopoverTitle>
-                    <PopoverDescription>
-                      Bạn có 3 tin nhắn chưa đọc.
-                    </PopoverDescription>
-                  </PopoverHeader>
-                </PopoverContent>
-              
-            </Popover>
+                              <PopoverContent className="w-64" sideOffset={8} align="start">
+                                <PopoverHeader>
+                                  <PopoverTitle>Thông báo</PopoverTitle>
+                                  <PopoverDescription>
+                                    Bạn có 3 tin nhắn chưa đọc.
+                                  </PopoverDescription>
+                                </PopoverHeader>
+                              </PopoverContent>
+                            
+                          </Popover>
 
-            <Popover>
-              <PopoverTrigger
-                render={
-                  <Button variant="outline" size="md" iconOnly>
-                    <Settings className="size-4" />
-                  </Button>
-                }
-              />
+                          <Popover>
+                            <PopoverTrigger
+                              render={
+                                <Button variant="outline" size="md" iconOnly>
+                                  <Settings className="size-4" />
+                                </Button>
+                              }
+                            />
 
-                <PopoverContent className="w-56" sideOffset={8}>
-                  <PopoverHeader>
-                    <PopoverTitle>Cài đặt nhanh</PopoverTitle>
-                  </PopoverHeader>
-                  <div className="flex flex-col gap-2 mt-2">
-                    <Button variant="ghost" className="justify-start">
-                      Tài khoản
-                    </Button>
-                    <Button variant="ghost" className="justify-start">
-                      Giao diện
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      className="justify-start text-destructive hover:text-destructive"
-                    >
-                      Đăng xuất
-                    </Button>
-                  </div>
-                </PopoverContent>
-              
-            </Popover>
-          </div>
-        </ExampleSection>
+                              <PopoverContent className="w-56" sideOffset={8}>
+                                <PopoverHeader>
+                                  <PopoverTitle>Cài đặt nhanh</PopoverTitle>
+                                </PopoverHeader>
+                                <div className="flex flex-col gap-2 mt-2">
+                                  <Button variant="ghost" className="justify-start">
+                                    Tài khoản
+                                  </Button>
+                                  <Button variant="ghost" className="justify-start">
+                                    Giao diện
+                                  </Button>
+                                  <Button
+                                    variant="ghost"
+                                    className="justify-start text-destructive hover:text-destructive"
+                                  >
+                                    Đăng xuất
+                                  </Button>
+                                </div>
+                              </PopoverContent>
+                            
+                          </Popover>
+                        </div>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="Placement (Vị trí)"
-        description="Popover có thể hiển thị ở nhiều hướng khác nhau so với trigger (Top, Bottom, Left, Right)."
-        codeString={`<Popover>
+      <ShowcaseExample title="Placement (Vị trí)" description="Popover có thể hiển thị ở nhiều hướng khác nhau so với trigger (Top, Bottom, Left, Right)." code={`<Popover>
     <PopoverTrigger asChild>
       <Button variant="outline">top</Button>
     </PopoverTrigger>
@@ -259,40 +249,38 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
         Hiển thị ở phía <strong>top</strong>
       </PopoverContent>
     
-  </Popover>`}
-      >
-        <div className="flex flex-wrap items-center justify-center gap-4 py-8">
-          {(["top", "right", "bottom", "left"] as const).map((side) => (
-            <Popover key={side}>
-              <PopoverTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    size={globalSize}
-                    className="capitalize"
-                  >
-                    {side}
-                  </Button>
-                }
-              />
-              
-                <PopoverContent
-                  side={side}
-                  sideOffset={8}
-                  className="w-48 text-center text-sm p-4"
-                >
-                  Hiển thị ở phía <strong className="capitalize">{side}</strong>
-                </PopoverContent>
-              
-            </Popover>
-          ))}
-        </div>
-      </ExampleSection>
+  </Popover>`} preview={
+                  <>
+          <div className="flex flex-wrap items-center justify-center gap-4 py-8">
+                    {(["top", "right", "bottom", "left"] as const).map((side) => (
+                      <Popover key={side}>
+                        <PopoverTrigger
+                          render={
+                            <Button
+                              variant="outline"
+                              size={globalSize}
+                              className="capitalize"
+                            >
+                              {side}
+                            </Button>
+                          }
+                        />
+                        
+                          <PopoverContent
+                            side={side}
+                            sideOffset={8}
+                            className="w-48 text-center text-sm p-4"
+                          >
+                            Hiển thị ở phía <strong className="capitalize">{side}</strong>
+                          </PopoverContent>
+                        
+                      </Popover>
+                    ))}
+                  </div>
+                  </>
+                } />
 
-      <ExampleSection
-        label="Controlled State"
-        description="Quản lý trạng thái đóng/mở của Popover thông qua React state (open và onOpenChange)."
-        codeString={`const [isOpen, setIsOpen] = React.useState(false) return (
+      <ShowcaseExample title="Controlled State" description="Quản lý trạng thái đóng/mở của Popover thông qua React state (open và onOpenChange)." code={`const [isOpen, setIsOpen] = React.useState(false) return (
   <Popover open={isOpen} onOpenChange={setIsOpen}>
     <PopoverTrigger asChild>
       <Button variant="outline">
@@ -320,50 +308,51 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
       </PopoverContent>
     
   </Popover>
-  )`}
-      >
-        <div className="flex items-center gap-4">
-          <Popover open={isOpen} onOpenChange={setIsOpen}>
-            <PopoverTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  Toggle Controlled Popover
-                </Button>
-              }
-            />
-            
-              <PopoverContent className="w-80" sideOffset={8}>
-                <PopoverHeader>
-                  <PopoverTitle>Controlled Mode</PopoverTitle>
-                  <PopoverDescription>
-                    Popover này được control bởi state. Bạn có thể đóng nó bằng
-                    nút bên dưới hoặc click ra ngoài.
-                  </PopoverDescription>
-                </PopoverHeader>
-                <div className="mt-4 flex justify-end">
-                  <Button
-                    size="sm"
-                    color="secondary"
-                    onClick={() => setIsOpen(false)}
-                  >
-                    Đóng Popover
-                  </Button>
-                </div>
-              </PopoverContent>
-            
-          </Popover>
+  )`} preview={
+                  <>
+          <div className="flex items-center gap-4">
+                    <Popover open={isOpen} onOpenChange={setIsOpen}>
+                      <PopoverTrigger
+                        render={
+                          <Button variant="outline" size={globalSize}>
+                            Toggle Controlled Popover
+                          </Button>
+                        }
+                      />
+                      
+                        <PopoverContent className="w-80" sideOffset={8}>
+                          <PopoverHeader>
+                            <PopoverTitle>Controlled Mode</PopoverTitle>
+                            <PopoverDescription>
+                              Popover này được control bởi state. Bạn có thể đóng nó bằng
+                              nút bên dưới hoặc click ra ngoài.
+                            </PopoverDescription>
+                          </PopoverHeader>
+                          <div className="mt-4 flex justify-end">
+                            <Button
+                              size="sm"
+                              color="secondary"
+                              onClick={() => setIsOpen(false)}
+                            >
+                              Đóng Popover
+                            </Button>
+                          </div>
+                        </PopoverContent>
+                      
+                    </Popover>
 
-          <div className="text-sm text-muted-foreground">
-            Trạng thái hiện tại:{" "}
-            <strong
-              data-active={isOpen ? "" : undefined}
-              className="data-active:text-primary"
-            >
-              {isOpen ? "Mở" : "Đóng"}
-            </strong>
-          </div>
-        </div>
-      </ExampleSection>
+                    <div className="text-sm text-muted-foreground">
+                      Trạng thái hiện tại:{" "}
+                      <strong
+                        data-active={isOpen ? "" : undefined}
+                        className="data-active:text-primary"
+                      >
+                        {isOpen ? "Mở" : "Đóng"}
+                      </strong>
+                    </div>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
@@ -377,7 +366,7 @@ export default function PopoverShowcase() {
     <Showcase
       title="Popover"
       description="Popup nội dung phong phú, kích hoạt bằng một nút hoặc trigger."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Popover là một floating panel hiển thị khi người dùng click vào một
@@ -387,11 +376,7 @@ export default function PopoverShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <PopoverMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <PopoverMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }