mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-08 22:53:25 +00:00
feat: use link action dropdown for favorite links
This commit is contained in:
@@ -4,16 +4,24 @@ import { ActionIcon, Menu } from '@mantine/core';
|
||||
import { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { BsThreeDotsVertical } from 'react-icons/bs';
|
||||
import { FaRegEye } from 'react-icons/fa';
|
||||
import { GoPencil } from 'react-icons/go';
|
||||
import { IoTrashOutline } from 'react-icons/io5';
|
||||
import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
|
||||
import useActiveCollection from '~/hooks/use_active_collection';
|
||||
import useCollections from '~/hooks/use_collections';
|
||||
import { onFavorite } from '~/lib/favorite';
|
||||
import { appendLinkId } from '~/lib/navigation';
|
||||
import { appendCollectionId, appendLinkId } from '~/lib/navigation';
|
||||
import { Link } from '~/types/app';
|
||||
|
||||
export default function LinkControls({ link }: { link: Link }) {
|
||||
interface LinksControlsProps {
|
||||
link: Link;
|
||||
showGoToCollection?: boolean;
|
||||
}
|
||||
export default function LinkControls({
|
||||
link,
|
||||
showGoToCollection = false,
|
||||
}: LinksControlsProps) {
|
||||
const { collections, setCollections } = useCollections();
|
||||
const { setActiveCollection } = useActiveCollection();
|
||||
const { t } = useTranslation('common');
|
||||
@@ -51,6 +59,16 @@ export default function LinkControls({ link }: { link: Link }) {
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{showGoToCollection && (
|
||||
<Menu.Item
|
||||
component={InertiaLink}
|
||||
href={appendCollectionId(route('dashboard').url, link.collectionId)}
|
||||
leftSection={<FaRegEye />}
|
||||
color="blue"
|
||||
>
|
||||
{t('go-to-collection')}
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item
|
||||
onClick={() =>
|
||||
onFavorite(link.id, !link.favorite, onFavoriteCallback)
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
import { Card, Group, Text } from '@mantine/core'; // Import de Mantine
|
||||
import { Card, Group, Text } from '@mantine/core';
|
||||
import { ExternalLinkStyled } from '~/components/common/external_link_styled';
|
||||
import LinkControls from '~/components/dashboard/link/link_controls';
|
||||
import LinkFavicon from '~/components/dashboard/link/link_favicon';
|
||||
import { LinkWithCollection } from '~/types/app';
|
||||
import styles from './favorite_item.module.css';
|
||||
|
||||
export const FavoriteItem = ({
|
||||
link: { name, url, collection },
|
||||
}: {
|
||||
link: LinkWithCollection;
|
||||
}) => (
|
||||
export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
|
||||
<Card className={styles.linkWrapper} radius="sm" withBorder>
|
||||
<Group justify="center" gap="xs">
|
||||
<LinkFavicon size={32} url={url} />
|
||||
<ExternalLinkStyled href={url} style={{ flex: 1 }}>
|
||||
<LinkFavicon size={32} url={link.url} />
|
||||
<ExternalLinkStyled href={link.url} style={{ flex: 1 }}>
|
||||
<div className={styles.linkName}>
|
||||
<Text lineClamp={1}>{name} </Text>
|
||||
<Text lineClamp={1}>{link.name} </Text>
|
||||
</div>
|
||||
<Text c="gray" size="xs" lineClamp={1}>
|
||||
{collection.name}
|
||||
<Text c="gray" size="xs" mb={4} lineClamp={1}>
|
||||
{link.collection.name}
|
||||
</Text>
|
||||
</ExternalLinkStyled>
|
||||
<LinkControls link={link} showGoToCollection />
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user