mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-09 15:05:35 +00:00
refactor: rename link_list with a proper name
This commit is contained in:
@@ -4,8 +4,8 @@ import { RxHamburgerMenu } from 'react-icons/rx';
|
||||
import CollectionControls from '~/components/dashboard/collection/collection_controls';
|
||||
import CollectionDescription from '~/components/dashboard/collection/collection_description';
|
||||
import CollectionHeader from '~/components/dashboard/collection/collection_header';
|
||||
import LinkItem from '~/components/dashboard/link_list/link_item';
|
||||
import { NoCollection, NoLink } from '~/components/dashboard/link_list/no_item';
|
||||
import LinkList from '~/components/dashboard/link/link_list';
|
||||
import { NoCollection } from '~/components/dashboard/link/no_item';
|
||||
import Footer from '~/components/footer/footer';
|
||||
import useActiveCollection from '~/hooks/use_active_collection';
|
||||
|
||||
@@ -32,15 +32,15 @@ const CollectionHeaderWrapper = styled.h2(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
interface LinksProps {
|
||||
interface CollectionContainerProps {
|
||||
isMobile: boolean;
|
||||
openSideMenu: () => void;
|
||||
}
|
||||
|
||||
export default function Links({
|
||||
export default function CollectionContainer({
|
||||
isMobile,
|
||||
openSideMenu,
|
||||
}: Readonly<LinksProps>) {
|
||||
}: Readonly<CollectionContainerProps>) {
|
||||
const { activeCollection } = useActiveCollection();
|
||||
|
||||
if (activeCollection === null) {
|
||||
@@ -66,29 +66,8 @@ export default function Links({
|
||||
<CollectionControls />
|
||||
</CollectionHeaderWrapper>
|
||||
<CollectionDescription />
|
||||
{activeCollection?.links.length !== 0 ? (
|
||||
<LinkListStyle>
|
||||
{activeCollection?.links.map((link) => (
|
||||
<LinkItem link={link} key={link.id} showUserControls />
|
||||
))}
|
||||
</LinkListStyle>
|
||||
) : (
|
||||
<NoLink />
|
||||
)}
|
||||
<LinkList links={activeCollection.links} />
|
||||
<Footer />
|
||||
</LinksWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const LinkListStyle = styled.ul({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
gap: '0.5em',
|
||||
padding: '3px',
|
||||
flexDirection: 'column',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'scroll',
|
||||
});
|
||||
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
|
||||
import { AiFillStar } from 'react-icons/ai';
|
||||
import ExternalLink from '~/components/common/external_link';
|
||||
import LinkFavicon from '~/components/dashboard/link/link_favicon';
|
||||
import LinkControls from '~/components/dashboard/link_list/link_controls';
|
||||
import LinkControls from '~/components/dashboard/link/link_controls';
|
||||
|
||||
const LinkWrapper = styled.li(({ theme }) => ({
|
||||
userSelect: 'none',
|
||||
31
inertia/components/dashboard/link/link_list.tsx
Normal file
31
inertia/components/dashboard/link/link_list.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type Link from '#models/link';
|
||||
import styled from '@emotion/styled';
|
||||
import LinkItem from '~/components/dashboard/link/link_item';
|
||||
import { NoLink } from '~/components/dashboard/link/no_item';
|
||||
|
||||
const LinkListStyle = styled.ul({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
gap: '0.5em',
|
||||
padding: '3px',
|
||||
flexDirection: 'column',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'scroll',
|
||||
});
|
||||
|
||||
export default function LinkList({ links }: { links: Link[] }) {
|
||||
if (links.length === 0) {
|
||||
return <NoLink />;
|
||||
}
|
||||
|
||||
return (
|
||||
<LinkListStyle>
|
||||
{links.map((link) => (
|
||||
<LinkItem link={link} key={link.id} showUserControls />
|
||||
))}
|
||||
</LinkListStyle>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import { router } from '@inertiajs/react';
|
||||
import { ReactNode, useEffect, useMemo, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { useSwipeable } from 'react-swipeable';
|
||||
import Links from '~/components/dashboard/link_list/link_list';
|
||||
import CollectionContainer from '~/components/dashboard/collection/collection_container';
|
||||
import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
|
||||
import SwiperHandler from '~/components/dashboard/swiper_handler';
|
||||
import DashboardLayout from '~/components/layouts/dashboard_layout';
|
||||
@@ -54,7 +54,7 @@ export default function DashboardPage(props: Readonly<DashboardPageProps>) {
|
||||
<SideNavigation />
|
||||
</SideBar>
|
||||
)}
|
||||
<Links isMobile={isMobile} openSideMenu={open} />
|
||||
<CollectionContainer isMobile={isMobile} openSideMenu={open} />
|
||||
</SwiperHandler>
|
||||
</DashboardProviders>
|
||||
</DashboardLayout>
|
||||
|
||||
Reference in New Issue
Block a user