1 files changed, 21 insertions, 0 deletions
diff --git a/src/alf/util/useGutterStyles.ts b/src/alf/util/useGutterStyles.ts
new file mode 100644
index 000000000..64b246fdd
--- /dev/null
+++ b/src/alf/util/useGutterStyles.ts
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf'
+
+export function useGutterStyles({
+  top,
+  bottom,
+}: {
+  top?: boolean
+  bottom?: boolean
+} = {}) {
+  const {gtMobile} = useBreakpoints()
+  return React.useMemo<ViewStyleProp['style']>(() => {
+    return [
+      a.px_lg,
+      top && a.pt_md,
+      bottom && a.pb_md,
+      gtMobile && [a.px_xl, top && a.pt_lg, bottom && a.pb_lg],
+    ]
+  }, [gtMobile, top, bottom])
+}