Production Build Working

src/components/IdCardSelector.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import classnames from 'classnames';
+import { useState } from 'react';
+import EmployerMemberSelect from './EmployerMemberSelect';
+import IdCardViewer from './IdCardViewer';
+import IdCardDownloader from './IdCardDownloader';
+
+interface IdCardSelectorProps {
+  role: string;
+  roleId: string;
+  name: string;
+}
+
+const IdCardSelector: React.FC<IdCardSelectorProps> = ({ role, roleId, name }) => {
+  const [selectedEmployer, setSelectedEmployer] = useState<string | null>(null);
+  const [selectedMember, setSelectedMember] = useState<string | null>(null);
+
+  const handleSelectedEmployer = (plPlanKey: string): void => {
+    setSelectedMember(null);
+    setSelectedEmployer(null);
+    setSelectedEmployer(plPlanKey);
+  };
+
+  const handleSelectedMember = (pbEntityKey: string): void => {
+    setSelectedEmployer(null);
+    setSelectedMember(null);
+    setSelectedMember(pbEntityKey);
+  };
+
+  return (
+    <div className={classnames("w-full flex flex-col px-2 text-lg")}>
+        <EmployerMemberSelect
+            onSelectionCompleteEmployer={handleSelectedEmployer}
+            onSelectionCompleteMember={handleSelectedMember}
+            userRole={role}
+            roleId={roleId}
+            employerName={name}
+            employerAllButtonText={"Generate All"}
+        />
+        {selectedMember && (
+          <IdCardViewer 
+            cardLaout='FullPageCard'
+            pbEntityKey={selectedMember}
+            autoFetchCard
+          />
+        )}
+        {selectedEmployer && (
+          <IdCardDownloader 
+            plPlanKey={selectedEmployer}
+            autoFetchCard
+          />
+        )}
+    </div>
+  );
+}
+
+export default IdCardSelector;