diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-12-03 03:51:29 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-12-04 23:27:28 +0900 |
| commit | 58d132139ba8d5fa17c8681a0275047ce4cca809 (patch) | |
| tree | 7dd18f5de496483b7d318e12e43379a51f3a6056 /frontend/src/components/FeedItem.tsx | |
| parent | aac4e9ccdebe52c156506d1899d5a38e99366f69 (diff) | |
| download | feedaka-58d132139ba8d5fa17c8681a0275047ce4cca809.tar.gz feedaka-58d132139ba8d5fa17c8681a0275047ce4cca809.tar.zst feedaka-58d132139ba8d5fa17c8681a0275047ce4cca809.zip | |
feat(frontend): design update
Diffstat (limited to 'frontend/src/components/FeedItem.tsx')
| -rw-r--r-- | frontend/src/components/FeedItem.tsx | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx index 80c8992..8333f75 100644 --- a/frontend/src/components/FeedItem.tsx +++ b/frontend/src/components/FeedItem.tsx @@ -41,26 +41,29 @@ export function FeedItem({ feed, onFeedUnsubscribed }: Props) { }; return ( - <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"> - <div className="flex items-start justify-between"> - <div className="flex-1"> - <h3 className="text-lg font-semibold text-gray-900">{feed.title}</h3> - <p className="mt-1 text-sm text-gray-500"> - <a href={feed.url} target="_blank" rel="noreferrer"> - {feed.url} - </a> + <div className="group rounded-xl border border-stone-200 bg-white p-5 transition-all duration-200 hover:border-stone-300 hover:shadow-sm"> + <div className="flex items-start justify-between gap-4"> + <div className="min-w-0 flex-1"> + <h3 className="truncate text-base font-semibold text-stone-900"> + {feed.title} + </h3> + <a + href={feed.url} + target="_blank" + rel="noreferrer" + className="mt-1 block truncate text-sm text-stone-400 transition-colors hover:text-sky-600" + > + {feed.url} + </a> + <p className="mt-2 text-xs text-stone-400"> + Last fetched: {formatDateTime(new Date(feed.fetchedAt))} </p> - <div className="mt-2 flex items-center gap-4 text-sm"> - <span className="text-gray-400"> - Last fetched: {formatDateTime(new Date(feed.fetchedAt))} - </span> - </div> </div> - <div className="flex items-center gap-2"> + <div className="flex items-center gap-1"> <button type="button" onClick={() => handleMarkAllRead(feed.id)} - className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900" + className="rounded-lg p-2 text-stone-400 transition-all duration-150 hover:bg-stone-100 hover:text-stone-600" title="Mark all as read" > <FontAwesomeIcon icon={faCheck} /> @@ -68,7 +71,7 @@ export function FeedItem({ feed, onFeedUnsubscribed }: Props) { <button type="button" onClick={() => handleMarkAllUnread(feed.id)} - className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900" + className="rounded-lg p-2 text-stone-400 transition-all duration-150 hover:bg-stone-100 hover:text-stone-600" title="Mark all as unread" > <FontAwesomeIcon icon={faCircle} /> @@ -76,7 +79,7 @@ export function FeedItem({ feed, onFeedUnsubscribed }: Props) { <button type="button" onClick={() => handleUnsubscribeFeed(feed.id)} - className="rounded p-2 text-red-600 hover:bg-red-50 hover:text-red-700" + className="rounded-lg p-2 text-stone-400 transition-all duration-150 hover:bg-red-50 hover:text-red-600" title="Unsubscribe from feed" > <FontAwesomeIcon icon={faTrash} /> |