mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-09 15:05:35 +00:00
feat: add shared collection page
This commit is contained in:
@@ -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({
|
||||
|
||||
@@ -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 />}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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,
|
||||
}));
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user