diff --git a/apps/portal/src/components/questions/AddToListDropdown.tsx b/apps/portal/src/components/questions/AddToListDropdown.tsx new file mode 100644 index 00000000..d95c3751 --- /dev/null +++ b/apps/portal/src/components/questions/AddToListDropdown.tsx @@ -0,0 +1,89 @@ +import { forwardRef, Fragment, useEffect, useRef, useState } from 'react'; +import { Menu, Transition } from '@headlessui/react'; +import { CheckIcon, HeartIcon } from '@heroicons/react/20/solid'; + +import { lists } from '~/pages/questions/lists'; + +function classNames(...classes: Array) { + return classes.filter(Boolean).join(' '); +} + +export default function AddToListDropdown() { + const [menuOpened, setMenuOpened] = useState(false); + const ref = useRef() as React.MutableRefObject; + + const addClickOutsideListener = () => { + document.addEventListener('click', handleClickOutside, true); + }; + + const handleClickOutside = (event: MouseEvent) => { + if (!ref.current.contains(event.target as Node)) { + setMenuOpened(false); + document.removeEventListener('click', handleClickOutside, true); + } + }; + + const CustomMenuButton = ({ children }: any) => ( + + ); + + return ( + +
+ + +
+ + + + {menuOpened && ( + <> + {lists.map((list) => ( +
+ + {({ active }) => ( + + )} + +
+ ))} + + )} +
+
+
+ ); +} diff --git a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx index ca9f676e..058b5184 100644 --- a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx +++ b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx @@ -11,6 +11,7 @@ import { Button } from '@tih/ui'; import { useQuestionVote } from '~/utils/questions/useVote'; +import AddToListDropdown from '../../AddToListDropdown'; import type { CreateQuestionEncounterData } from '../../forms/CreateQuestionEncounterForm'; import CreateQuestionEncounterForm from '../../forms/CreateQuestionEncounterForm'; import QuestionAggregateBadge from '../../QuestionAggregateBadge'; @@ -79,7 +80,16 @@ type CreateEncounterProps = showCreateEncounterButton?: false; }; +type AddToListProps = + | { + showAddToList: true; + } + | { + showAddToList?: false; + }; + export type BaseQuestionCardProps = ActionButtonProps & + AddToListProps & AnswerStatisticsProps & CreateEncounterProps & DeleteProps & @@ -117,6 +127,7 @@ export default function BaseQuestionCard({ showHover, onReceivedSubmit, showDeleteButton, + showAddToList, onDelete, truncateContent = true, }: BaseQuestionCardProps) { @@ -135,12 +146,17 @@ export default function BaseQuestionCard({ )}
-
+

{timestamp}

+ {showAddToList && ( +
+ +
+ )}
{showActionButton && (