added forms and refactored component names

src/components/UI/CardHeader.tsx

@@ -0,0 +1,24 @@
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+
+type CameraOverviewHeaderProps = {
+  title: string;
+  icon: IconProp;
+};
+
+const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
+  return (
+    <div
+      className={clsx(
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6"
+      )}
+    >
+      <FontAwesomeIcon icon={icon} className="size-4" />
+      <h2 className="text-xl">{title}</h2>
+    </div>
+  );
+};
+
+export default CardHeader;