gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/aspect-ratio.tsx

@@ -3,98 +3,87 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
 const commonRatios = [
-  { label: "16:9", ratio: 16 / 9, desc: "Widescreen — video, hero banners" },
-  { label: "4:3", ratio: 4 / 3, desc: "Classic — presentations, old TV" },
-  { label: "1:1", ratio: 1, desc: "Square — avatars, social media" },
-  { label: "21:9", ratio: 21 / 9, desc: "Ultrawide — cinematic, panoramas" },
-  { label: "3:2", ratio: 3 / 2, desc: "Photography — DSLR standard" },
-  { label: "9:16", ratio: 9 / 16, desc: "Portrait — mobile, stories" },
+  { label: "16:9", ratio: 16 / 9, desc: "Màn hình rộng — video, hero banner" },
+  { label: "4:3", ratio: 4 / 3, desc: "Cổ điển — bài thuyết trình, TV cũ" },
+  { label: "1:1", ratio: 1, desc: "Vuông — avatar, mạng xã hội" },
+  { label: "21:9", ratio: 21 / 9, desc: "Siêu rộng — điện ảnh, toàn cảnh" },
+  { label: "3:2", ratio: 3 / 2, desc: "Nhiếp ảnh — chuẩn DSLR" },
+  { label: "9:16", ratio: 9 / 16, desc: "Chân dung — di động, story" },
 ];
 
 function AspectRatioMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      {/* ── Common Ratios ── */}
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="16:9"
-          description="Widescreen — dùng cho video, hero banner"
-          codeString={`<AspectRatio
+        <ShowcaseExample title="16:9" description="Widescreen — dùng cho video, hero banner" code={`<AspectRatio
     ratio={16 / 9}
     className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
   >
     <span className="text-foreground font-mono text-lg font-semibold">
       16:9
     </span>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={16 / 9}
-            className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
-          >
-            <span className="text-foreground font-mono text-lg font-semibold">
-              16:9
-            </span>
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={16 / 9}
+                          className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
+                        >
+                          <span className="text-foreground font-mono text-lg font-semibold">
+                            16:9
+                          </span>
+                        </AspectRatio>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="4:3"
-          description="Classic — bài thuyết trình, TV cũ"
-          codeString={`<AspectRatio
+        <ShowcaseExample title="4:3" description="Classic — bài thuyết trình, TV cũ" code={`<AspectRatio
     ratio={4 / 3}
     className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
   >
     <span className="text-foreground font-mono text-lg font-semibold">
       4:3
     </span>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={4 / 3}
-            className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
-          >
-            <span className="text-foreground font-mono text-lg font-semibold">
-              4:3
-            </span>
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={4 / 3}
+                          className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
+                        >
+                          <span className="text-foreground font-mono text-lg font-semibold">
+                            4:3
+                          </span>
+                        </AspectRatio>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="1:1"
-          description="Vuông — avatar, social media"
-          codeString={`<AspectRatio
+        <ShowcaseExample title="1:1" description="Vuông — avatar, social media" code={`<AspectRatio
     ratio={1}
     className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
   >
     <span className="text-foreground font-mono text-lg font-semibold">
       1:1
     </span>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={1}
-            className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
-          >
-            <span className="text-foreground font-mono text-lg font-semibold">
-              1:1
-            </span>
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={1}
+                          className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-border w-full"
+                        >
+                          <span className="text-foreground font-mono text-lg font-semibold">
+                            1:1
+                          </span>
+                        </AspectRatio>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── With Image ── */}
       <ExampleGrid>
-        <ExampleSection
-          label="16:9 Image"
-          description="Tỷ lệ khung hình hạn chế hình ảnh 16:9."
-          codeString={`<AspectRatio
+        <ShowcaseExample title="16:9 Image" description="Tỷ lệ khung hình hạn chế hình ảnh 16:9." code={`<AspectRatio
     ratio={16 / 9}
     className="rounded-xl overflow-hidden w-full"
   >
@@ -103,24 +92,22 @@ function AspectRatioMicroShowcase() {
       alt="Landscape photo"
       className="w-full h-full object-cover"
     />
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={16 / 9}
-            className="rounded-xl overflow-hidden w-full"
-          >
-            <img
-              src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-              alt="Landscape photo"
-              className="w-full h-full object-cover"
-            />
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={16 / 9}
+                          className="rounded-xl overflow-hidden w-full"
+                        >
+                          <img
+                            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+                            alt="Landscape photo"
+                            className="w-full h-full object-cover"
+                          />
+                        </AspectRatio>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="1:1 Image"
-          description="Tỷ lệ khung hình vuông cho avatar hoặc social post."
-          codeString={`<AspectRatio
+        <ShowcaseExample title="1:1 Image" description="Tỷ lệ khung hình vuông cho avatar hoặc social post." code={`<AspectRatio
     ratio={1}
     className="rounded-xl overflow-hidden w-full"
   >
@@ -129,24 +116,21 @@ function AspectRatioMicroShowcase() {
       alt="Square cropped photo"
       className="w-full h-full object-cover"
     />
-  </AspectRatio>`}
-        >
-          <AspectRatio ratio={1} className="rounded-xl overflow-hidden w-full">
-            <img
-              src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-              alt="Square cropped photo"
-              className="w-full h-full object-cover"
-            />
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio ratio={1} className="rounded-xl overflow-hidden w-full">
+                          <img
+                            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+                            alt="Square cropped photo"
+                            className="w-full h-full object-cover"
+                          />
+                        </AspectRatio>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── Map / Embed placeholder ── */}
       <ExampleGrid>
-        <ExampleSection
-          label="Video Embed"
-          description="Duy trì tỷ lệ 16:9 cho video nhúng."
-          codeString={`<AspectRatio
+        <ShowcaseExample title="Video Embed" description="Duy trì tỷ lệ 16:9 cho video nhúng." code={`<AspectRatio
     ratio={16 / 9}
     className="rounded-xl overflow-hidden bg-muted border border-border w-full"
   >
@@ -167,34 +151,32 @@ function AspectRatioMicroShowcase() {
         iframe / video
       </span>
     </div>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={16 / 9}
-            className="rounded-xl overflow-hidden bg-muted border border-border w-full"
-          >
-            <div className="w-full h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
-              <svg
-                width="48"
-                height="48"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <polygon points="5 3 19 12 5 21 5 3" />
-              </svg>
-              <span className="text-xs font-mono">iframe / video</span>
-            </div>
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={16 / 9}
+                          className="rounded-xl overflow-hidden bg-muted border border-border w-full"
+                        >
+                          <div className="w-full h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
+                            <svg
+                              width="48"
+                              height="48"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <polygon points="5 3 19 12 5 21 5 3" />
+                            </svg>
+                            <span className="text-xs font-mono">iframe / video</span>
+                          </div>
+                        </AspectRatio>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Map Embed"
-          description="Duy trì tỷ lệ 4:3 cho bản đồ nhúng."
-          codeString={`<AspectRatio
+        <ShowcaseExample title="Map Embed" description="Duy trì tỷ lệ 4:3 cho bản đồ nhúng." code={`<AspectRatio
     ratio={4 / 3}
     className="rounded-xl overflow-hidden bg-muted border border-border w-full"
   >
@@ -217,98 +199,92 @@ function AspectRatioMicroShowcase() {
         map / iframe
       </span>
     </div>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={4 / 3}
-            className="rounded-xl overflow-hidden bg-muted border border-border w-full"
-          >
-            <div className="w-full h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
-              <svg
-                width="48"
-                height="48"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" />
-                <line x1="8" y1="2" x2="8" y2="18" />
-                <line x1="16" y1="6" x2="16" y2="22" />
-              </svg>
-              <span className="text-xs font-mono">map / iframe</span>
-            </div>
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={4 / 3}
+                          className="rounded-xl overflow-hidden bg-muted border border-border w-full"
+                        >
+                          <div className="w-full h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
+                            <svg
+                              width="48"
+                              height="48"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            >
+                              <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" />
+                              <line x1="8" y1="2" x2="8" y2="18" />
+                              <line x1="16" y1="6" x2="16" y2="22" />
+                            </svg>
+                            <span className="text-xs font-mono">map / iframe</span>
+                          </div>
+                        </AspectRatio>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── Custom Ratio ── */}
       <ExampleGrid>
-        <ExampleSection
-          label="Ratio 2.35"
-          description="Custom ratio 2.35"
-          codeString={`<AspectRatio
+        <ShowcaseExample title="Ratio 2.35" description="Custom ratio 2.35" code={`<AspectRatio
     ratio={2.35}
     className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
   >
     <span className="text-muted-foreground font-mono text-sm">
       ratio={2.35}
     </span>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={2.35}
-            className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
-          >
-            <span className="text-muted-foreground font-mono text-sm">
-              ratio={2.35}
-            </span>
-          </AspectRatio>
-        </ExampleSection>
-        <ExampleSection
-          label="Ratio 1.85"
-          description="Custom ratio 1.85"
-          codeString={`<AspectRatio
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={2.35}
+                          className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
+                        >
+                          <span className="text-muted-foreground font-mono text-sm">
+                            ratio={2.35}
+                          </span>
+                        </AspectRatio>
+                      </>
+                    } />
+        <ShowcaseExample title="Ratio 1.85" description="Custom ratio 1.85" code={`<AspectRatio
     ratio={1.85}
     className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
   >
     <span className="text-muted-foreground font-mono text-sm">
       ratio={1.85}
     </span>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={1.85}
-            className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
-          >
-            <span className="text-muted-foreground font-mono text-sm">
-              ratio={1.85}
-            </span>
-          </AspectRatio>
-        </ExampleSection>
-        <ExampleSection
-          label="Ratio 0.8"
-          description="Custom ratio 0.8"
-          codeString={`<AspectRatio
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={1.85}
+                          className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
+                        >
+                          <span className="text-muted-foreground font-mono text-sm">
+                            ratio={1.85}
+                          </span>
+                        </AspectRatio>
+                      </>
+                    } />
+        <ShowcaseExample title="Ratio 0.8" description="Custom ratio 0.8" code={`<AspectRatio
     ratio={0.8}
     className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
   >
     <span className="text-muted-foreground font-mono text-sm">
       ratio={0.8}
     </span>
-  </AspectRatio>`}
-        >
-          <AspectRatio
-            ratio={0.8}
-            className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
-          >
-            <span className="text-muted-foreground font-mono text-sm">
-              ratio={0.8}
-            </span>
-          </AspectRatio>
-        </ExampleSection>
+  </AspectRatio>`} preview={
+                      <>
+              <AspectRatio
+                          ratio={0.8}
+                          className="bg-muted rounded-xl overflow-hidden flex items-center justify-center border border-dashed border-border w-full"
+                        >
+                          <span className="text-muted-foreground font-mono text-sm">
+                            ratio={0.8}
+                          </span>
+                        </AspectRatio>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
@@ -319,7 +295,7 @@ export default function AspectRatioShowcase() {
     <Showcase
       title="Aspect Ratio"
       description="Hiển thị nội dung theo tỷ lệ mong muốn. Hữu ích cho hình ảnh, video, bản đồ và phương tiện nhúng."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Aspect Ratio</DocsH3>
           <DocsP>
@@ -328,9 +304,7 @@ export default function AspectRatioShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <AspectRatioMicroShowcase /> },
-      ]}
+      micro={{ content: <AspectRatioMicroShowcase /> }}
     />
   );
 }