91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { Button } from './ui/button.js';
|
||
|
||
// This modal will ONLY ask for Interest & Meaning.
|
||
function InterestMeaningModal({
|
||
show,
|
||
onClose,
|
||
onSave,
|
||
careerTitle,
|
||
askForInterest, // boolean
|
||
defaultInterest, // number
|
||
defaultMeaning, // number
|
||
}) {
|
||
const [interestValue, setInterestValue] = useState(defaultInterest || 3);
|
||
const [meaningValue, setMeaningValue] = useState(defaultMeaning || 3);
|
||
|
||
// If `defaultInterest` or `defaultMeaning` change while open, reset local state
|
||
useEffect(() => {
|
||
setInterestValue(defaultInterest || 3);
|
||
}, [defaultInterest]);
|
||
|
||
useEffect(() => {
|
||
setMeaningValue(defaultMeaning || 3);
|
||
}, [defaultMeaning]);
|
||
|
||
if (!show) {
|
||
return null; // Do not render anything if show=false
|
||
}
|
||
|
||
const handleSave = () => {
|
||
onSave({
|
||
interest: askForInterest ? interestValue : null,
|
||
meaning: meaningValue,
|
||
});
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-60 bg-black bg-opacity-40 flex items-center justify-center">
|
||
<div className="bg-white p-4 rounded shadow-lg w-full max-w-sm">
|
||
<h2 className="text-xl font-semibold mb-4">
|
||
Add "{careerTitle}" to Comparison
|
||
</h2>
|
||
|
||
{/* If the user is "not sure yet," ask for interest rating */}
|
||
{askForInterest && (
|
||
<div className="mb-4">
|
||
<label className="block font-medium mb-1">
|
||
Your Interest in This Career (1–5)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="5"
|
||
value={interestValue}
|
||
onChange={(e) => setInterestValue(Number(e.target.value))}
|
||
className="w-full border rounded px-3 py-1"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Always ask for meaning rating */}
|
||
<div className="mb-4">
|
||
<label className="block font-medium mb-1">
|
||
How Meaningful is This Career to You? (i.e. how you feel this career's contributions to society rank) (1–5)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="5"
|
||
value={meaningValue}
|
||
onChange={(e) => setMeaningValue(Number(e.target.value))}
|
||
className="w-full border rounded px-3 py-1"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2">
|
||
<Button onClick={onClose} className="bg-gray-300">
|
||
Cancel
|
||
</Button>
|
||
<Button onClick={handleSave} className="bg-blue-600 text-white">
|
||
Save
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default InterestMeaningModal;
|