import { setContributionPrivacy } from "~/fns/contributions";
import type { getContributions } from "~/fns/contributions";
import { useAction } from "~/hooks/use-action";
import { ContributionGraph } from "./ContributionGraph";
import { ContributionDayDetails } from "./ContributionDayDetails";
type Contributions = NonNullable<Awaited<ReturnType<typeof getContributions>>>;
/** Only the account itself sees this: whether visitors get anonymous counts of private contributions. */
function PrivacyToggle({ showPrivate }: { showPrivate: boolean }) {
const action = useAction(setContributionPrivacy);
return (
<label className="ml-auto flex items-center gap-2 text-xs text-kumo-subtle">
<input
type="checkbox"
checked={showPrivate}
disabled={action.pending}
onChange={(event) => void action.run({ data: { showPrivate: event.currentTarget.checked } })}
className="accent-accent-500"
/>
Show private contributions to visitors
{action.error && (
<span role="alert" className="text-kumo-danger">
{action.error}
</span>
)}
</label>
);
}
export function ContributionSection({ owner, contributions }: { owner: string; contributions: Contributions }) {
return (
<div className="space-y-3">
<ContributionGraph
days={contributions.days}
years={contributions.years}
year={contributions.year}
owner={owner}
selected={contributions.detail?.day ?? null}
actions={contributions.isSelf ? <PrivacyToggle showPrivate={contributions.showPrivateToVisitors} /> : null}