import type { ReactNode } from "react";import type { Loadable } from "@executor/react";import { IconSpinner, IconEmpty } from "./icons"; export function LoadableBlock<T>(props: {  loadable: Loadable<T>;  loading?: string;  children: (data: T) => ReactNode;}) {  if (props.loadable.status === "loading") {    return (      <div className="flex h-full min-h-48 items-center justify-center">        <div className="flex items-center gap-3 text-sm text-muted-foreground">          <IconSpinner />          <span>{props.loading ?? "Loading..."}</span>        </div>      </div>    );  }   if (props.loadable.status === "error") {    return (      <div className="flex h-full min-h-48 items-center justify-center">        <div className="rounded-lg border border-destructive/25 bg-destructive/5 px-4 py-3 text-sm text-destructive">          {props.loadable.error.message}        </div>      </div>    );  }   return <>{props.children(props.loadable.data)}</>;} export function EmptyState(props: {  title: string;  description?: string;  className?: string;}) {  return (    <div className={`flex h-full items-center justify-center ${props.className ?? ""}`}>      <div className="text-center">        <IconEmpty className="mx-auto mb-3 text-muted-foreground/20" />        <p className="text-[13px] text-muted-foreground/60">{props.title}</p>        {props.description && (          <p className="mt-1 text-[11px] text-muted-foreground/40">{props.description}</p>        )}      </div>    </div>  );}