71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import topics from "@/resources/topics";
|
|
import {useState} from "react";
|
|
import {BsArrowLeft, BsArrowRight} from "react-icons/bs";
|
|
import Button from "../Low/Button";
|
|
import Modal from "../Modal";
|
|
|
|
interface Props {
|
|
isOpen: boolean;
|
|
initialTopics: string[];
|
|
onClose: VoidFunction;
|
|
selectTopics: (topics: string[]) => void;
|
|
}
|
|
|
|
export default function TopicModal({isOpen, initialTopics, onClose, selectTopics}: Props) {
|
|
const [selectedTopics, setSelectedTopics] = useState([...initialTopics]);
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} title="Preferred Topics">
|
|
<div className="flex flex-col w-full h-full gap-4 mt-4">
|
|
<div className="w-full h-full grid grid-cols-2 -md:gap-1 gap-4">
|
|
<div className="flex flex-col gap-2">
|
|
<span className="border-b border-b-neutral-400/30">Available Topics</span>
|
|
<div className=" max-h-[500px] overflow-y-scroll scrollbar-hide">
|
|
{topics
|
|
.filter((x) => !selectedTopics.includes(x))
|
|
.map((x) => (
|
|
<div key={x} className="odd:bg-mti-purple-ultralight/40 p-2 flex justify-between items-center">
|
|
<span>{x}</span>
|
|
<button
|
|
onClick={() => setSelectedTopics((prev) => [...prev, x])}
|
|
className="border border-mti-purple-light cursor-pointer p-2 rounded-lg bg-white drop-shadow transition ease-in-out duration-300 hover:bg-mti-purple hover:text-white">
|
|
<BsArrowRight />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<span className="border-b border-b-neutral-400/30">Preferred Topics ({selectedTopics.length || "All"})</span>
|
|
<div className=" max-h-[500px] overflow-y-scroll scrollbar-hide">
|
|
{selectedTopics.map((x) => (
|
|
<div key={x} className="odd:bg-mti-purple-ultralight/40 p-2 flex justify-between items-center text-right">
|
|
<button
|
|
onClick={() => setSelectedTopics((prev) => [...prev.filter((y) => y !== x)])}
|
|
className="border border-mti-purple-light cursor-pointer p-2 rounded-lg bg-white drop-shadow transition ease-in-out duration-300 hover:bg-mti-purple hover:text-white">
|
|
<BsArrowLeft />
|
|
</button>
|
|
<span>{x}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full flex gap-4 items-center justify-end">
|
|
<Button variant="outline" color="rose" className="w-full max-w-[200px]" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
className="w-full max-w-[200px]"
|
|
onClick={() => {
|
|
selectTopics(selectedTopics);
|
|
onClose();
|
|
}}>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|