mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-10 07:25:35 +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 { useCallback } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { BsThreeDotsVertical } from 'react-icons/bs';
|
import { BsThreeDotsVertical } from 'react-icons/bs';
|
||||||
|
import { FaRegEye } from 'react-icons/fa';
|
||||||
import { GoPencil } from 'react-icons/go';
|
import { GoPencil } from 'react-icons/go';
|
||||||
import { IoTrashOutline } from 'react-icons/io5';
|
import { IoTrashOutline } from 'react-icons/io5';
|
||||||
import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
|
import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
|
||||||
import useActiveCollection from '~/hooks/use_active_collection';
|
import useActiveCollection from '~/hooks/use_active_collection';
|
||||||
import useCollections from '~/hooks/use_collections';
|
import useCollections from '~/hooks/use_collections';
|
||||||
import { onFavorite } from '~/lib/favorite';
|
import { onFavorite } from '~/lib/favorite';
|
||||||
import { appendLinkId } from '~/lib/navigation';
|
import { appendCollectionId, appendLinkId } from '~/lib/navigation';
|
||||||
import { Link } from '~/types/app';
|
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 { collections, setCollections } = useCollections();
|
||||||
const { setActiveCollection } = useActiveCollection();
|
const { setActiveCollection } = useActiveCollection();
|
||||||
const { t } = useTranslation('common');
|
const { t } = useTranslation('common');
|
||||||
@@ -51,6 +59,16 @@ export default function LinkControls({ link }: { link: Link }) {
|
|||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
</Menu.Target>
|
</Menu.Target>
|
||||||
<Menu.Dropdown>
|
<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
|
<Menu.Item
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
onFavorite(link.id, !link.favorite, onFavoriteCallback)
|
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 { ExternalLinkStyled } from '~/components/common/external_link_styled';
|
||||||
|
import LinkControls from '~/components/dashboard/link/link_controls';
|
||||||
import LinkFavicon from '~/components/dashboard/link/link_favicon';
|
import LinkFavicon from '~/components/dashboard/link/link_favicon';
|
||||||
import { LinkWithCollection } from '~/types/app';
|
import { LinkWithCollection } from '~/types/app';
|
||||||
import styles from './favorite_item.module.css';
|
import styles from './favorite_item.module.css';
|
||||||
|
|
||||||
export const FavoriteItem = ({
|
export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
|
||||||
link: { name, url, collection },
|
|
||||||
}: {
|
|
||||||
link: LinkWithCollection;
|
|
||||||
}) => (
|
|
||||||
<Card className={styles.linkWrapper} radius="sm" withBorder>
|
<Card className={styles.linkWrapper} radius="sm" withBorder>
|
||||||
<Group justify="center" gap="xs">
|
<Group justify="center" gap="xs">
|
||||||
<LinkFavicon size={32} url={url} />
|
<LinkFavicon size={32} url={link.url} />
|
||||||
<ExternalLinkStyled href={url} style={{ flex: 1 }}>
|
<ExternalLinkStyled href={link.url} style={{ flex: 1 }}>
|
||||||
<div className={styles.linkName}>
|
<div className={styles.linkName}>
|
||||||
<Text lineClamp={1}>{name} </Text>
|
<Text lineClamp={1}>{link.name} </Text>
|
||||||
</div>
|
</div>
|
||||||
<Text c="gray" size="xs" lineClamp={1}>
|
<Text c="gray" size="xs" mb={4} lineClamp={1}>
|
||||||
{collection.name}
|
{link.collection.name}
|
||||||
</Text>
|
</Text>
|
||||||
</ExternalLinkStyled>
|
</ExternalLinkStyled>
|
||||||
|
<LinkControls link={link} showGoToCollection />
|
||||||
</Group>
|
</Group>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user