arayaroma/ether/react-component-composition

export function Card({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'outlined' }) {
  return <div className={`card card-${variant}`}>{children}</div>;
}
export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>;
}
// <Card><CardHeader>Title</CardHeader></Card>

const TabsContext = createContext<{ activeTab: string; setActiveTab: (t: string) => void } | undefined>(undefined);
export function Tabs({ children, defaultTab }: { children: React.ReactNode; defaultTab: string }) {
  const [activeTab, setActiveTab] = useState(defaultTab);
  return <TabsContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabsContext.Provider>;
}
export function Tab({ id, children }: { id: string; children: React.ReactNode }) {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error('Tab must be used within Tabs');
  return (
    <button className={ctx.activeTab === id ? 'active' : ''} onClick={() => ctx.setActiveTab(id)}>
      {children}
    </button>
  );
}

export function DataLoader<T>({ url, children }: { url: string; children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode }) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    fetch(url).then((r) => r.json()).then(setData).catch(setError).finally(() => setLoading(false));
  }, [url]);
  return <>{children(data, loading, error)}</>;
}