File size: 1,985 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import { type FC } from 'react';
import { CrossCircledIcon } from '@radix-ui/react-icons';
import { useBookmarkContext } from '~/Providers/BookmarkContext';
import { BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
import { useLocalize } from '~/hooks';
const BookmarkNavItems: FC<{
tags: string[];
setTags: (tags: string[]) => void;
}> = ({ tags = [], setTags }) => {
const { bookmarks } = useBookmarkContext();
const localize = useLocalize();
const getUpdatedSelected = (tag: string) => {
if (tags.some((selectedTag) => selectedTag === tag)) {
return tags.filter((selectedTag) => selectedTag !== tag);
} else {
return [...tags, tag];
}
};
const handleSubmit = (tag?: string) => {
if (tag === undefined) {
return;
}
const updatedSelected = getUpdatedSelected(tag);
setTags(updatedSelected);
return;
};
const clear = () => {
setTags([]);
return;
};
if (bookmarks.length === 0) {
return (
<div className="flex flex-col">
<BookmarkItem
tag={localize('com_ui_clear_all')}
data-testid="bookmark-item-clear"
handleSubmit={clear}
selected={false}
icon={<CrossCircledIcon className="size-4" />}
/>
<BookmarkItem
tag={localize('com_ui_no_bookmarks')}
data-testid="bookmark-item-no-bookmarks"
handleSubmit={() => Promise.resolve()}
selected={false}
icon={'🤔'}
/>
</div>
);
}
return (
<div className="flex flex-col">
<BookmarkItems
tags={tags}
handleSubmit={handleSubmit}
header={
<BookmarkItem
tag={localize('com_ui_clear_all')}
data-testid="bookmark-item-clear"
handleSubmit={clear}
selected={false}
icon={<CrossCircledIcon className="size-4" />}
/>
}
/>
</div>
);
};
export default BookmarkNavItems;
|