Basket confirmation page

lib/components/basket_item_card.dart

@@ -34,7 +34,7 @@ class BasketItemCard extends StatelessWidget {
         ),
         child: Card(
           elevation: 4,
-          color: const Color(0xFFF2F3F9),
+          color: Theme.of(context).scaffoldBackgroundColor,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(30),
           ),

lib/components/history_item_card.dart

@@ -40,7 +40,7 @@ class HistoryItemCard extends StatelessWidget {
         ),
         child: Card(
           elevation: 4,
-          color: const Color(0xFFF2F3F9),
+          color: Theme.of(context).scaffoldBackgroundColor,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(30),
           ),

lib/components/order_confirm_item_card.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+
+class OrderConfirmItemCard extends StatelessWidget {
+  final String name;
+  final int count;
+  final double price;
+  final Image image;
+
+  const OrderConfirmItemCard({
+    super.key,
+    required this.name,
+    required this.count,
+    required this.price,
+    required this.image,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding:
+          const EdgeInsetsDirectional.symmetric(horizontal: 10, vertical: 10),
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(minHeight: 130),
+        child: Card(
+          elevation: 4,
+          color: Theme.of(context).scaffoldBackgroundColor,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(30),
+          ),
+          child: Padding(
+            padding: const EdgeInsetsDirectional.symmetric(horizontal: 20),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    image,
+                    const SizedBox(width: 20),
+                    Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(
+                          name,
+                          style: Theme.of(context).textTheme.bodyLarge,
+                        ),
+                        Text('\$$price x $count = \$${price * count}'),
+                      ],
+                    )
+                  ],
+                ),
+                MarkdownBody(data: '# X$count')
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}