RefreshableList

import { useState } from "react";
import { Button, List, RefreshableList, Text, Toggle, VStack } from "@/ohmygui";

export default function Example() {
  const [version, setVersion] = useState(1);
  const [enabled, setEnabled] = useState(true);
  const [failNext, setFailNext] = useState(false);

  return (
    <VStack gap="md" align="stretch">
      <Toggle label="Sync enabled" checked={enabled} onChange={(event) => setEnabled(event.currentTarget.checked)} />
      <Button size="sm" variant="outline" onClick={() => setFailNext(true)} disabled={failNext}>Make next sync fail</Button>
      <RefreshableList enabled={enabled} refreshLabel="Sync workspaces" onRefresh={async () => {
        await new Promise((resolve) => setTimeout(resolve, 400));
        if (failNext) { setFailNext(false); throw new Error("Sync failed"); }
        setVersion((value) => value + 1);
      }}>
        <List density="compact" items={[`Spring field guide · sync ${version}`, "Planting calendar · published"]} render={(item) => <Text>{item}</Text>} />
      </RefreshableList>
    </VStack>
  );
}