import { cx } from "../class-names.ts";
import type { SyncState } from "../store/index.tsx";
import { icon, syncTheme } from "./style.css.ts";
export { syncTheme };
function Icon(props: { variant: SyncState }) {
switch (props.variant) {
case "IDLE": {
return (
);
}
case "AUTHENTICATING":
case "WAITING": {
return (
);
}
case "SYNCING": {
return (
);
}
case "ERROR": {
return (
);
}
case "INACTIVE": {
return (
);
}
default: {
return null;
}
}
}
/**
* Given {@link SyncState}, will render the appropriate matching icon.
*
* You can use {@link syncTheme} to configure its colors. Generally, you would
* do that at the top level in a Vanilla Extract (.css.ts) file
* using `assignVars`.
*
* @example
* ```ts
* globalStyle(":root", {
* vars: assignVars(syncTheme, {
* idle: vars.color.blue,
* inactive: vars.color.gray,
* syncing: vars.color.blue,
* error: vars.color.red,
* }),
* )];
* ```
*
* It is also possible to use inline styles to set the vars if it's necessary.
*/
export function SyncIcon(props: {
status: SyncState;
title?: string;
className?: string;
}) {
const { status, title } = props;
return (
);
}