/
getMargin.ts
37 lines (31 loc) · 1.13 KB
/
getMargin.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import type { Props } from "../types";
const getMarginValue = (margin: string | number): string =>
typeof margin === "number" ? `${margin}px` : margin;
const getMargin = (margin: Props["margin"]): { vars: object; classes: string[] } => {
if (typeof margin === "number" || typeof margin === "string")
return {
vars: { "--text-margin": getMarginValue(margin) },
classes: ["m-[var(--text-margin)]"],
};
const { top, bottom, left, right } = margin || {};
const cssVar = {};
const marginClasses: string[] = ["m-0"];
if (top) {
marginClasses.push("mt-[var(--text-margin-top)]");
cssVar["--text-margin-top"] = getMarginValue(top);
}
if (bottom) {
marginClasses.push("mb-[var(--text-margin-bottom)]");
cssVar["--text-margin-bottom"] = getMarginValue(bottom);
}
if (left) {
marginClasses.push("ml-[var(--text-margin-left)]");
cssVar["--text-margin-left"] = getMarginValue(left);
}
if (right) {
marginClasses.push("mr-[var(--text-margin-right)]");
cssVar["--text-margin-right"] = getMarginValue(right);
}
return { vars: cssVar, classes: marginClasses };
};
export default getMargin;