use proper naming conventions inline the breakpoint values so that ty…

…pe-aware autocomplete is available

src/components/Facility/CentralNursingStation.tsx

@@ -40,24 +40,23 @@ interface Props {
 }
 
 export default function CentralNursingStation({ facilityId }: Props) {
-  const breakpointValues = {
+  const perPageLimit = useBreakpoints({
     default: 6,
-    largedisplay: 9,
-    fourK: 24,
-  };
-  const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
+    "4xl": 9,
+    "4k": 24,
+  });
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
-    limit: PER_PAGE_LIMIT,
+    limit: perPageLimit,
   });
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {
       ...qParams,
       page: qParams.page || 1,
-      limit: PER_PAGE_LIMIT,
-      offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT,
+      limit: perPageLimit,
+      offset: (qParams.page ? qParams.page - 1 : 0) * perPageLimit,
       asset_class: "HL7MONITOR",
       ordering: qParams.ordering || "bed__name",
       bed_is_occupied:
@@ -91,7 +90,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           <Pagination
             className=""
             cPage={qParams.page}
-            defaultPerPage={PER_PAGE_LIMIT}
+            defaultPerPage={perPageLimit}
             data={{ totalCount }}
             onChange={(page) => updatePage(page)}
           />
@@ -219,7 +218,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 largedisplay:grid-cols-3 fourk:grid-cols-6">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 4xl:grid-cols-3 4k:grid-cols-6">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor

src/hooks/useBreakpoints.ts

@@ -1,14 +1,6 @@
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
-type Breakpoints =
-  | "sm"
-  | "md"
-  | "lg"
-  | "xl"
-  | "2xl"
-  | "3xl"
-  | "fourK"
-  | "largedisplay";
+type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "4k";
 
 // Ensure that the breakpoint widths are sorted in ascending order.
 const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
@@ -18,8 +10,8 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
   xl: 1280,
   "2xl": 1536,
   "3xl": 1920,
-  largedisplay: 2080,
-  fourK: 3000,
+  "4xl": 2560,
+  "4k": 3840,
 };
 
 /**

tailwind.config.js

@@ -22,8 +22,8 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        largedisplay: "130rem",
-        fourk: "187rem", // rem is used insted of pixel
+        "4xl": "160rem",
+        "4k": "240rem", // rem is used insted of pixel
       },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],