feat: create edit collection page

This commit is contained in:
Sonny
2024-05-14 23:57:54 +02:00
committed by Sonny
parent 6b327a5b1e
commit 6b4cfd9926
13 changed files with 180 additions and 38 deletions

View File

@@ -63,7 +63,7 @@ export default function CollectionContainer({
</Link>
)}
<CollectionHeader />
<CollectionControls />
<CollectionControls collectionId={activeCollection.id} />
</CollectionHeaderWrapper>
<CollectionDescription />
<LinkList links={activeCollection.links} />

View File

@@ -1,20 +1,31 @@
import PATHS from '#constants/paths';
import type Collection from '#models/collection';
import { BsThreeDotsVertical } from 'react-icons/bs';
import { HiOutlinePencil } from 'react-icons/hi2';
import { GoPencil } from 'react-icons/go';
import { IoIosAddCircleOutline } from 'react-icons/io';
import { IoTrashOutline } from 'react-icons/io5';
import Dropdown from '~/components/common/dropdown/dropdown';
import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
import { appendCollectionId } from '~/lib/navigation';
const CollectionControls = () => (
const CollectionControls = ({
collectionId,
}: {
collectionId: Collection['id'];
}) => (
<Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
<DropdownItemLink href={PATHS.LINK.CREATE}>
<IoIosAddCircleOutline /> Add
</DropdownItemLink>
<DropdownItemLink href={PATHS.COLLECTION.EDIT}>
<HiOutlinePencil /> Edit
<DropdownItemLink
href={appendCollectionId(PATHS.COLLECTION.EDIT, collectionId)}
>
<GoPencil /> Edit
</DropdownItemLink>
<DropdownItemLink href={PATHS.COLLECTION.REMOVE} danger>
<DropdownItemLink
href={appendCollectionId(PATHS.COLLECTION.REMOVE, collectionId)}
danger
>
<IoTrashOutline /> Delete
</DropdownItemLink>
</Dropdown>

View File

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { useCallback } from 'react';
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
import { BsThreeDotsVertical } from 'react-icons/bs';
import { HiOutlinePencil } from 'react-icons/hi2';
import { GoPencil } from 'react-icons/go';
import { IoTrashOutline } from 'react-icons/io5';
import Dropdown from '~/components/common/dropdown/dropdown';
import {
@@ -82,7 +82,7 @@ export default function LinkControls({ link }: { link: Link }) {
<DropdownItemLink
href={appendCollectionId(PATHS.LINK.EDIT, link.collectionId)}
>
<HiOutlinePencil /> Edit
<GoPencil /> Edit
</DropdownItemLink>
<DropdownItemLink
href={appendCollectionId(PATHS.LINK.REMOVE, link.collectionId)}