docs: migrate UI docs (#13245)

* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
2025-08-20 11:42:25 +03:00
parent 5b7a041246
commit d1a1135328
748 changed files with 13079 additions and 7319 deletions
@@ -0,0 +1,61 @@
+import { ProgressTabs, Text, Button } from "@medusajs/ui"
+import * as React from "react"
+
+export default function ProgressTabsControlled() {
+  const steps = ["general", "shipping", "payment"]
+  const [active, setActive] = React.useState("general")
+  const currentIndex = steps.indexOf(active)
+
+  const handleNext = () => {
+    if (currentIndex < steps.length - 1) {
+      setActive(steps[currentIndex + 1])
+    }
+  }
+  const handlePrev = () => {
+    if (currentIndex > 0) {
+      setActive(steps[currentIndex - 1])
+    }
+  }
+
+  return (
+    <div className="w-full px-4 flex flex-col gap-4">
+      <ProgressTabs value={active} onValueChange={setActive}>
+        <div className="border-b border-ui-border-base">
+          <ProgressTabs.List>
+            <ProgressTabs.Trigger value="general">General</ProgressTabs.Trigger>
+            <ProgressTabs.Trigger value="shipping">
+              Shipping
+            </ProgressTabs.Trigger>
+            <ProgressTabs.Trigger value="payment">Payment</ProgressTabs.Trigger>
+          </ProgressTabs.List>
+        </div>
+        <div className="mt-2">
+          <ProgressTabs.Content value="general">
+            <Text size="small">This is the General step.</Text>
+          </ProgressTabs.Content>
+          <ProgressTabs.Content value="shipping">
+            <Text size="small">This is the Shipping step.</Text>
+          </ProgressTabs.Content>
+          <ProgressTabs.Content value="payment">
+            <Text size="small">This is the Payment step.</Text>
+          </ProgressTabs.Content>
+        </div>
+      </ProgressTabs>
+      <div className="mt-4 flex gap-2 self-end">
+        <Button
+          variant="secondary"
+          onClick={handlePrev}
+          disabled={currentIndex === 0}
+        >
+          Prev
+        </Button>
+        <Button
+          onClick={handleNext}
+          disabled={currentIndex === steps.length - 1}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+}