diff --git a/src/components/OrderItem/OrderItem.tsx b/src/components/OrderItem/OrderItem.tsx index ab12485..92e7041 100644 --- a/src/components/OrderItem/OrderItem.tsx +++ b/src/components/OrderItem/OrderItem.tsx @@ -3,7 +3,7 @@ import { Td, Tr, Link, Select } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; import dayjs from 'dayjs'; -import { getTimeSlot } from '../../lib/date-helpers'; +import { getTimeSlot } from '../../lib'; const statuses = [ 'pending' as const, @@ -26,6 +26,16 @@ export type OrderProps = { location?: string; }; +type Status = (typeof statuses)[number]; + +const statusColors: Record = { + pending: 'yellow.100', + progress: 'blue.100', + working: 'orange.100', + canceled: 'red.100', + complete: 'green.100', +}; + const OrderItem = ({ carNumber, startWashTime, @@ -40,6 +50,7 @@ const OrderItem = ({ }); const [statusSelect, setStatus] = useState(status); + const bgColor = statusColors[statusSelect]; return ( @@ -51,6 +62,7 @@ const OrderItem = ({ value={statusSelect} onChange={(e) => setStatus(e.target.value as OrderProps['status'])} placeholder={t(`status.placeholder`)} + bg={bgColor} > {statuses.map((status) => (