feat: deal ids

src/app/deals/components/shared/DealCard/DealCard.module.css

@@ -1,8 +1,6 @@
 
 .container {
-    padding: var(--mantine-spacing-xs);
-    gap: var(--mantine-spacing-xs);
-
+    padding: 0;
     @mixin light {
         background-color: var(--color-light-white-blue);
     }
@@ -11,6 +9,23 @@
     }
 }
 
+.deal-data {
+    padding: var(--mantine-spacing-xs);
+    gap: var(--mantine-spacing-xs);
+}
+
+.deal-id {
+    border-top-right-radius: var(--mantine-radius-md);
+    border-bottom-left-radius: var(--mantine-radius-md);
+    padding-inline: var(--mantine-spacing-xs);
+    @mixin light {
+        background-color: lightblue;
+    }
+    @mixin dark {
+        background-color: var(--color-dark);
+    }
+}
+
 .first-tag {
     @mixin light {
         background-color: lightblue;

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>
     );
 };

src/app/global.css

@@ -6,6 +6,7 @@
     --color-light-aqua: #e0f0f4;
     --color-light-white-blue: #f5fbfc;
     --color-light-whitesmoke: #fcfdff;
+    --color-dark: #1c1c1c;
     --mantine-color-dark-7-5: #212121;
     /* Shadows */
     --light-shadow: 2px 2px 5px darkgray;