Skip to content

Commit 384c4e4

Browse files
Zac-ZajdelZac-Zajdel
committed
feat: code cleanup and refactoring into separate component
1 parent 6e92851 commit 384c4e4

File tree

4 files changed

+141
-123
lines changed

4 files changed

+141
-123
lines changed

‎app/bookmarks/[id]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default function DetailsPage({ params }: { params: { id: string } }) {
107107
<>
108108
{/* eslint-disable-next-line @next/next/no-img-element */}
109109
<img
110-
src={bookmark?.imageUrl || '/placeholder.svg'}
110+
src={bookmark?.imageUrl ?? ''}
111111
alt={bookmark?.title}
112112
className="absolute left-0 top-0 h-full w-full rounded-md object-cover"
113113
/>

‎components/bookmarks/bookmark-actions.tsx

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
'use client';
2+
3+
import { Button } from '@/components/ui/button';
4+
import {
5+
Tooltip,
6+
TooltipContent,
7+
TooltipProvider,
8+
TooltipTrigger,
9+
} from '@/components/ui/tooltip';
10+
import { Bookmark } from '@prisma/client';
11+
import {
12+
BookOpen,
13+
Link,
14+
SquareArrowOutUpRight,
15+
Star,
16+
Trash,
17+
} from 'lucide-react';
18+
import { useRouter } from 'next/navigation';
19+
import { toast } from 'sonner';
20+
21+
interface BookmarkActionsProps {
22+
bookmark: Bookmark;
23+
onDelete: (bookmark: Bookmark) => void;
24+
onFavorite: (bookmark: Bookmark) => void;
25+
}
26+
27+
export default function BookmarkActions({
28+
bookmark,
29+
onDelete,
30+
onFavorite,
31+
}: BookmarkActionsProps) {
32+
const router = useRouter();
33+
34+
function onCopyLink(url: string) {
35+
navigator.clipboard.writeText(url);
36+
toast.success('Copied to clipboard');
37+
}
38+
39+
return (
40+
<TooltipProvider delayDuration={500}>
41+
<Tooltip>
42+
<TooltipTrigger asChild>
43+
<Button
44+
variant="ghost"
45+
size="icon"
46+
className="flex size-7 items-center justify-center"
47+
onClick={() => window.open(bookmark.url, '_blank')}
48+
>
49+
<SquareArrowOutUpRight className="size-4 dark:text-gray-200" />
50+
<span className="sr-only">Visit URL</span>
51+
</Button>
52+
</TooltipTrigger>
53+
<TooltipContent>
54+
<p>Visit URL</p>
55+
</TooltipContent>
56+
</Tooltip>
57+
<Tooltip>
58+
<TooltipTrigger asChild>
59+
<Button
60+
variant="ghost"
61+
size="icon"
62+
className="flex size-7 items-center justify-center"
63+
onClick={() => router.push(`/bookmarks/${bookmark.id}`)}
64+
>
65+
<BookOpen className="size-4 dark:text-gray-200" />
66+
<span className="sr-only">Details Page Link</span>
67+
</Button>
68+
</TooltipTrigger>
69+
<TooltipContent>
70+
<p>View Metadata</p>
71+
</TooltipContent>
72+
</Tooltip>
73+
<Tooltip>
74+
<TooltipTrigger asChild>
75+
<Button
76+
variant="ghost"
77+
size="icon"
78+
className="flex size-7 items-center justify-center"
79+
onClick={() =>
80+
onFavorite({
81+
...bookmark,
82+
isFavorite: !bookmark.isFavorite,
83+
})
84+
}
85+
>
86+
<Star className="size-4 dark:text-gray-200" />
87+
<span className="sr-only">
88+
{bookmark.isFavorite ? 'Remove Favorite' : 'Favorite'}
89+
</span>
90+
</Button>
91+
</TooltipTrigger>
92+
<TooltipContent>
93+
{bookmark.isFavorite ? 'Remove Favorite' : 'Favorite'}
94+
</TooltipContent>
95+
</Tooltip>
96+
<Tooltip>
97+
<TooltipTrigger asChild>
98+
<Button
99+
variant="ghost"
100+
size="icon"
101+
className="flex size-7 items-center justify-center"
102+
onClick={() => onCopyLink(bookmark.url)}
103+
>
104+
<Link className="size-4 dark:text-gray-200" />
105+
<span className="sr-only">Copy Link</span>
106+
</Button>
107+
</TooltipTrigger>
108+
<TooltipContent>
109+
<p>Copy Link</p>
110+
</TooltipContent>
111+
</Tooltip>
112+
<Tooltip>
113+
<TooltipTrigger asChild>
114+
<Button
115+
variant="ghost"
116+
size="icon"
117+
className="flex size-7 items-center justify-center"
118+
onClick={() => onDelete(bookmark)}
119+
>
120+
<Trash className="size-4 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500" />
121+
<span className="sr-only">Delete</span>
122+
</Button>
123+
</TooltipTrigger>
124+
<TooltipContent>
125+
<p>Delete</p>
126+
</TooltipContent>
127+
</Tooltip>
128+
</TooltipProvider>
129+
);
130+
}

‎components/bookmarks/bookmark-card.tsx

Lines changed: 10 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,10 @@
11
'use client';
22

3-
import { Button } from '@/components/ui/button';
3+
import BookmarkActions from '@/components/bookmarks/bookmark-actions';
44
import { Card, CardHeader } from '@/components/ui/card';
55
import { Separator } from '@/components/ui/separator';
6-
import {
7-
Tooltip,
8-
TooltipContent,
9-
TooltipProvider,
10-
TooltipTrigger,
11-
} from '@/components/ui/tooltip';
12-
import { truncate } from '@/lib/utils';
136
import { Bookmark } from '@prisma/client';
14-
import {
15-
BookOpen,
16-
Link,
17-
Search,
18-
SquareArrowOutUpRight,
19-
Star,
20-
Trash,
21-
} from 'lucide-react';
22-
import { useRouter } from 'next/navigation';
23-
import { toast } from 'sonner';
7+
import { Search } from 'lucide-react';
248

259
interface BookmarkCardProps {
2610
bookmark: Bookmark;
@@ -33,13 +17,6 @@ export default function BookmarkCard({
3317
onDelete,
3418
onFavorite,
3519
}: BookmarkCardProps) {
36-
const router = useRouter();
37-
38-
function onCopyLink(url: string) {
39-
navigator.clipboard.writeText(url);
40-
toast.success('Copied to clipboard');
41-
}
42-
4320
return (
4421
<Card className="flex h-full w-full flex-col justify-between rounded-lg">
4522
<CardHeader className="flex h-full flex-col items-start p-5">
@@ -60,107 +37,23 @@ export default function BookmarkCard({
6037
)}
6138
</div>
6239
</div>
63-
<h1 className="text-md line-clamp-2 h-[40px] overflow-hidden pl-2 pt-2 font-semibold leading-snug tracking-tight">
64-
{truncate(bookmark.title, 80)}
40+
<h1 className="text-md h-10 overflow-hidden truncate text-ellipsis whitespace-nowrap pl-2 pt-2 font-semibold leading-snug tracking-tight">
41+
{bookmark.title}
6542
</h1>
6643
</div>
6744
<p className="line-clamp-2 text-xs text-gray-500 text-muted-foreground">
68-
{truncate(bookmark.description || '', 100)}
45+
{bookmark.description}
6946
</p>
7047
</CardHeader>
7148

7249
<Separator className="opacity-75" />
7350

7451
<div className="flex items-center justify-between gap-4 px-4 py-2">
75-
<TooltipProvider delayDuration={500}>
76-
<Tooltip>
77-
<TooltipTrigger asChild>
78-
<Button
79-
variant="ghost"
80-
size="icon"
81-
className="flex size-7 items-center justify-center"
82-
onClick={() => window.open(bookmark.url, '_blank')}
83-
>
84-
<SquareArrowOutUpRight className="size-4 dark:text-gray-200" />
85-
<span className="sr-only">Visit URL</span>
86-
</Button>
87-
</TooltipTrigger>
88-
<TooltipContent>
89-
<p>Visit URL</p>
90-
</TooltipContent>
91-
</Tooltip>
92-
<Tooltip>
93-
<TooltipTrigger asChild>
94-
<Button
95-
variant="ghost"
96-
size="icon"
97-
className="flex size-7 items-center justify-center"
98-
onClick={() => router.push(`/bookmarks/${bookmark.id}`)}
99-
>
100-
<BookOpen className="size-4 dark:text-gray-200" />
101-
<span className="sr-only">Details Page Link</span>
102-
</Button>
103-
</TooltipTrigger>
104-
<TooltipContent>
105-
<p>View Metadata</p>
106-
</TooltipContent>
107-
</Tooltip>
108-
<Tooltip>
109-
<TooltipTrigger asChild>
110-
<Button
111-
variant="ghost"
112-
size="icon"
113-
className="flex size-7 items-center justify-center"
114-
onClick={() =>
115-
onFavorite({
116-
...bookmark,
117-
isFavorite: !bookmark.isFavorite,
118-
})
119-
}
120-
>
121-
<Star className="size-4 dark:text-gray-200" />
122-
<span className="sr-only">
123-
{bookmark.isFavorite ? 'Remove Favorite' : 'Favorite'}
124-
</span>
125-
</Button>
126-
</TooltipTrigger>
127-
<TooltipContent>
128-
{bookmark.isFavorite ? 'Remove Favorite' : 'Favorite'}
129-
</TooltipContent>
130-
</Tooltip>
131-
<Tooltip>
132-
<TooltipTrigger asChild>
133-
<Button
134-
variant="ghost"
135-
size="icon"
136-
className="flex size-7 items-center justify-center"
137-
onClick={() => onCopyLink(bookmark.url)}
138-
>
139-
<Link className="size-4 dark:text-gray-200" />
140-
<span className="sr-only">Copy Link</span>
141-
</Button>
142-
</TooltipTrigger>
143-
<TooltipContent>
144-
<p>Copy Link</p>
145-
</TooltipContent>
146-
</Tooltip>
147-
<Tooltip>
148-
<TooltipTrigger asChild>
149-
<Button
150-
variant="ghost"
151-
size="icon"
152-
className="flex size-7 items-center justify-center"
153-
onClick={() => onDelete(bookmark)}
154-
>
155-
<Trash className="size-4 dark:text-gray-200" />
156-
<span className="sr-only">Delete</span>
157-
</Button>
158-
</TooltipTrigger>
159-
<TooltipContent>
160-
<p>Delete</p>
161-
</TooltipContent>
162-
</Tooltip>
163-
</TooltipProvider>
52+
<BookmarkActions
53+
bookmark={bookmark}
54+
onFavorite={onFavorite}
55+
onDelete={onDelete}
56+
/>
16457
</div>
16558
</Card>
16659
);

‎public/placeholder.svg

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)