Add OrderRow component

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