WIP

2025-12-29 16:56:00 +01:00
parent 323b7fbd33
commit 74d22d425d
14 changed files with 315 additions and 8 deletions
@@ -0,0 +1,59 @@
+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>
+	);
+};