Skip to content

Commit b0baa48

Browse files
atomiksatomiks
committed
Make Combobox match Select data structure in hero
1 parent d73d9b0 commit b0baa48

File tree

2 files changed

+68
-58
lines changed
  • docs/src/app/(docs)/react/components/combobox/demos/hero

2 files changed

+68
-58
lines changed

‎docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ export default function ExampleCombobox() {
2727
<Combobox.Popup className={styles.Popup}>
2828
<Combobox.Empty className={styles.Empty}>No fruits found.</Combobox.Empty>
2929
<Combobox.List className={styles.List}>
30-
{(item: string) => (
31-
<Combobox.Item key={item} value={item} className={styles.Item}>
30+
{(item: Fruit) => (
31+
<Combobox.Item key={item.value} value={item} className={styles.Item}>
3232
<Combobox.ItemIndicator className={styles.ItemIndicator}>
3333
<CheckIcon className={styles.ItemIndicatorIcon} />
3434
</Combobox.ItemIndicator>
35-
<div className={styles.ItemText}>{item}</div>
35+
<div className={styles.ItemText}>{item.label}</div>
3636
</Combobox.Item>
3737
)}
3838
</Combobox.List>
@@ -86,30 +86,35 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
8686
);
8787
}
8888

89-
const fruits = [
90-
'Apple',
91-
'Banana',
92-
'Orange',
93-
'Pineapple',
94-
'Grape',
95-
'Mango',
96-
'Strawberry',
97-
'Blueberry',
98-
'Raspberry',
99-
'Blackberry',
100-
'Cherry',
101-
'Peach',
102-
'Pear',
103-
'Plum',
104-
'Kiwi',
105-
'Watermelon',
106-
'Cantaloupe',
107-
'Honeydew',
108-
'Papaya',
109-
'Guava',
110-
'Lychee',
111-
'Pomegranate',
112-
'Apricot',
113-
'Grapefruit',
114-
'Passionfruit',
89+
interface Fruit {
90+
label: string;
91+
value: string;
92+
}
93+
94+
const fruits: Fruit[] = [
95+
{ label: 'Apple', value: 'apple' },
96+
{ label: 'Banana', value: 'banana' },
97+
{ label: 'Orange', value: 'orange' },
98+
{ label: 'Pineapple', value: 'pineapple' },
99+
{ label: 'Grape', value: 'grape' },
100+
{ label: 'Mango', value: 'mango' },
101+
{ label: 'Strawberry', value: 'strawberry' },
102+
{ label: 'Blueberry', value: 'blueberry' },
103+
{ label: 'Raspberry', value: 'raspberry' },
104+
{ label: 'Blackberry', value: 'blackberry' },
105+
{ label: 'Cherry', value: 'cherry' },
106+
{ label: 'Peach', value: 'peach' },
107+
{ label: 'Pear', value: 'pear' },
108+
{ label: 'Plum', value: 'plum' },
109+
{ label: 'Kiwi', value: 'kiwi' },
110+
{ label: 'Watermelon', value: 'watermelon' },
111+
{ label: 'Cantaloupe', value: 'cantaloupe' },
112+
{ label: 'Honeydew', value: 'honeydew' },
113+
{ label: 'Papaya', value: 'papaya' },
114+
{ label: 'Guava', value: 'guava' },
115+
{ label: 'Lychee', value: 'lychee' },
116+
{ label: 'Pomegranate', value: 'pomegranate' },
117+
{ label: 'Apricot', value: 'apricot' },
118+
{ label: 'Grapefruit', value: 'grapefruit' },
119+
{ label: 'Passionfruit', value: 'passionfruit' },
115120
];

‎docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,16 @@ export default function ExampleCombobox() {
3838
No fruits found.
3939
</Combobox.Empty>
4040
<Combobox.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
41-
{(item: string) => (
41+
{(item: Fruit) => (
4242
<Combobox.Item
43-
key={item}
43+
key={item.value}
4444
value={item}
4545
className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
4646
>
4747
<Combobox.ItemIndicator className="col-start-1">
4848
<CheckIcon className="size-3" />
4949
</Combobox.ItemIndicator>
50-
<div className="col-start-2">{item}</div>
50+
<div className="col-start-2">{item.label}</div>
5151
</Combobox.Item>
5252
)}
5353
</Combobox.List>
@@ -101,30 +101,35 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
101101
);
102102
}
103103

104-
const fruits = [
105-
'Apple',
106-
'Banana',
107-
'Orange',
108-
'Pineapple',
109-
'Grape',
110-
'Mango',
111-
'Strawberry',
112-
'Blueberry',
113-
'Raspberry',
114-
'Blackberry',
115-
'Cherry',
116-
'Peach',
117-
'Pear',
118-
'Plum',
119-
'Kiwi',
120-
'Watermelon',
121-
'Cantaloupe',
122-
'Honeydew',
123-
'Papaya',
124-
'Guava',
125-
'Lychee',
126-
'Pomegranate',
127-
'Apricot',
128-
'Grapefruit',
129-
'Passionfruit',
104+
interface Fruit {
105+
label: string;
106+
value: string;
107+
}
108+
109+
const fruits: Fruit[] = [
110+
{ label: 'Apple', value: 'apple' },
111+
{ label: 'Banana', value: 'banana' },
112+
{ label: 'Orange', value: 'orange' },
113+
{ label: 'Pineapple', value: 'pineapple' },
114+
{ label: 'Grape', value: 'grape' },
115+
{ label: 'Mango', value: 'mango' },
116+
{ label: 'Strawberry', value: 'strawberry' },
117+
{ label: 'Blueberry', value: 'blueberry' },
118+
{ label: 'Raspberry', value: 'raspberry' },
119+
{ label: 'Blackberry', value: 'blackberry' },
120+
{ label: 'Cherry', value: 'cherry' },
121+
{ label: 'Peach', value: 'peach' },
122+
{ label: 'Pear', value: 'pear' },
123+
{ label: 'Plum', value: 'plum' },
124+
{ label: 'Kiwi', value: 'kiwi' },
125+
{ label: 'Watermelon', value: 'watermelon' },
126+
{ label: 'Cantaloupe', value: 'cantaloupe' },
127+
{ label: 'Honeydew', value: 'honeydew' },
128+
{ label: 'Papaya', value: 'papaya' },
129+
{ label: 'Guava', value: 'guava' },
130+
{ label: 'Lychee', value: 'lychee' },
131+
{ label: 'Pomegranate', value: 'pomegranate' },
132+
{ label: 'Apricot', value: 'apricot' },
133+
{ label: 'Grapefruit', value: 'grapefruit' },
134+
{ label: 'Passionfruit', value: 'passionfruit' },
130135
];

0 commit comments

Comments
 (0)