Add section validations

src/app/marketing/create/_components/SectionStep.tsx

@@ -3,16 +3,17 @@ import { TrashIcon } from "@/assets/icons";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import { REGEX } from "@/constants/regex";
 import { FormErrorMessages } from "@/constants/Texts";
 import {
-    Control,
-    FieldErrors,
-    FieldValues,
-    Path,
-    UseFieldArrayAppend,
-    UseFieldArrayRemove,
-    UseFormHandleSubmit,
-    UseFormRegister,
+  Control,
+  FieldErrors,
+  FieldValues,
+  Path,
+  UseFieldArrayAppend,
+  UseFieldArrayRemove,
+  UseFormHandleSubmit,
+  UseFormRegister,
 } from "react-hook-form";
 
 interface IProps<T extends FieldValues> {
@@ -73,7 +74,10 @@ const SectionStep = <T extends FieldValues>({
             placeholder="Enter Section Description"
           />
         </ShowcaseSection>
-        <ShowcaseSection title={`${title} cards`} className="flex flex-col gap-5">
+        <ShowcaseSection
+          title={`${title} cards`}
+          className="flex flex-col gap-5"
+        >
           {fields.map((field, index) => (
             <div
               key={field.id}
@@ -85,12 +89,16 @@ const SectionStep = <T extends FieldValues>({
                     message: FormErrorMessages.required,
                     value: true,
                   },
+                  pattern: {
+                    message: FormErrorMessages.invalidPattern,
+                    value: REGEX.URL,
+                  },
                 })}
                 label="Icon"
                 name={`cards.${index}.icon`}
                 required
                 type="text"
-                placeholder="Enter Icon URL or name"
+                placeholder="Enter Icon URL"
               />
               <InputGroup
                 {...register(`cards.${index}.title` as Path<T>, {

src/components/Tables/contact-us/index.tsx

@@ -1,6 +1,12 @@
 "use client";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
-import { Table, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { useContactUsListPresenter } from "./useContactUsListPresenter";
 
@@ -24,13 +30,15 @@ const ContactUsTable = () => {
           </TableRow>
         </TableHeader>
         {isPending && <TableSkeleton column={columns.length} />}
-        <EmptyListWrapper
-          list={data ?? []}
-          columns={columns}
-          emptyMessage="No contact us is submitted"
-        >
-          Contact us table will be initialized here
-        </EmptyListWrapper>
+        <TableBody>
+          <EmptyListWrapper
+            list={data ?? []}
+            columns={columns}
+            emptyMessage="No contact us is submitted"
+          >
+            Contact us table will be initialized here
+          </EmptyListWrapper>
+        </TableBody>
       </Table>
     </div>
   );