From c78c88a9ee212d73a20ffc9cd9887be6f17c801d Mon Sep 17 00:00:00 2001
From: Andre Landgraf <andre.timo.landgraf@gmail.com>
Date: Fri, 22 Jul 2022 16:17:56 -0700
Subject: [PATCH] add documentation for custom item component

---
 .../remix-demo/app/routes/custom-options.tsx  | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 tests/remix-demo/app/routes/custom-options.tsx

diff --git a/tests/remix-demo/app/routes/custom-options.tsx b/tests/remix-demo/app/routes/custom-options.tsx
new file mode 100644
index 0000000..9cc3962
--- /dev/null
+++ b/tests/remix-demo/app/routes/custom-options.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import type { LinksFunction } from 'remix';
+import { Item } from '../combobox';
+import { DatalistInput, useComboboxControls } from '../combobox';
+
+import comboboxStyles from '../combobox.css';
+
+export const links: LinksFunction = () => {
+  return [{ rel: 'stylesheet', href: comboboxStyles }];
+};
+
+type CustomItem = Item & {
+  description: string;
+};
+
+const items: Array<CustomItem> = [
+  { id: 'Chocolate', value: 'Chocolate', description: 'Chocolate is delicious' },
+  { id: 'Coconut', value: 'Coconut', description: 'Coconut is tasty but watch your head!' },
+  { id: 'Mint', value: 'Mint', description: 'Mint is a herb?' },
+  { id: 'Strawberry', value: 'Strawberry', description: 'Strawberries are red' },
+  { id: 'Vanilla', value: 'Vanilla', description: 'Vanilla is a flavor' },
+];
+
+const CustomItem = ({ item }: { item: CustomItem }) => {
+  // already wrapped in <li></li>, so we don't have to do that here
+  return (
+    <div style={{ display: 'flex', gap: '5px', flexDirection: 'column' }}>
+      <b>{item.value}</b>
+      <span>{item.description}</span>
+    </div>
+  );
+};
+
+export default function Index() {
+  const customItems = useMemo(
+    () =>
+      items.map((item) => ({
+        ...item,
+        node: <CustomItem item={item} />,
+      })),
+    [],
+  );
+
+  return (
+    <div
+      style={{
+        fontFamily: 'system-ui, sans-serif',
+        lineHeight: '1.4',
+        width: '100%',
+        marginTop: '10vh',
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '500px' }}>
+        <DatalistInput
+          label={<div>Custom Label</div>}
+          placeholder="Chocolate"
+          items={customItems}
+          onSelect={(i) => console.log(i)}
+        />
+      </div>
+    </div>
+  );
+}