mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-09 23:15:36 +00:00
feat: add multiple way to show collections and links
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { route } from '@izzyjs/route/client';
|
||||
import { Text } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TbStar, TbStarFilled } from 'react-icons/tb';
|
||||
import { useActiveCollection } from '~/hooks/collections/use_active_collection';
|
||||
import classes from './collection_item.module.css';
|
||||
|
||||
export function CollectionFavoriteItem() {
|
||||
const { t } = useTranslation();
|
||||
const activeCollection = useActiveCollection();
|
||||
const isActiveCollection = !activeCollection?.id;
|
||||
const FolderIcon = isActiveCollection ? TbStarFilled : TbStar;
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={isActiveCollection || undefined}
|
||||
href={route('dashboard').path}
|
||||
key="favorite"
|
||||
title="Favorite"
|
||||
>
|
||||
<FolderIcon className={classes.linkIcon} />
|
||||
<Text maw={'200px'} style={{ wordBreak: 'break-all' }}>
|
||||
{t('favorite')}
|
||||
</Text>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -8,11 +8,11 @@ import { appendCollectionId } from '~/lib/navigation';
|
||||
import { CollectionWithLinks } from '~/types/app';
|
||||
import classes from './collection_item.module.css';
|
||||
|
||||
export default function CollectionItem({
|
||||
collection,
|
||||
}: {
|
||||
interface CollectionItemProps {
|
||||
collection: CollectionWithLinks;
|
||||
}) {
|
||||
}
|
||||
|
||||
export function CollectionItem({ collection }: CollectionItemProps) {
|
||||
const itemRef = useRef<HTMLAnchorElement>(null);
|
||||
const activeCollection = useActiveCollection();
|
||||
const isActiveCollection = collection.id === activeCollection?.id;
|
||||
@@ -34,7 +34,10 @@ export default function CollectionItem({
|
||||
title={collection.name}
|
||||
>
|
||||
<FolderIcon className={classes.linkIcon} />
|
||||
<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
style={{ wordBreak: 'break-all', whiteSpace: 'pre-line' }}
|
||||
>
|
||||
{collection.name}
|
||||
</Text>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user