feat: deal ids

src/app/deals/components/shared/DealCard/DealCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Pill, Stack, Text } from "@mantine/core";
+import { Box, Card, Group, Pill, Stack, Text } from "@mantine/core";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import { DealSchema } from "@/lib/client";
@@ -20,16 +20,30 @@ const DealCard = ({ deal }: Props) => {
         <Card
             onClick={onClick}
             className={styles.container}>
-            <Text c={"dodgerblue"}>{deal.name}</Text>
-            <Stack gap={0}>
-                <Text>Wb электросталь</Text>
-                <Text>19 000 руб.</Text>
-                <Text>130 тов.</Text>
-            </Stack>
-            <Group gap={"xs"}>
-                <Pill className={styles["first-tag"]}>Срочно</Pill>
-                <Pill className={styles["second-tag"]}>Бесплатно</Pill>
+            <Group
+                justify={"space-between"}
+                ml={"xs"}
+                align={"start"}>
+                <Text
+                    c={"dodgerblue"}
+                    mt={"xs"}>
+                    {deal.name}
+                </Text>
+                <Box className={styles["deal-id"]}>
+                    <Text>ID: {deal.id}</Text>
+                </Box>
             </Group>
+            <Stack className={styles["deal-data"]}>
+                <Stack gap={0}>
+                    <Text>Wb электросталь</Text>
+                    <Text>19 000 руб.</Text>
+                    <Text>130 тов.</Text>
+                </Stack>
+                <Group gap={"xs"}>
+                    <Pill className={styles["first-tag"]}>Срочно</Pill>
+                    <Pill className={styles["second-tag"]}>Бесплатно</Pill>
+                </Group>
+            </Stack>
         </Card>
     );
 };