mirror of
https://github.com/EFForg/rayhunter.git
synced 2026-05-30 16:59:26 -07:00
b8b90268b9
* adds breakpoint stores to allow selective rendering on screen size * removes unused type * formatting
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
// stores/breakpoint.ts
|
|
import { readable, type Readable } from 'svelte/store';
|
|
import { breakpoints } from '../../theme';
|
|
|
|
type Breakpoint = keyof typeof breakpoints;
|
|
|
|
// Store that tracks if a specific breakpoint matches
|
|
export function createBreakpointStore(breakpoint: Breakpoint): Readable<boolean> {
|
|
return readable<boolean>(false, (set) => {
|
|
const width = breakpoints[breakpoint];
|
|
const mediaQuery = window.matchMedia(`(min-width: ${width})`);
|
|
|
|
// Set initial value
|
|
set(mediaQuery.matches);
|
|
|
|
// Update on change
|
|
const handler = (e: MediaQueryListEvent) => set(e.matches);
|
|
mediaQuery.addEventListener('change', handler);
|
|
|
|
// Cleanup
|
|
return () => mediaQuery.removeEventListener('change', handler);
|
|
});
|
|
}
|
|
|
|
// Create stores for each breakpoint
|
|
export const screenIsSmUp: Readable<boolean> = createBreakpointStore('sm');
|
|
export const screenIsMdUp: Readable<boolean> = createBreakpointStore('md');
|
|
export const screenIsLgUp: Readable<boolean> = createBreakpointStore('lg');
|
|
export const screenIsXlUp: Readable<boolean> = createBreakpointStore('xl');
|