uzairrizwan1 преди 7 месеца
родител
ревизия
a934fadb3c
променени са 4 файла, в които са добавени 1095 реда и са изтрити 4 реда
  1. 1039 4
      myapp/package-lock.json
  2. 1 0
      myapp/package.json
  3. 4 0
      myapp/src/App.js
  4. 51 0
      myapp/src/components/form.js

Файловите разлики са ограничени, защото са твърде много
+ 1039 - 4
myapp/package-lock.json


+ 1 - 0
myapp/package.json

@@ -7,6 +7,7 @@
7 7
     "@testing-library/jest-dom": "^6.6.3",
8 8
     "@testing-library/react": "^16.3.0",
9 9
     "@testing-library/user-event": "^13.5.0",
10
+    "antd": "^5.20.1",
10 11
     "apexcharts": "^4.7.0",
11 12
     "react": "^19.1.0",
12 13
     "react-apexcharts": "^1.7.0",

+ 4 - 0
myapp/src/App.js

@@ -1,12 +1,16 @@
1 1
 // src/App.js
2 2
 import React from "react";
3 3
 import ChartComponent from "./components/ChartComponent";
4
+import FormComponent from "./components/form";
5
+
4 6
 
5 7
 function App() {
6 8
   return (
7 9
     <div className="App">
8 10
       <h1>My Dashboard</h1>
9 11
       <ChartComponent />
12
+      <FormComponent />
13
+
10 14
     </div>
11 15
   );
12 16
 }

+ 51 - 0
myapp/src/components/form.js

@@ -0,0 +1,51 @@
1
+import React, { useState } from 'react';
2
+import { Button, Form, Input, Radio } from 'antd';
3
+
4
+const FormComponent = () => {
5
+  const [form] = Form.useForm();
6
+  const [formLayout, setFormLayout] = useState('horizontal');
7
+
8
+  const onFormLayoutChange = ({ layout }) => {
9
+    setFormLayout(layout);
10
+  };
11
+
12
+  const onFinish = (values) => {
13
+    console.log('Form Submitted:', values); // ✅ Console
14
+    alert(`Form Submitted!\nField A: ${values.fieldA}\nField B: ${values.fieldB}`); // ✅ Alert
15
+  };
16
+
17
+  return (
18
+    <Form
19
+      layout={formLayout}
20
+      form={form}
21
+      initialValues={{ layout: formLayout }}
22
+      onValuesChange={onFormLayoutChange}
23
+      onFinish={onFinish}
24
+      style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
25
+    >
26
+      <Form.Item label="Form Layout" name="layout">
27
+        <Radio.Group value={formLayout}>
28
+          <Radio.Button value="horizontal">Horizontal</Radio.Button>
29
+          <Radio.Button value="vertical">Vertical</Radio.Button>
30
+          <Radio.Button value="inline">Inline</Radio.Button>
31
+        </Radio.Group>
32
+      </Form.Item>
33
+
34
+      <Form.Item label="Field A" name="fieldA">
35
+        <Input placeholder="Enter something" />
36
+      </Form.Item>
37
+
38
+      <Form.Item label="Field B" name="fieldB">
39
+        <Input placeholder="Enter something else" />
40
+      </Form.Item>
41
+
42
+      <Form.Item>
43
+        <Button type="primary" htmlType="submit">
44
+          Submit
45
+        </Button>
46
+      </Form.Item>
47
+    </Form>
48
+  );
49
+};
50
+
51
+export default FormComponent;