feat(demo): add code example for submit button (#1356)

* fix: add code example

* fix: update translation message

Author: lamdiki-sherpa

apps/demo/src/Views/Ui/components/SubmitButton.tsx

@@ -1,18 +1,71 @@
 import { useTranslation } from "@dzangolab/react-i18n";
 import { Page, SubmitButton } from "@dzangolab/react-ui";
+import { TDataTable } from "@dzangolab/react-ui";
 
-import { Section } from "../../../components/Demo";
+import { CodeBlock, Section } from "../../../components/Demo";
+
+const data = [
+  {
+    id: 1,
+    prop: "disabled",
+    type: "boolean",
+    description: "If true, the button will be disabled and non-interactive.",
+  },
+  {
+    id: 2,
+    prop: "label",
+    type: "string",
+    description: "Text to be displayed in the button.",
+  },
+  {
+    id: 3,
+    prop: "loading",
+    type: "boolean",
+    description:
+      "If true, indicates that the button is in a loading state and disables user interaction.",
+  },
+];
 
 export const SubmitButtonDemo = () => {
   const [t] = useTranslation("ui");
 
   return (
     <Page title={t("submitButton.title")}>
-      <Section>
+      <Section title={t("headers.usage")}>
+        <p>{t("common.usage", { component: "SubmitButton" })}</p>
+        <CodeBlock exampleCode="import { SubmitButton } from '@dzangolab/react-ui';" />
+      </Section>
+      <Section title={t("submitButton.usage.basic")}>
         <SubmitButton label="Submit" />
+        <CodeBlock exampleCode="<SubmitButton label='Submit'/>" />
       </Section>
-      <Section>
+      <Section title={t("submitButton.usage.loading")}>
         <SubmitButton label="Submit loading" loading />
+        <CodeBlock exampleCode="<SubmitButton label='Submit loading' loading/>" />
+      </Section>
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "SubmitButtonProperties",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: "Properties",
+            },
+            {
+              accessorKey: "type",
+              header: "Type",
+            },
+            {
+              accessorKey: "description",
+              header: "Description",
+            },
+          ]}
+          data={data}
+          paginated={false}
+        />
       </Section>
     </Page>
   );

apps/demo/src/locales/en/ui.json

@@ -115,7 +115,11 @@
     "title": "Responsive menu"
   },
   "submitButton": {
-    "title": "Submit button"
+    "title": "Submit button",
+    "usage": {
+      "basic": "Basic",
+      "loading": "Loading"
+    }
   },
   "youtubeFacade": {
     "title": "Youtube facade"

apps/demo/src/locales/fr/ui.json

@@ -115,7 +115,11 @@
     "title": "Responsive menu (fr)"
   },
   "submitButton": {
-    "title": "Submit button (fr)"
+    "title": "Submit button (fr)",
+    "usage": {
+      "basic": "Basic (fr)",
+      "loading": "Loading (fr)"
+    }
   },
   "youtubeFacade": {
     "title": "Youtube facade (fr)"