openstatus.dev
Openstatus
www.openstatus.dev
✏️ fix formating
+11
-8
+8
-5
apps/web/src/components/marketing/monitor/globe.tsx
+8
-5
apps/web/src/components/marketing/monitor/globe.tsx
···
2
2
3
3
import { useEffect, useRef } from "react";
4
4
import createGlobe from "cobe";
5
-
import { useMediaQuery } from '@/hooks/use-media-query';
5
+
6
+
import { useMediaQuery } from "@/hooks/use-media-query";
6
7
7
8
const SIZE = 350;
8
9
9
10
export function Globe() {
10
11
const canvasRef = useRef<HTMLCanvasElement>(null);
11
-
const prefersReducedMotion = useMediaQuery('((prefers-reduced-motion: reduce))');
12
+
const prefersReducedMotion = useMediaQuery(
13
+
"((prefers-reduced-motion: reduce))",
14
+
);
12
15
13
16
useEffect(() => {
14
17
let phi = 0;
···
45
48
// Called on every animation frame.
46
49
// `state` will be an empty object, return updated params.
47
50
if (!prefersReducedMotion) {
48
-
state.phi = phi;
49
-
phi += 0.003;
50
-
}
51
+
state.phi = phi;
52
+
phi += 0.003;
53
+
}
51
54
},
52
55
});
53
56
+3
-3
apps/web/src/hooks/use-media-query.ts
+3
-3
apps/web/src/hooks/use-media-query.ts
···
1
-
import { useEffect, useState } from 'react';
1
+
import { useEffect, useState } from "react";
2
2
3
3
type MediaQuery = string | number;
4
4
···
16
16
setMatches(mediaQueryList.matches);
17
17
18
18
// Add listener for changes
19
-
mediaQueryList.addEventListener('change', handleChange);
19
+
mediaQueryList.addEventListener("change", handleChange);
20
20
21
21
// Clean up listener on unmount
22
22
return () => {
23
-
mediaQueryList.removeEventListener('change', handleChange);
23
+
mediaQueryList.removeEventListener("change", handleChange);
24
24
};
25
25
}, [query]);
26
26