Alexis
a07bd3146e
- Add Tailwind CSS dependencies and configure Vite to use Tailwind - Implement routing with React Router for Landing and Dashboard pages - Remove unused App.css file and refactor App component to utilize new structure - Update global styles in index.css to incorporate Tailwind's utility classes
40 lines
1.2 KiB
React
40 lines
1.2 KiB
React
import { CheckIcon, RefreshIcon } from "../ui/Icons";
|
|
import { Spinner } from "../ui/Spinner";
|
|
|
|
/**
|
|
* Primary action button on the dashboard. Swaps icon + colour scheme
|
|
* depending on the sync lifecycle (idle → loading → success flash).
|
|
*/
|
|
export function SyncButton({ onClick, status = "idle" }) {
|
|
const isLoading = status === "loading";
|
|
const isSuccess = status === "success";
|
|
|
|
const palette = isSuccess
|
|
? "bg-orcid-green-soft text-orcid-green-text border border-orcid-green-border"
|
|
: isLoading
|
|
? "bg-surface-secondary text-ink-secondary border border-surface-border"
|
|
: "bg-brand-primary text-white border border-transparent hover:bg-brand-primary-hover";
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={isLoading}
|
|
className={`inline-flex items-center gap-2 rounded-lg px-[18px] py-2.5 text-sm font-medium transition-colors disabled:cursor-not-allowed ${palette}`}
|
|
>
|
|
{isLoading ? (
|
|
<Spinner size={15} />
|
|
) : isSuccess ? (
|
|
<CheckIcon />
|
|
) : (
|
|
<RefreshIcon />
|
|
)}
|
|
{isLoading
|
|
? "Sincronizando..."
|
|
: isSuccess
|
|
? "Sincronizado"
|
|
: "Sincronizar ahora"}
|
|
</button>
|
|
);
|
|
}
|