18 | {/* Card Header */}
19 |
35 | );
36 | };
37 |
38 | export default ComponentCard;
39 |
--------------------------------------------------------------------------------
/src/components/common/GridShape.tsx:
--------------------------------------------------------------------------------
1 | export default function GridShape() {
2 | return (
3 | <>
4 |
20 |
29 |
30 | {/* Card Body */}
31 | 21 | {title} 22 |
23 | {desc && ( 24 |25 | {desc} 26 |
27 | )} 28 |
32 |
34 | {children}
33 |
5 | 
6 |
7 |
6 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/common/PageBreadCrumb.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router";
2 |
3 | interface BreadcrumbProps {
4 | pageTitle: string;
5 | }
6 |
7 | const PageBreadcrumb: React.FC
9 |
10 |
48 | );
49 | };
50 |
51 | export default PageBreadcrumb;
52 |
--------------------------------------------------------------------------------
/src/components/common/PageMeta.tsx:
--------------------------------------------------------------------------------
1 | import { HelmetProvider, Helmet } from "react-helmet-async";
2 |
3 | const PageMeta = ({
4 | title,
5 | description,
6 | }: {
7 | title: string;
8 | description: string;
9 | }) => (
10 | 14 | {pageTitle} 15 |
16 | 47 |
12 | {/* */}
13 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/form/Form.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode, FormEvent } from "react";
2 |
3 | interface FormProps {
4 | onSubmit: (event: FormEvent
14 |
33 | {/* */}
34 |
35 | {/* */}
36 |
15 |
17 |
18 |
19 |
28 |
31 |
32 |
20 |
21 | Customers
22 |
23 |
27 | 24 | 3,782 25 |
26 |
37 |
56 | {/* */}
57 |
38 |
40 |
41 |
51 |
54 |
55 |
42 |
43 | Orders
44 |
45 |
49 |
50 | 46 | 5,359 47 |
48 |
45 | {label && }
46 |
47 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/form/form-elements/CheckboxComponents.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import ComponentCard from "../../common/ComponentCard";
3 | import Checkbox from "../input/Checkbox";
4 |
5 | export default function CheckboxComponents() {
6 | const [isChecked, setIsChecked] = useState(false);
7 | const [isCheckedTwo, setIsCheckedTwo] = useState(true);
8 | const [isCheckedDisabled, setIsCheckedDisabled] = useState(false);
9 | return (
10 |
48 |
53 |
54 |
55 |
58 |
12 |
34 |
13 |
18 |
19 |
25 |
26 |
33 |
16 |
17 |
19 |
20 |
52 |
21 |
22 |
33 |
23 |
28 |
29 |
32 |
34 |
35 |
{" "}
42 |
43 |
44 |
51 |
34 | {/* Error Input */}
35 |
71 |
36 |
37 |
45 |
46 |
47 | {/* Success Input */}
48 |
49 |
50 |
58 |
59 |
60 | {/* Disabled Input */}
61 |
62 |
63 |
69 |
70 |
14 |
40 |
28 |
49 |
29 |
30 |
36 |
37 |
38 | setSelectedValues(values)}
43 | />
44 |
48 | 45 | Selected Values: {selectedValues.join(", ")} 46 |
47 |
12 | {/* Default TextArea */}
13 |
14 |
15 |