Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 6x 120x 177x 211x 211x 211x 211x | import type React from "react";
import { useFormat } from "~app/hooks/use-format";
import { useLocale } from "~app/hooks/use-locale";
import type { DebtIntention as DebtIntentionType } from "~app/trpc-types";
import { formatCurrency } from "~app/utils/currency";
import { Card } from "~components/card";
import { Icon } from "~components/icons";
import { ButtonLink } from "~components/link";
import { Skeleton } from "~components/skeleton";
import { Text } from "~components/text";
import type { ViewReactNode } from "~components/view";
import { View } from "~components/view";
export const SkeletonDebtIntention: React.FC<{ children?: ViewReactNode }> = ({
children,
}) => (
<Card bodyClassName="gap-4">
<View className="flex-row gap-2">
<Skeleton className="h-6 w-20 rounded-md" />
<Skeleton className="h-6 w-28 rounded-md" />
</View>
<View className="flex-row items-center gap-2">
<Skeleton className="h-6 w-20 rounded-md" />
</View>
<View className="flex-row justify-between">
<View className="flex-row gap-1">
<Icon name="sync" className="size-6" />
<Skeleton className="h-6 w-32 rounded-md" />
</View>
<View className="hidden md:flex">{children}</View>
</View>
<View className="self-end md:hidden">{children}</View>
</Card>
);
type Props = {
intention: DebtIntentionType;
children?: ViewReactNode;
testID?: string;
};
export const DebtIntention: React.FC<Props> = ({
intention,
children,
testID,
}) => {
const { formatPlainDate, formatZonedDateTime } = useFormat();
const locale = useLocale();
const intentionDataComponent = (
<View className="flex-row gap-2">
<Text className={intention.amount >= 0 ? "text-success" : "text-danger"}>
{formatCurrency(
locale,
intention.currencyCode,
Math.abs(intention.amount),
)}
</Text>
<Text>{formatPlainDate(intention.timestamp)}</Text>
</View>
);
return (
<Card bodyClassName="gap-4" testID={testID}>
{intention.current ? (
<View className="flex-col gap-2 sm:flex-row">
<View className="flex-row gap-2">
<Text
className={
intention.current.amount >= 0 ? "text-success" : "text-danger"
}
>
{formatCurrency(
locale,
intention.current.currencyCode,
Math.abs(intention.current.amount),
)}
</Text>
<Text>{formatPlainDate(intention.current.timestamp)}</Text>
</View>
<Icon name="arrow-right" className="size-6" />
{intentionDataComponent}
</View>
) : (
intentionDataComponent
)}
<View className="flex-row items-center gap-2">
{intention.receiptId ? (
<ButtonLink
to="/receipts/$id"
params={{ id: intention.receiptId }}
variant="bordered"
color="primary"
isIconOnly
size="sm"
>
<Icon name="receipt" className="size-5" />
</ButtonLink>
) : null}
<Text>{intention.note}</Text>
</View>
<View className="flex-row justify-between">
<View className="flex-row gap-1">
<Icon name="sync" className="size-6" />
<Text>{formatZonedDateTime(intention.updatedAt)}</Text>
</View>
<View className="hidden md:flex">{children}</View>
</View>
<View className="self-end md:hidden">{children}</View>
</Card>
);
};
|