Make the AutoViewForm look nicer

Author: mythz

src/components/AutoViewForm.tsx

@@ -163,7 +163,17 @@ const AutoViewForm: React.FC<AutoViewFormProps & AutoViewFormSlots> = (props) =>
                 <p className={`notes ${subHeadingClass}`} dangerouslySetInnerHTML={{ __html: metaType.notes }} />
               )}
             </div>
-            <MarkupModel value={model} />
+            <MarkupModel
+              value={model}
+              tableClass="border-separate border-spacing-y-1"
+              basicTrClass="group"
+              basicThClass="py-2 px-4 text-left text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 rounded-l-md"
+              basicTdClass="py-2 px-4 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 rounded-r-md"
+              complexTitleTrClass="group"
+              complexTitleTdClass="py-2 px-4 text-sm font-semibold bg-indigo-600 dark:bg-indigo-700 text-white rounded-md"
+              complexBodyTrClass="group"
+              complexBodyTdClass="py-2 px-4 bg-white dark:bg-gray-900 rounded-md"
+            />
           </div>
         </div>
       ) : (
@@ -190,7 +200,19 @@ const AutoViewForm: React.FC<AutoViewFormProps & AutoViewFormSlots> = (props) =>
                             </div>
                           </div>
                         </div>
-                        <MarkupModel value={model} />
+                        <div className="">
+                          <MarkupModel
+                            value={model}
+                            tableClass="w-full border-separate border-spacing-y-1"
+                            basicTrClass="group"
+                            basicThClass="py-1 px-4 text-left text-sm font-medium text-gray-700 dark:text-gray-300"
+                            basicTdClass="py-1 px-4 text-sm text-gray-900"
+                            complexTitleTrClass="group"
+                            complexTitleTdClass="py-1 px-4 font-semibold bg-indigo-600 dark:bg-indigo-700 text-white"
+                            complexBodyTrClass="group"
+                            complexBodyTdClass="py-1 px-4 bg-white dark:bg-gray-900"
+                          />
+                        </div>
                       </div>
                     </div>
                     <div className={form.buttonsClass}>

src/components/MarkupModel.tsx

@@ -28,25 +28,25 @@ export default function MarkupModel(props: MarkupModelProps) {
     }, [value])
 
     return (
-        <table className="my-2 w-full">
+        <table className={props.tableClass ?? "my-2 w-full"}>
             <tbody>
                 {Object.entries(basic).map(([k, v]) => (
-                    <tr key={k} className="leading-7">
-                        <th className="px-2 text-left align-top">{humanize(k)}</th>
-                        <td className="align-top">
+                    <tr key={k} className={props.basicTrClass ?? "leading-7"}>
+                        <th className={props.basicThClass ?? "px-2 text-left align-top"}>{humanize(k)}</th>
+                        <td className={props.basicTdClass ?? "align-top"}>
                             <MarkupFormat value={v} />
                         </td>
                     </tr>
                 ))}
                 {Object.entries(complex).map(([k, v]) => (
                     <React.Fragment key={k}>
-                        <tr className="my-2 leading-7">
-                            <td colSpan={2} className="px-2 bg-indigo-700 text-white">
+                        <tr className={props.complexTitleTrClass ?? "my-2 leading-7"}>
+                            <th colSpan={2} className={props.complexTitleTdClass ?? "px-2 bg-indigo-700 text-white"}>
                                 {humanize(k)}
-                            </td>
+                            </th>
                         </tr>
-                        <tr className="leading-7">
-                            <td colSpan={2} className="px-2 align-top">
+                        <tr className={props.complexBodyTrClass ?? "leading-7"}>
+                            <td colSpan={2} className={props.complexBodyTdClass ?? "px-2 align-top"}>
                                 <MarkupFormat value={v} />
                             </td>
                         </tr>

src/components/types.ts

@@ -467,6 +467,14 @@ export interface MarkupFormatProps {
 export interface MarkupModelProps {
   value: any,
   imageClass?: string
+  tableClass?: string
+  basicTrClass?: string
+  basicThClass?: string
+  basicTdClass?: string
+  complexTitleTrClass?: string
+  complexTitleTdClass?: string
+  complexBodyTrClass?: string
+  complexBodyTdClass?: string
 }
 
 // Additional Components