gladvn 0.2.17 → 0.2.18

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

@@ -26,14 +26,13 @@ function AspectRatioMicroShowcase() {
           label="16:9"
           description="Widescreen — dùng cho video, hero banner"
           codeString={`<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>
-`}
+    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}
@@ -49,14 +48,13 @@ function AspectRatioMicroShowcase() {
           label="4:3"
           description="Classic — bài thuyết trình, TV cũ"
           codeString={`<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>
-`}
+    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}
@@ -72,14 +70,13 @@ function AspectRatioMicroShowcase() {
           label="1:1"
           description="Vuông — avatar, social media"
           codeString={`<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>
-`}
+    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}
@@ -98,16 +95,15 @@ function AspectRatioMicroShowcase() {
           label="16:9 Image"
           description="Tỷ lệ khung hình hạn chế hình ảnh 16:9."
           codeString={`<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>
-`}
+    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>`}
         >
           <AspectRatio
             ratio={16 / 9}
@@ -124,14 +120,16 @@ function AspectRatioMicroShowcase() {
         <ExampleSection
           label="1:1 Image"
           description="Tỷ lệ khung hình vuông cho avatar hoặc social post."
-          codeString={`<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>
-`}
+          codeString={`<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>`}
         >
           <AspectRatio ratio={1} className="rounded-xl overflow-hidden w-full">
             <img
@@ -149,26 +147,27 @@ function AspectRatioMicroShowcase() {
           label="Video Embed"
           description="Duy trì tỷ lệ 16:9 cho video nhúng."
           codeString={`<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>
-`}
+    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>`}
         >
           <AspectRatio
             ratio={16 / 9}
@@ -196,28 +195,29 @@ function AspectRatioMicroShowcase() {
           label="Map Embed"
           description="Duy trì tỷ lệ 4:3 cho bản đồ nhúng."
           codeString={`<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>
-`}
+    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>`}
         >
           <AspectRatio
             ratio={4 / 3}
@@ -250,14 +250,13 @@ function AspectRatioMicroShowcase() {
           label="Ratio 2.35"
           description="Custom ratio 2.35"
           codeString={`<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>
-`}
+    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}
@@ -272,14 +271,13 @@ function AspectRatioMicroShowcase() {
           label="Ratio 1.85"
           description="Custom ratio 1.85"
           codeString={`<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>
-`}
+    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}
@@ -294,14 +292,13 @@ function AspectRatioMicroShowcase() {
           label="Ratio 0.8"
           description="Custom ratio 0.8"
           codeString={`<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>
-`}
+    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}