gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/chart.tsx

@@ -10,7 +10,7 @@ import {
 import {
   DocsCode,
   DocsP,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -20,7 +20,7 @@ export default function ChartShowcase() {
     <Showcase
       title="Chart"
       description="Biểu đồ đẹp và responsive, xây dựng trên nền Recharts."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Component wrapper cho thư viện <DocsCode>Recharts</DocsCode>. Cung
@@ -31,22 +31,15 @@ export default function ChartShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <ChartMicroShowcase /> },
-      ]}
+      micro={{ content: <ChartMicroShowcase /> }}
     />
   );
 }
 
 function ChartMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Bar Chart"
-        description="Biểu đồ cột cơ bản kèm tooltip và legend."
-        codeString={`const chartData = [
+    <div className="space-y-10">
+      <ShowcaseExample title="Bar Chart" description="Biểu đồ cột cơ bản kèm tooltip và legend." code={`const chartData = [
   { month: "January", desktop: 186, mobile: 80 },
   { month: "February", desktop: 305, mobile: 200 },
   { month: "March", desktop: 237, mobile: 120 },
@@ -81,44 +74,45 @@ const chartConfig = {
     <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
     <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
   </BarChart>
-</ChartContainer>`}
-      >
-        <ChartContainer
-          config={{
-            desktop: {
-              label: "Desktop",
-              color: "hsl(var(--chart-1))" },
-            mobile: {
-              label: "Mobile",
-              color: "hsl(var(--chart-2))" } }}
-          className="min-h-[200px] w-full max-w-lg"
-        >
-          <BarChart
-            accessibilityLayer
-            data={[
-              { month: "January", desktop: 186, mobile: 80 },
-              { month: "February", desktop: 305, mobile: 200 },
-              { month: "March", desktop: 237, mobile: 120 },
-              { month: "April", desktop: 73, mobile: 190 },
-              { month: "May", desktop: 209, mobile: 130 },
-              { month: "June", desktop: 214, mobile: 140 },
-            ]}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-          </BarChart>
-        </ChartContainer>
-      </ExampleSection>
+</ChartContainer>`} preview={
+                  <>
+          <ChartContainer
+                    config={{
+                      desktop: {
+                        label: "Desktop",
+                        color: "hsl(var(--chart-1))" },
+                      mobile: {
+                        label: "Mobile",
+                        color: "hsl(var(--chart-2))" } }}
+                    className="min-h-[200px] w-full max-w-lg"
+                  >
+                    <BarChart
+                      accessibilityLayer
+                      data={[
+                        { month: "January", desktop: 186, mobile: 80 },
+                        { month: "February", desktop: 305, mobile: 200 },
+                        { month: "March", desktop: 237, mobile: 120 },
+                        { month: "April", desktop: 73, mobile: 190 },
+                        { month: "May", desktop: 209, mobile: 130 },
+                        { month: "June", desktop: 214, mobile: 140 },
+                      ]}
+                    >
+                      <CartesianGrid vertical={false} />
+                      <XAxis
+                        dataKey="month"
+                        tickLine={false}
+                        tickMargin={10}
+                        axisLine={false}
+                        tickFormatter={(value) => value.slice(0, 3)}
+                      />
+                      <ChartTooltip content={<ChartTooltipContent />} />
+                      <ChartLegend content={<ChartLegendContent />} />
+                      <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+                      <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+                    </BarChart>
+                  </ChartContainer>
+                  </>
+                } />
     </div>
   );
 }