blob: 6138e319ae33c49d1820d6498bcee077aa888882 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
"use client";
import { useState } from "react";
import { BookmarkStorageService } from "../lib/bookmark-storage";
import { TwitterBookmark } from "../lib/twitter-api";
interface BookmarkListProps {
bookmarks: TwitterBookmark[];
}
function formatDate(dateString: string): string {
const date = new Date(dateString);
return date.toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
function truncateText(text: string, maxLength: number = 200): string {
if (text.length <= maxLength) return text;
return text.substring(0, maxLength) + "...";
}
export function BookmarkList({ bookmarks }: BookmarkListProps) {
if (bookmarks.length === 0) {
return (
<div className="text-center py-8 text-gray-500">
No bookmarks found. Click "Fetch Twitter Bookmarks" to load your
bookmarks.
</div>
);
}
return (
<div className="space-y-4">
<div className="text-sm text-gray-600 mb-4">
Found {bookmarks.length} bookmark{bookmarks.length !== 1 ? "s" : ""}
</div>
{bookmarks.map((bookmark) => (
<BookmarkEntry bookmark={bookmark} key={bookmark.id} />
))}
</div>
);
}
function BookmarkEntry({ bookmark }: { bookmark: TwitterBookmark }) {
console.log({ bookmark });
return (
<div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-2">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="font-semibold text-gray-900">
@{bookmark.author.username}
</span>
<span className="text-sm text-gray-500">•</span>
<span className="text-sm text-gray-500">
{formatDate(bookmark.createdAt)}
</span>
</div>
<div className="text-sm text-gray-700 mb-2">
{truncateText(bookmark.text)}
</div>
<div className="flex flex-wrap">
{bookmark.media.pics.map((p) => (
<img width="400" src={p} />
))}
</div>
{bookmark.media.video.url && (
<video src={bookmark.media.video.url} controls />
)}
{bookmark.urls.length > 0 && (
<div className="space-y-1">
{bookmark.urls.map((url, index) => (
<div key={index} className="text-xs">
<a
href={url.expandedUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
{url.displayUrl}
</a>
</div>
))}
</div>
)}
{bookmark.hashtags.length > 0 && (
<div className="flex flex-wrap gap-1 mt-2">
{bookmark.hashtags.map((tag, index) => (
<span
key={index}
className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
>
#{tag}
</span>
))}
</div>
)}
</div>
</div>
</div>
);
}
|
