feat: first commit

src/components/job-manage-card/index.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+
+import { PageUrl } from '@/constants/app';
+import { JOB_MANAGE_STATUS_TITLE_MAP, JobManageStatus } from '@/constants/job';
+import { JobManageInfo } from '@/types/job';
+import { getJobLocation } from '@/utils/job';
+import { navigateTo } from '@/utils/route';
+
+import './index.less';
+
+interface IProps {
+  data: JobManageInfo;
+  className?: string;
+}
+
+const PREFIX = 'job-manage-card';
+
+const STATUS_CLASS_MAP = {
+  [JobManageStatus.WaitVerify]: 'pending',
+  [JobManageStatus.Open]: 'open',
+  [JobManageStatus.Pending]: 'pending',
+  [JobManageStatus.Error]: 'error',
+  [JobManageStatus.Close]: 'close',
+  [JobManageStatus.Expire]: 'close',
+};
+
+function JobManageCard(props: IProps) {
+  const { data = {} } = props;
+  const { id, title, status } = data as JobManageInfo;
+
+  const handleClick = useCallback(() => {
+    navigateTo(PageUrl.JobDetail, { id });
+  }, [id]);
+
+  return (
+    <div className={PREFIX} onClick={handleClick}>
+      <div className={`${PREFIX}__info`}>
+        <div className={`${PREFIX}__info__title`}>{title}</div>
+        <div className={`${PREFIX}__info__location`}>{getJobLocation(data as JobManageInfo)}</div>
+      </div>
+      <div className={classNames(`${PREFIX}__status`, { [STATUS_CLASS_MAP[status]]: true })}>
+        <div>{JOB_MANAGE_STATUS_TITLE_MAP[status]}</div>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(JobManageCard);