From 4ff35aff5b2f2b637e0d18ff80908ec8640d0494 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Thu, 2 Jul 2026 22:34:41 +0200
Subject: [PATCH] Add OrderRow component

---
 app/src/components/OrderRow.tsx | 42 +++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 app/src/components/OrderRow.tsx

diff --git a/app/src/components/OrderRow.tsx b/app/src/components/OrderRow.tsx
new file mode 100644
index 0000000..2bcc256
--- /dev/null
+++ b/app/src/components/OrderRow.tsx
@@ -0,0 +1,42 @@
+import type { JSX } from "react";
+import { Pressable, View } from "react-native";
+import { useRouter } from "expo-router";
+import { Typography } from "heroui-native";
+import type { Order } from "@/data/mock";
+import { orderStatusInfo } from "@/lib/status";
+import { StatusChip } from "@/components/StatusChip";
+
+interface OrderRowProps {
+  order: Order;
+}
+
+export function OrderRow({ order }: OrderRowProps): JSX.Element {
+  const router = useRouter();
+  const status = orderStatusInfo(order.status);
+
+  return (
+    <Pressable
+      onPress={() => router.push(`/orders/${order.id}`)}
+      className="flex-row items-center gap-3.5 rounded-xl border border-border bg-surface p-3.5"
+    >
+      <Typography className="text-2xl">{order.emoji}</Typography>
+      <View className="flex-1 gap-0.5">
+        <Typography type="body-sm" weight="semibold" numberOfLines={1}>
+          {order.name}
+        </Typography>
+        <Typography type="body-xs" color="muted">
+          {order.seller}
+        </Typography>
+      </View>
+      <View className="items-end gap-0.5">
+        <Typography type="body-sm" weight="bold">
+          {order.amt}
+        </Typography>
+        <Typography type="body-xs" color="muted">
+          {order.date}
+        </Typography>
+      </View>
+      <StatusChip label={status.label} color={status.color} />
+    </Pressable>
+  );
+}