fe changes like edit, preview and ordering done

src/constants/card-data.json

@@ -0,0 +1 @@
+[]

src/index.scss

@@ -8,27 +8,26 @@ body {
   color: #424242;
 }
 
-#root,.MuiModal-root {
+#root,
+.MuiModal-root {
   .primary-btn {
     background-color: #FF7222;
     color: white;
     font-weight: 600;
     padding: 10px 35px;
     text-transform: capitalize;
-    &:hover{
+
+    &:hover {
       background-color: #FF7222;
     }
   }
+
   .secondary-btn {
     background-color: transparent;
-    color: #FF7222 ;
+    color: #FF7222;
     font-weight: 600;
-    padding: 10px 35px ;
+    padding: 10px 35px;
     text-transform: capitalize;
-    border-color: #FF7222;
-    &:hover{
-      border-color: #FF7222;
-    }
+    border: 1px solid #FF7222 !important;
   }
-}
-
+}

src/interfaces/card-data.ts

@@ -0,0 +1,10 @@
+export interface CardDataJson {
+    id: string;
+    title: string;
+    description: string;
+    action: string;
+    active: boolean;
+    order: number;
+}
+
+export { }

src/interfaces/index.ts

@@ -1 +1,2 @@
-export * from "./heroCard";
+export * from "./heroCard";
+export * from './card-data';

src/pages/home/components/add-card-data-form/add-card-data-form.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
+import cardJson from '../../../../constants/card-data.json';
+import { useUploadSomeDataMutation } from '../../../../redux/slices/home';
+
+
+
+
+// -----------------------------------------------------------------------------------------------------------------------
+
+
+const AddCardDataForm = ({ onClose, onAddData }: { onClose: () => void; onAddData: (data: any) => void }) => {
+    const initialFormData = {
+        title: '',
+        description: '',
+        order: '',
+        active: false,
+        action: ''
+    };
+
+    const [formData, setFormData] = useState(initialFormData);
+    const [uploadSomeData] = useUploadSomeDataMutation();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const generatedId = Date.now();
+        const newDataItem = { id: generatedId, ...formData };
+        const newData = [...cardJson, newDataItem];
+
+        console.log(newData);
+        setFormData(initialFormData);
+        const payload = {
+            // create a payload for submitting form
+        }
+
+        try {
+            await uploadSomeData({ payload: payload });
+
+            // show some toast or snackbar message for success
+
+            // Success, so close the modal
+            onClose();
+
+        } catch (error) {
+            console.log('error while adding form data', error);
+        } finally {
+            // incase if loader used, stop it here
+        }
+
+        onAddData(newDataItem);
+        onClose();
+    };
+
+
+
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData((prevData) => ({ ...prevData, [name]: value }));
+    };
+
+    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, checked } = e.target;
+        setFormData((prevData) => ({ ...prevData, [name]: checked }));
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <h2 style={{ marginTop: 0 }}>Add Item</h2>
+
+            <TextField
+                sx={{ width: '100%', marginBottom: 2 }}
+                id="outlined-basic"
+                label="Title"
+                variant="outlined"
+                name="title"
+                value={formData.title}
+                onChange={handleInputChange}
+            />
+            <TextField
+                sx={{ width: '100%', marginBottom: 2 }}
+                id="outlined-basic"
+                label="Description"
+                variant="outlined"
+                name="description"
+                value={formData.description}
+                onChange={handleInputChange}
+            />
+
+            <TextField
+                sx={{ width: '100%', marginBottom: 2 }}
+                id="outlined-basic"
+                label="Button Url"
+                variant="outlined"
+                name="action"
+                value={formData.action}
+                onChange={handleInputChange}
+                inputProps={{
+                    type: 'url',
+                }}
+            />
+
+            <TextField
+                sx={{ width: '100%', marginBottom: 2 }}
+                id="outlined-basic"
+                label="Order"
+                variant="outlined"
+                name="order"
+                value={formData.order}
+                onChange={handleInputChange}
+                inputProps={{
+                    type: 'number',
+                }}
+            />
+
+            <FormControlLabel
+                sx={{ marginBottom: 2, width: '100%' }}
+                control={
+                    <Checkbox
+                        checked={formData.active || false}
+                        onChange={handleCheckboxChange}
+                        name="active"
+                    />
+                }
+                label="Active"
+            />
+
+            <Button variant="contained" className="primary-btn" type="submit" color="success">
+                Add Data
+            </Button>
+
+            <Button
+                variant="outlined"
+                className="secondary-btn"
+                type="button"
+                sx={{ ml: 2 }}
+                onClick={onClose}
+                color="success"
+            >
+                Close
+            </Button>
+        </form>
+    );
+};
+
+export default AddCardDataForm;

src/pages/home/components/add-carousel-form/add-carousel-form.tsx

@@ -118,7 +118,7 @@ const AddCarousalForm = ({ onClose, onAddData }: { onClose: () => void; onAddDat
             <h2 style={{ marginTop: 0 }}>Add Item</h2>
 
             <Grid container className={styles.uploadBtn} justifyContent="flex-between">
-                <Grid xs={4}>
+                <Grid item xs={4}>
                     <Button
                         component="label"
                         sx={{ marginBottom: 2 }}
@@ -129,7 +129,7 @@ const AddCarousalForm = ({ onClose, onAddData }: { onClose: () => void; onAddDat
                     </Button>
                 </Grid>
 
-                <Grid xs={8}>
+                <Grid item xs={8}>
                     {imagePreviewUrl && (
                         <img src={imagePreviewUrl} alt='uploaded img preview' style={{ height: '120px', objectFit: 'contain', borderRadius: 6 }} />
                     )}

src/pages/home/components/card-data-added/card-data-added.module.scss

@@ -0,0 +1,68 @@
+.cardDataMain {
+    display: flex;
+    align-items: end;
+    align-items: center;
+    width: 100%;
+
+    .cardDataBody {
+        padding: 15px;
+        display: flex;
+        gap: 20px;
+        background: white;
+        border-radius: 6px;
+        margin: 10px 0;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+
+        .cardBodyInfo {
+            width: 100%;
+
+            .cardDataEditBtn {
+                position: absolute;
+                right: 0;
+                top: 0;
+                transition: .4s;
+                transform: translateY(-50px);
+            }
+
+            &:hover .cardDataEditBtn {
+                transform: translateY(0px);
+            }
+
+            h5 {
+                margin-top: 0;
+            }
+
+            img {
+                border-radius: 6px;
+                height: 100px;
+                object-fit: cover;
+            }
+
+            .cardDataLinkBtn {
+                width: 100%;
+                display: flex;
+                justify-content: end;
+
+                a {
+                    background-color: transparent;
+                    border: 2px solid #FF7222;
+                    color: #FF7222;
+                    border-radius: 20px;
+                    height: 35px;
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+}
+
+.no_data_state {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    opacity: 0.6;
+}