jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
samuel.fm
1import React from 'react'
2
3import {type Breakpoint, useBreakpoints} from '#/alf/breakpoints'
4import * as tokens from '#/alf/tokens'
5
6type Gutter = 'compact' | 'base' | 'wide' | 0
7
8const gutters: Record<
9 Exclude<Gutter, 0>,
10 Record<Breakpoint | 'default', number>
11> = {
12 compact: {
13 default: tokens.space.sm,
14 gtPhone: tokens.space.sm,
15 gtMobile: tokens.space.md,
16 gtTablet: tokens.space.md,
17 },
18 base: {
19 default: tokens.space.lg,
20 gtPhone: tokens.space.lg,
21 gtMobile: tokens.space.xl,
22 gtTablet: tokens.space.xl,
23 },
24 wide: {
25 default: tokens.space.xl,
26 gtPhone: tokens.space.xl,
27 gtMobile: tokens.space._3xl,
28 gtTablet: tokens.space._3xl,
29 },
30}
31
32type Gutters = {
33 paddingTop: number
34 paddingRight: number
35 paddingBottom: number
36 paddingLeft: number
37}
38
39export function useGutters([all]: [Gutter]): Gutters
40export function useGutters([vertical, horizontal]: [Gutter, Gutter]): Gutters
41export function useGutters([top, right, bottom, left]: [
42 Gutter,
43 Gutter,
44 Gutter,
45 Gutter,
46]): Gutters
47export function useGutters([top, right, bottom, left]: Gutter[]) {
48 const {activeBreakpoint} = useBreakpoints()
49 if (right === undefined) {
50 right = bottom = left = top
51 } else if (bottom === undefined) {
52 bottom = top
53 left = right
54 }
55 return React.useMemo(() => {
56 return {
57 paddingTop: top === 0 ? 0 : gutters[top][activeBreakpoint || 'default'],
58 paddingRight:
59 right === 0 ? 0 : gutters[right][activeBreakpoint || 'default'],
60 paddingBottom:
61 bottom === 0 ? 0 : gutters[bottom][activeBreakpoint || 'default'],
62 paddingLeft:
63 left === 0 ? 0 : gutters[left][activeBreakpoint || 'default'],
64 }
65 }, [activeBreakpoint, top, right, bottom, left])
66}