From 3dec614f2a1aa80cc913b6b16fd34c45c7dfa4d6 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Fri, 29 Aug 2025 14:01:40 +0400
Subject: [PATCH] feat: deal ids

---
 .../shared/DealCard/DealCard.module.css       | 21 ++++++++++--
 .../components/shared/DealCard/DealCard.tsx   | 34 +++++++++++++------
 src/app/global.css                            |  1 +
 .../layout/Navbar/Navbar.module.css           |  9 +++++
 src/components/layout/Navbar/Navbar.tsx       |  3 +-
 5 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/app/deals/components/shared/DealCard/DealCard.module.css b/src/app/deals/components/shared/DealCard/DealCard.module.css
index fc7b602..fef50ef 100644
--- a/src/app/deals/components/shared/DealCard/DealCard.module.css
+++ b/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;
diff --git a/src/app/deals/components/shared/DealCard/DealCard.tsx b/src/app/deals/components/shared/DealCard/DealCard.tsx
index f38fb63..d3accd1 100644
--- a/src/app/deals/components/shared/DealCard/DealCard.tsx
+++ b/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>
     );
 };
diff --git a/src/app/global.css b/src/app/global.css
index 647ca84..bfcb68e 100644
--- a/src/app/global.css
+++ b/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;
diff --git a/src/components/layout/Navbar/Navbar.module.css b/src/components/layout/Navbar/Navbar.module.css
index 7936c1b..026a267 100644
--- a/src/components/layout/Navbar/Navbar.module.css
+++ b/src/components/layout/Navbar/Navbar.module.css
@@ -1,3 +1,12 @@
+.background {
+    @mixin light {
+        background-color: var(--color-light-gray-blue);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}
+
 .link {
     width: 100%;
     height: rem(50px);
diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx
index 9c1eec6..5e6c97a 100644
--- a/src/components/layout/Navbar/Navbar.tsx
+++ b/src/components/layout/Navbar/Navbar.tsx
@@ -4,6 +4,7 @@ import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
 import Logo from "@/components/ui/Logo/Logo";
 import NavbarLinks from "./NavbarLinks";
+import styles from "./Navbar.module.css";
 
 const linksData = [
     {
@@ -20,7 +21,7 @@ const linksData = [
 
 const Navbar = () => {
     return (
-        <Box style={{ backgroundColor: "var(--color-light-gray-blue)" }}>
+        <Box className={styles.background}>
             <PageBlock
                 style={{
                     marginBlock: "var(--mantine-spacing-md)",