aboutsummaryrefslogtreecommitdiff
path: root/components/utils
diff options
context:
space:
mode:
authorflu0r1ne <flu0r1ne@flu0r1ne.net>2023-08-28 21:33:44 -0500
committerflu0r1ne <flu0r1ne@flu0r1ne.net>2023-08-28 21:33:44 -0500
commitf0c03a9b8e15387c4defd0a0e3e0298324406fae (patch)
tree564011d0265666953b17258954ff68614ff6566a /components/utils
parent2f0439621cff059e414d67f6ce43a7a6c4de13bc (diff)
downloadhomepage-f0c03a9b8e15387c4defd0a0e3e0298324406fae.tar.xz
homepage-f0c03a9b8e15387c4defd0a0e3e0298324406fae.zip
Add wg2nd
Diffstat (limited to 'components/utils')
-rw-r--r--components/utils/inputElementStyle.tsx16
-rw-r--r--components/utils/systemProps.tsx107
2 files changed, 123 insertions, 0 deletions
diff --git a/components/utils/inputElementStyle.tsx b/components/utils/inputElementStyle.tsx
new file mode 100644
index 0000000..c784e85
--- /dev/null
+++ b/components/utils/inputElementStyle.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default {
+ backgroundColor: '#fff',
+ border: '1px solid #ced4da',
+ padding: '0.375rem 0.75rem',
+ width: '100%',
+ borderRadius: '0.25rem',
+ resize: 'vertical',
+ fontFamily: 'inherit',
+ margin: '0',
+ display: 'block',
+ fontSize: '1em',
+ boxSizing: 'border-box',
+ lineHeight: '1.5rem',
+} as React.CSSProperties;
diff --git a/components/utils/systemProps.tsx b/components/utils/systemProps.tsx
new file mode 100644
index 0000000..8fc0317
--- /dev/null
+++ b/components/utils/systemProps.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+export type SystemProps = {
+ // Margin
+ mt?: number;
+ mb?: number;
+ ml?: number;
+ mr?: number;
+ mx?: number;
+ my?: number;
+ m?: number;
+
+ // Padding
+ pt?: number;
+ pb?: number;
+ pl?: number;
+ pr?: number;
+ px?: number;
+ py?: number;
+ p?: number;
+
+ // Arbitrary style
+ sx?: React.CSSProperties;
+};
+
+const calculateStyleValue = (multiplier: number, spacer: number = 1): string => {
+ return `${multiplier * spacer}em`;
+};
+
+const getSystemStyle = (
+ systemProps: SystemProps,
+ userStyle: React.CSSProperties = {}
+): React.CSSProperties => {
+ const spacer = 1; // 1em
+
+ let style: React.CSSProperties = {};
+
+ // Margin
+ const { mt, mb, ml, mr, mx, my, m } = systemProps;
+
+ if (m !== undefined) {
+ const value = calculateStyleValue(m, spacer);
+ style.marginTop = value;
+ style.marginBottom = value;
+ style.marginLeft = value;
+ style.marginRight = value;
+ }
+
+ if (mx !== undefined) {
+ const value = calculateStyleValue(mx, spacer);
+ style.marginLeft = value;
+ style.marginRight = value;
+ }
+
+ if (my !== undefined) {
+ const value = calculateStyleValue(my, spacer);
+ style.marginTop = value;
+ style.marginBottom = value;
+ }
+
+ if (mt !== undefined) style.marginTop = calculateStyleValue(mt, spacer);
+ if (mb !== undefined) style.marginBottom = calculateStyleValue(mb, spacer);
+ if (ml !== undefined) style.marginLeft = calculateStyleValue(ml, spacer);
+ if (mr !== undefined) style.marginRight = calculateStyleValue(mr, spacer);
+
+ // Padding
+ const { pt, pb, pl, pr, px, py, p } = systemProps;
+
+ if (p !== undefined) {
+ const value = calculateStyleValue(p, spacer);
+ style.paddingTop = value;
+ style.paddingBottom = value;
+ style.paddingLeft = value;
+ style.paddingRight = value;
+ }
+
+ if (px !== undefined) {
+ const value = calculateStyleValue(px, spacer);
+ style.paddingLeft = value;
+ style.paddingRight = value;
+ }
+
+ if (py !== undefined) {
+ const value = calculateStyleValue(py, spacer);
+ style.paddingTop = value;
+ style.paddingBottom = value;
+ }
+
+ if (pt !== undefined) style.paddingTop = calculateStyleValue(pt, spacer);
+ if (pb !== undefined) style.paddingBottom = calculateStyleValue(pb, spacer);
+ if (pl !== undefined) style.paddingLeft = calculateStyleValue(pl, spacer);
+ if (pr !== undefined) style.paddingRight = calculateStyleValue(pr, spacer);
+
+ // Merge with arbitrary styles (sx)
+ if (systemProps.sx) {
+ style = { ...style, ...systemProps.sx };
+ }
+
+ // Override with user-defined style
+ style = { ...style, ...userStyle };
+
+ return style;
+};
+
+export {
+ getSystemStyle
+};