Haystack/frontend/src/components/search-card/SearchCardReceipt.tsx

31 lines
961 B
TypeScript

import { Separator } from "@kobalte/core/separator";
import { IconReceipt } from "@tabler/icons-solidjs";
import type { Receipt } from "../../network/types";
type Props = {
item: Receipt;
};
export const SearchCardReceipt = ({ item }: Props) => {
const { data } = item;
return (
<div class="h-full inset-0 p-3 bg-yellow-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">
{data.orderNumber} - {data.vendor}
</p>
<IconReceipt size={20} class="text-neutral-500 mt-1" />
</div>
<p class="text-xs text-neutral-500">
{data.shippingAddress.address}
</p>
<Separator class="my-2" />
<p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
{data.amount} {data.currency}
</p>
</div>
);
};