+ {applicationData.step.replace(/_/g, ' ').toLowerCase()} +
+ ++ {applicationData.title} +
++ {applicationData.address_name} +
++ {applicationData.duration_of_days} Days After +
+diff --git a/src/assets/icons/RightArrowIcon.svg b/src/assets/icons/RightArrowIcon.svg
new file mode 100644
index 00000000..4773e4c9
--- /dev/null
+++ b/src/assets/icons/RightArrowIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/Application/ApplicationCard.tsx b/src/components/Application/ApplicationCard.tsx
new file mode 100644
index 00000000..39d68c7e
--- /dev/null
+++ b/src/components/Application/ApplicationCard.tsx
@@ -0,0 +1,89 @@
+import RightArrowIcon from '@/assets/icons/RightArrowIcon.svg?react';
+import Tag from '@/components/Common/Tag';
+import { APPLICATION_STEP } from '@/constants/application';
+import {
+ AppicationItemType,
+ ApplicationStepType,
+} from '@/types/application/applicationItem';
+import { useNavigate } from 'react-router-dom';
+
+const statusStyler = (status: ApplicationStepType) => {
+ switch (status) {
+ case APPLICATION_STEP.APPLICATION_SUCCESS:
+ return 'bg-[#C7C6F6]';
+ case APPLICATION_STEP.RESUME_REJECTED:
+ return 'bg-[#FFC6C0]';
+ case APPLICATION_STEP.APPLICATION_REJECTED:
+ return 'bg-[#FFC6C0]';
+ case APPLICATION_STEP.PENDING:
+ return 'bg-[#BDBDBD]';
+ default:
+ return 'bg-[#FEF387]';
+ }
+};
+
+type ApplicationCardType = {
+ applicationData: AppicationItemType;
+};
+
+const ApplicationCard = ({ applicationData }: ApplicationCardType) => {
+ const navigate = useNavigate();
+
+ return (
+
+ {applicationData.step.replace(/_/g, ' ').toLowerCase()}
+
+ {applicationData.address_name}
+
+ {applicationData.duration_of_days} Days After
+
+ {applicationData.title}
+
+
Profile picture has been changed.
}