feat: add shared collection page

This commit is contained in:
Sonny
2024-06-02 18:35:10 +02:00
committed by Sonny
parent dc54a1197d
commit 8a4f895853
15 changed files with 93 additions and 18 deletions

View File

@@ -7,9 +7,10 @@ import Footer from '~/components/footer/footer';
import useActiveCollection from '~/hooks/use_active_collection';
export interface CollectionHeaderProps {
openNavigationItem: ReactNode;
openCollectionItem: ReactNode;
showButtons: boolean;
showControls?: boolean;
openNavigationItem?: ReactNode;
openCollectionItem?: ReactNode;
}
const CollectionContainerStyle = styled.div({

View File

@@ -15,7 +15,7 @@ const CollectionHeaderWrapper = styled.div(({ theme }) => ({
minWidth: 0,
width: '100%',
paddingInline: `${paddingLeft} ${paddingRight}`,
marginBottom: 0,
marginBottom: '0.5em',
[`@media (max-width: ${theme.media.tablet})`]: {
paddingInline: 0,
@@ -53,9 +53,10 @@ const LinksCount = styled.div(({ theme }) => ({
}));
export default function CollectionHeader({
showButtons,
showControls = true,
openNavigationItem,
openCollectionItem,
showButtons,
}: CollectionHeaderProps) {
const { t } = useTranslation('common');
const { activeCollection } = useActiveCollection();
@@ -75,7 +76,9 @@ export default function CollectionHeader({
visibility={visibility}
/>
</CollectionName>
<CollectionControls collectionId={activeCollection.id} />
{showControls && (
<CollectionControls collectionId={activeCollection.id} />
)}
{showButtons && openCollectionItem && openCollectionItem}
</CollectionHeaderStyle>
{activeCollection.description && <CollectionDescription />}

View File

@@ -17,7 +17,13 @@ const LinkListStyle = styled.ul({
overflowY: 'scroll',
});
export default function LinkList({ links }: { links: Link[] }) {
export default function LinkList({
links,
showControls = true,
}: {
links: Link[];
showControls?: boolean;
}) {
if (links.length === 0) {
return <NoLink />;
}
@@ -25,7 +31,7 @@ export default function LinkList({ links }: { links: Link[] }) {
return (
<LinkListStyle>
{sortByCreationDate(links).map((link) => (
<LinkItem link={link} key={link.id} showUserControls />
<LinkItem link={link} key={link.id} showUserControls={showControls} />
))}
</LinkListStyle>
);

View File

@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { ItemLink } from '~/components/dashboard/side_nav/nav_item';
import { ItemExternalLink } from '~/components/dashboard/side_nav/nav_item';
const FavoriteItem = styled(ItemLink)(({ theme }) => ({
const FavoriteItem = styled(ItemExternalLink)(({ theme }) => ({
backgroundColor: theme.colors.secondary,
}));

View File

@@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { Link } from '@inertiajs/react';
import ExternalLink from '~/components/common/external_link';
import { rgba } from '~/lib/color';
export const Item = styled.div(({ theme }) => ({
@@ -27,3 +28,4 @@ export const Item = styled.div(({ theme }) => ({
}));
export const ItemLink = Item.withComponent(Link);
export const ItemExternalLink = Item.withComponent(ExternalLink);