chore(segmented-control): update Solid example

chakra-ui · Oct 2, 2023 · f911ac6 · f911ac6
1 parent f576885
commit f911ac6
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/examples/solid-ts/src/pages/segment-control.tsx b/examples/solid-ts/src/pages/segment-control.tsx
@@ -1,7 +1,7 @@
 import * as radio from "@zag-js/radio-group"
 import { radioControls, radioData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { For, createMemo, createUniqueId } from "solid-js"
+import { Index, createMemo, createUniqueId } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -20,18 +20,17 @@ export default function Page() {
       <main class="segmented-control">
         <div {...api().rootProps}>
           <div {...api().indicatorProps} />
-          <For each={radioData}>
+          <Index each={radioData}>
             {(opt) => (
-              <label data-testid={`radio-${opt.id}`} {...api().getRadioProps({ value: opt.id })}>
-                <span data-testid={`label-${opt.id}`} {...api().getRadioLabelProps({ value: opt.id })}>
-                  {opt.label}
+              <label data-testid={`radio-${opt().id}`} {...api().getItemProps({ value: opt().id })}>
+                <span data-testid={`label-${opt().id}`} {...api().getItemTextProps({ value: opt().id })}>
+                  {opt().label}
                 </span>
-                <input data-testid={`input-${opt.id}`} {...api().getRadioHiddenInputProps({ value: opt.id })} />
+                <input data-testid={`input-${opt().id}`} {...api().getItemHiddenInputProps({ value: opt().id })} />
               </label>
             )}
-          </For>
+          </Index>
         </div>
-
         <button onClick={api().clearValue}>reset</button>
       </main>