tag stuff

src/common/StatusChip.tsx

@@ -0,0 +1,20 @@
+import { Chip, Tooltip } from "@mui/material";
+import { getStatusHelper } from "pbHelpers/Status";
+
+interface Props {
+  status: string;
+  size?: "small" | "medium";
+}
+
+export default function StatusChip(props: Props) {
+  const { status, size } = props;
+  const statusHelper = getStatusHelper(status);
+  const icon = statusHelper.icon;
+  const description = statusHelper.description;
+
+  return icon !== null ? (
+    <Tooltip title="Your most recent changes will be synced to the device as soon as possible">
+      <Chip variant="outlined" label={description} icon={icon} size={size} />
+    </Tooltip>
+  ) : null;
+}