All files / packages/app/features/debts-exchange debts-exchange-screen.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
14x
37x
37x
37x
37x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useTranslation } from "react-i18next";
 
import { LoadablePeer } from "~app/components/app/loadable-peer";
import { PageHeader } from "~app/components/page-header";
import { PeerDebtsGroup } from "~app/components/peer-debts-group";
import { getPathHooks } from "~app/utils/navigation";
import { BackLink } from "~components/back-link";
import { ButtonLink } from "~components/link";
 
export const DebtsExchangeScreen = () => {
	const { useParams } = getPathHooks("/_protected/debts/peer/$id/exchange/");
	const { id: peerId } = useParams();
	const { t } = useTranslation("debts");
	return (
		<>
			<PageHeader
				startContent={<BackLink to="/debts/peer/$id" params={{ id: peerId }} />}
				endContent={<LoadablePeer id={peerId} />}
			/>
			<PeerDebtsGroup peerId={peerId} />
			<ButtonLink
				color="primary"
				to="/debts/peer/$id/exchange/all"
				params={{ id: peerId }}
				title={t("exchange.buttons.exchangeAll")}
			>
				{t("exchange.buttons.exchangeAll")}
			</ButtonLink>
			<ButtonLink
				color="primary"
				to="/debts/peer/$id/exchange/specific"
				params={{ id: peerId }}
				isDisabled
				title={t("exchange.buttons.exchangeSpecific")}
			>
				{t("exchange.buttons.exchangeSpecific")}
			</ButtonLink>
		</>
	);
};