uzairrizwan1 vor 1 Jahr
Ursprung
Commit
a934fadb3c
4 geänderte Dateien mit 1049 neuen und 0 gelöschten Zeilen
  1. 993 0
      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

Datei-Diff unterdrückt, da er zu groß ist
+ 993 - 0
myapp/package-lock.json


+ 1 - 0
myapp/package.json

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

+ 4 - 0
myapp/src/App.js

@@ -1,12 +1,16 @@
 // src/App.js
 import React from "react";
 import ChartComponent from "./components/ChartComponent";
+import FormComponent from "./components/form";
+
 
 function App() {
   return (
     <div className="App">
       <h1>My Dashboard</h1>
       <ChartComponent />
+      <FormComponent />
+
     </div>
   );
 }

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Button, Form, Input, Radio } from 'antd';
+
+const FormComponent = () => {
+  const [form] = Form.useForm();
+  const [formLayout, setFormLayout] = useState('horizontal');
+
+  const onFormLayoutChange = ({ layout }) => {
+    setFormLayout(layout);
+  };
+
+  const onFinish = (values) => {
+    console.log('Form Submitted:', values); // ✅ Console
+    alert(`Form Submitted!\nField A: ${values.fieldA}\nField B: ${values.fieldB}`); // ✅ Alert
+  };
+
+  return (
+    <Form
+      layout={formLayout}
+      form={form}
+      initialValues={{ layout: formLayout }}
+      onValuesChange={onFormLayoutChange}
+      onFinish={onFinish}
+      style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
+    >
+      <Form.Item label="Form Layout" name="layout">
+        <Radio.Group value={formLayout}>
+          <Radio.Button value="horizontal">Horizontal</Radio.Button>
+          <Radio.Button value="vertical">Vertical</Radio.Button>
+          <Radio.Button value="inline">Inline</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+
+      <Form.Item label="Field A" name="fieldA">
+        <Input placeholder="Enter something" />
+      </Form.Item>
+
+      <Form.Item label="Field B" name="fieldB">
+        <Input placeholder="Enter something else" />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default FormComponent;

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.