mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 06:53:12 +00:00
a3e8a533b1
- api.ts: use ky v2 hook object args, prefix (not prefixUrl), and normalizeApiRequestError - replace react-router-dom with react-router in layout, topbar, and vendor-pos view - move MUI style props (justifyContent, alignItems, flexWrap, display, fontWeight) into sx - resource-list-table/query-key: use local types instead of missing work-order-list module
36 lines
990 B
TypeScript
36 lines
990 B
TypeScript
import { Box, Typography } from "@mui/material";
|
|
|
|
type DetailFieldHighlight = "green" | "yellow" | "red";
|
|
|
|
type DetailFieldProps = {
|
|
label: string;
|
|
value: string;
|
|
className?: string;
|
|
highlight?: DetailFieldHighlight | "";
|
|
};
|
|
|
|
export function DetailField({ label, value, className, highlight }: DetailFieldProps) {
|
|
const colorClass =
|
|
highlight === "green"
|
|
? "text-green-600"
|
|
: highlight === "yellow"
|
|
? "text-yellow-600"
|
|
: highlight === "red"
|
|
? "text-red-600"
|
|
: undefined;
|
|
|
|
return (
|
|
<Box className={className}>
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
|
|
{label}
|
|
</Typography>
|
|
<Typography variant="body2" className={colorClass}>
|
|
{value}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function DetailFieldGrid({ children }: { children: React.ReactNode }) {
|
|
return <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">{children}</Box>;
|
|
}
|