-
- {t("atypical_presentation_details")}:{" "}
-
- {sampleDetails.atypical_presentation}
+
+
{t("ari")}
+
+ {" "}
+ {yesOrNoBadge(sampleDetails?.has_ari)}
+
- )}
-
- {t("sari")}
- {yesOrNoBadge(sampleDetails?.has_sari)}
-
-
- {t("ari")}
- {yesOrNoBadge(sampleDetails?.has_ari)}
-
-
-
- {t("contact_with_confirmed_carrier")}{" "}
-
- {yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)}
-
-
-
- {t("contact_with_suspected_carrier")}{" "}
-
- {yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)}
-
- {sampleDetails?.patient_travel_history &&
- sampleDetails.patient_travel_history.length !== 0 && (
-
-
- {t("countries_travelled")}:{" "}
-
- {sampleDetails.patient_travel_history}
+
+
+ {t("contact_with_confirmed_carrier")}{" "}
- )}
+
+ {" "}
+ {yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)}
+
+
+
+
+ {t("contact_with_suspected_carrier")}{" "}
+
+
+ {" "}
+ {yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)}
+
+
+ {sampleDetails?.patient_travel_history &&
+ sampleDetails.patient_travel_history.length !== 0 && (
+
+
+ {t("countries_travelled")}:{" "}
+
+
+ {" "}
+ {sampleDetails.patient_travel_history}
+
+
+ )}
+
+
{sampleDetails?.sample_type && (
-
-
+
+
{t("sample_type")}:{" "}
-
- {startCase(camelCase(sampleDetails.sample_type))}
+
+
+ {startCase(camelCase(sampleDetails.sample_type))}
+
)}
{sampleDetails?.sample_type === "OTHER TYPE" && (
-
-
+
+
{t("sample_type_description")}:{" "}
-
- {sampleDetails?.sample_type_other}
+
+
+ {sampleDetails?.sample_type_other}
+
)}
-
+
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000000..99b8f3bbda4
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,43 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-md border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:border-gray-800 dark:focus:ring-gray-300",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-gray-900 text-gray-50 shadow hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80",
+ secondary:
+ "border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
+ destructive:
+ "border-transparent bg-red-500 text-gray-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80",
+ warning:
+ "border-transparent bg-yellow-400 text-gray-900 shadow hover:bg-yellow-500 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-500",
+ outline: "text-gray-950 dark:text-gray-50",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+export interface BadgeProps
+ extends React.HTMLAttributes
,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };