2022-08-30 00:24:32 +00:00
|
|
|
import React from 'react';
|
2022-09-02 11:43:37 +00:00
|
|
|
|
2022-08-30 00:24:32 +00:00
|
|
|
import { P, Button } from 'loot-design/src/components/common';
|
2022-09-02 11:43:37 +00:00
|
|
|
|
2022-04-29 02:44:38 +00:00
|
|
|
import { Standalone, Title, useMinimized } from './common';
|
2022-09-02 14:07:24 +00:00
|
|
|
import Navigation from './Navigation';
|
2022-04-29 02:44:38 +00:00
|
|
|
|
|
|
|
function CategoryBalance({ targetRect, navigationProps }) {
|
2022-07-17 10:28:05 +00:00
|
|
|
let [minimized, toggle] = useMinimized();
|
2022-04-29 02:44:38 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Standalone>
|
|
|
|
<Title>Tracking categories</Title>
|
|
|
|
{!minimized && (
|
|
|
|
<P isLast={true}>
|
|
|
|
If you categorized any expenses, the budget has updated to show the
|
|
|
|
amount spent in those categories and the new balance.
|
|
|
|
</P>
|
|
|
|
)}
|
|
|
|
<Navigation
|
|
|
|
{...navigationProps}
|
|
|
|
leftContent={
|
|
|
|
<Button bare onClick={toggle}>
|
|
|
|
{minimized ? 'Show more' : 'Show less'}
|
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</Standalone>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default CategoryBalance;
|