change content to be shown in new line, init custom css

aghontpi · Oct 29, 2021 · 18c7218 · 18c7218
1 parent ae4fbd9
commit 18c7218
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/src/Components/BodyAttributes.tsx b/src/Components/BodyAttributes.tsx
@@ -76,6 +76,9 @@ const BodyAttributes = () => {
       <div className="props-container">
         <AddCustomFonts />
       </div>
+
+      <Title title="Custom CSS" />
+      <div className="props-container"></div>
     </BodyContainer>
   );
 };

diff --git a/src/Components/Mods/Content.tsx b/src/Components/Mods/Content.tsx
@@ -1,5 +1,5 @@
 import { useVisibility } from '../../Hooks/Attribute.hook';
-import { Form, Input } from 'antd';
+import { Col, Form, Input, Row } from 'antd';
 import { useEditor } from '../../Hooks/Editor.hook';
 import { ChangeEvent, useEffect, useState } from 'react';
 import _ from 'lodash';
@@ -54,18 +54,25 @@ export const Content = () => {
   };
 
   return visible ? (
-    <Form.Item label="Content">
-      {htmlBlock ? (
-        <Input.TextArea rows={28} onChange={handleChange} value={value} />
-      ) : (
-        <Input.TextArea
-          disabled={isReadOnly ? isReadOnly : false}
-          readOnly={isReadOnly ? isReadOnly : false}
-          rows={3}
-          onChange={handleChange}
-          value={value}
-        />
-      )}
+    <Form.Item>
+      <Row gutter={[0, 8]}>
+        <Col span={24}>
+          <span className="ant-form-item-label">Content:</span>
+        </Col>
+        <Col span={24}>
+          {htmlBlock ? (
+            <Input.TextArea rows={28} onChange={handleChange} value={value} />
+          ) : (
+            <Input.TextArea
+              disabled={isReadOnly ? isReadOnly : false}
+              readOnly={isReadOnly ? isReadOnly : false}
+              rows={3}
+              onChange={handleChange}
+              value={value}
+            />
+          )}
+        </Col>
+      </Row>
     </Form.Item>
   ) : null;
 };
diff --git a/src/Components/Mods/CustomCss.tsx b/src/Components/Mods/CustomCss.tsx
@@ -0,0 +1,20 @@
+import { Form, Row, Col, Input } from 'antd';
+import { useState } from 'react';
+
+const CustomCss = () => {
+  const [value, setValue] = useState('');
+  const handleChange = (e) => {};
+
+  <Form.Item>
+    <Row gutter={[0, 8]}>
+      <Col span={24}>
+        <span className="ant-form-item-label">Content:</span>
+      </Col>
+      <Col span={24}>
+        <Input.TextArea rows={3} onChange={handleChange} value={value} />
+      </Col>
+    </Row>
+  </Form.Item>;
+};
+
+export { CustomCss };