60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
import "./RemoteItemList.css";
|
|
import { type Component, createSignal } from "solid-js";
|
|
import {
|
|
ItemList,
|
|
type ListItem,
|
|
useDirection,
|
|
useSort,
|
|
} from "#/dev/ItemList.tsx";
|
|
import {
|
|
ArrowNarrowDownIcon,
|
|
ArrowNarrowUpIcon,
|
|
ArrowsSortIcon,
|
|
ChevronDownIcon,
|
|
ReloadIcon,
|
|
} from "#/dev/icons/index.ts";
|
|
|
|
export const RemoteItemList: Component<{
|
|
fetchItems: () => Promise<Array<ListItem>>;
|
|
}> = () => {
|
|
const [items, setItems] = createSignal<Array<ListItem>>([
|
|
{
|
|
label: "foo",
|
|
isActive: false,
|
|
},
|
|
{
|
|
label: "bar",
|
|
isActive: false,
|
|
},
|
|
{
|
|
label: "lol",
|
|
isActive: true,
|
|
},
|
|
]);
|
|
const getSorted = useSort(items());
|
|
const toggleDirection = useDirection();
|
|
|
|
return (
|
|
<div class="remote-item-list">
|
|
<div class="remote-item-list-header">
|
|
<div class="remote-item-list-label" role="button">
|
|
Items
|
|
<ChevronDownIcon />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setItems(getSorted(toggleDirection()));
|
|
}}
|
|
>
|
|
<ArrowsSortIcon />
|
|
</button>
|
|
<button type="button">
|
|
<ReloadIcon />
|
|
</button>
|
|
</div>
|
|
<ItemList items={items} handler={console.log} />
|
|
</div>
|
|
);
|
|
};
|