Merged in feat/sw-2874-move-select-rate (pull request #2750)

Approved-by: Joakim Jäderberg

packages/booking-flow/lib/hooks/useBreakpoint.ts

@@ -0,0 +1,27 @@
+import { useMediaQuery } from "usehooks-ts"
+
+type Size = "mobile" | "tablet" | "desktop"
+
+/**
+ * @example
+ * mobile: "max-width: 767px",
+ * tablet: "min-width: 768px and max-width: 1023px",
+ * desktop: "min-width: 1024px",
+ * @param device - The device size to check against.
+ * @returns True if the current viewport matches the specified device size, false otherwise.
+ */
+export const useBreakpoint = (devices: Size | Size[]) => {
+  const deviceArray = Array.isArray(devices) ? devices : [devices]
+  const queries = deviceArray.map((device) => `(${sizeMapping[device]})`)
+  return useMediaQuery(queries.join(", "))
+}
+
+export const useIsMobile = () => useBreakpoint("mobile")
+export const useIsTablet = () => useBreakpoint("tablet")
+export const useIsDesktop = () => useBreakpoint("desktop")
+
+const sizeMapping: Record<Size, string> = {
+  mobile: "max-width: 767px",
+  tablet: "min-width: 768px and max-width: 1023px",
+  desktop: "min-width: 1024px",
+}