feat: displaying and sorting groups of deals

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

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { Stack, Text } from "@mantine/core";
+import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
+import GroupWithDealsSchema from "@/types/GroupWithDealsSchema";
+import styles from "./DealsGroup.module.css";
+
+type Props = {
+    group: GroupWithDealsSchema;
+};
+
+const DealsGroup: FC<Props> = ({ group }) => {
+    return (
+        <Stack
+            className={styles["group-container"]}
+            gap={"xs"}
+            bdrs={"lg"}
+            p={"xs"}>
+            <Text mx={"xs"}>{group.name}</Text>
+            {group.items.map(deal => (
+                <DealCard
+                    deal={deal}
+                    isInGroup
+                    key={deal.id}
+                />
+            ))}
+        </Stack>
+    );
+};
+
+export default DealsGroup;