docs(select): more intuitive example

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/option-value.tsx

@@ -9,7 +9,14 @@ import {
 import styles from './select.css?inline';
 export default component$(() => {
   useStyles$(styles);
-  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+  const users = [
+    { id: '0', label: 'Tim' },
+    { id: '1', label: 'Ryan' },
+    { id: '2', label: 'Jim' },
+    { id: '3', label: 'Jessie' },
+    { id: '4', label: 'Abby' },
+  ];
+
   const selected = useSignal<string | null>(null);
 
   const handleChange$ = $((value: string) => {
@@ -23,9 +30,9 @@ export default component$(() => {
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
         <SelectListbox class="select-listbox">
-          {users.map((user, index) => (
-            <SelectOption value={index.toString()} class="select-option" key={user}>
-              {user}
+          {users.map((user) => (
+            <SelectOption value={user.id} class="select-option" key={user.id}>
+              {user.label}
             </SelectOption>
           ))}
         </SelectListbox>