feat: paper template customize

packages/webapp/src/containers/ElementCustomize/ElementCustomizeFieldsGroup.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import { FInputGroup, FSwitch, Group, Stack } from '@/components';
+import { CLASSES } from '@/constants';
+import { InputGroupProps, SwitchProps } from '@blueprintjs/core';
+
+export function ElementCustomizeFieldsGroup({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Stack spacing={20}>
+      <h4 className={CLASSES.TEXT_MUTED} style={{ fontWeight: 600 }}>
+        {label}
+      </h4>
+
+      <Stack spacing={14}>{children}</Stack>
+    </Stack>
+  );
+}
+
+export function ElementCustomizeContentItemFieldGroup({
+  inputGroupProps,
+  switchProps,
+}: {
+  inputGroupProps: InputGroupProps;
+  switchProps?: SwitchProps;
+}) {
+  return (
+    <Group spacing={14} position={'apart'}>
+      <FSwitch {...inputGroupProps} fastField />
+
+      {switchProps?.name && (
+        <FInputGroup {...switchProps} style={{ maxWidth: 150 }} fastField />
+      )}
+    </Group>
+  );
+}