feat: first commit

src/components/material-manage-popup/index.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@tarojs/components';
+
+import { Popup } from '@taroify/core';
+import { useCallback, useEffect, useState } from 'react';
+
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import Select from '@/components/select';
+import { MaterialStatus } from '@/constants/material';
+import { MaterialProfile } from '@/types/material';
+
+import './index.less';
+
+interface IProps {
+  open: boolean;
+  value: MaterialStatus;
+  onSave: (newValue: MaterialProfile['isOpen']) => void;
+  onClose: () => void;
+}
+
+const PREFIX = 'material-manage-popup';
+const OPTIONS = [
+  { label: '开放', value: MaterialStatus.Open },
+  { label: '关闭', value: MaterialStatus.Close },
+];
+
+function MaterialManagePopup(props: IProps) {
+  const { open, value = MaterialStatus.Open, onSave, onClose } = props;
+  const [currentValue, setCurrentValue] = useState<MaterialStatus>(value);
+
+  const handleSelect = useCallback((v: MaterialStatus) => setCurrentValue(v), []);
+
+  const handleSave = useCallback(() => {
+    onSave(currentValue === MaterialStatus.Open);
+    onClose();
+  }, [currentValue, onSave, onClose]);
+
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  return (
+    <Popup className={`${PREFIX}__popup`} placement="bottom" open={open} onClose={onClose}>
+      <div className={PREFIX}>
+        <div className={`${PREFIX}__header`}>
+          <div className={`${PREFIX}__title`}>模卡开放状态</div>
+          <div className={`${PREFIX}__tips`}>开放模卡给企业查看后，可以获得更多求职机会</div>
+        </div>
+        <Select className={`${PREFIX}__select`} options={OPTIONS} value={currentValue} onSelect={handleSelect} />
+        <Button className={`${PREFIX}__btn`} onClick={handleSave}>
+          保存
+        </Button>
+      </div>
+      <SafeBottomPadding />
+    </Popup>
+  );
+}
+
+export default MaterialManagePopup;