Conversation
There was a problem hiding this comment.
Pull Request Overview
Expands and restructures the ItemCard UI to present more information clearly in the feed.
- Moves image to a dedicated header with a loading spinner and adds a full-width location/date row
- Reworks content area with larger title/description and chip-style status/category/verified tags
- Updates overall card container styling and interaction states
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| {/* Status and Category Tags - Stick to bottom */} | ||
| <div className="flex flex-wrap gap-2 mt-auto"> | ||
| <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getStatusColor(item.kind)}`}> |
There was a problem hiding this comment.
getStatusColor(item.kind) will throw if item.kind is undefined or null because getStatusColor calls status.toLowerCase(). Use the already computed statusText (which always falls back to a string) or guard the input, e.g. getStatusColor(statusText) or getStatusColor(item.kind || '').
| <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getStatusColor(item.kind)}`}> | |
| <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getStatusColor(statusText)}`}> |
| <div className="p-4 flex flex-col flex-grow"> | ||
| {/* Title */} | ||
| <h3 className="font-semibold text-lg text-gray-900 mb-2 line-clamp-1"> | ||
| {item.title} |
There was a problem hiding this comment.
[nitpick] Title no longer has a fallback and may render empty when item.title is missing. Consider restoring the prior fallback for robustness: {item.title || 'Untitled Item'}.
| {item.title} | |
| {item.title || 'Untitled Item'} |
| <span className="flex-shrink-0">🕒</span> | ||
| <span>{formatDate(item.date)}</span> |
There was a problem hiding this comment.
[nitpick] Improve semantics and screen reader support by marking the emoji as decorative and wrapping the date with a time element. For example: 🕒 <time dateTime={new Date(item.date).toISOString()}>{formatDate(item.date)}.
| <span className="flex-shrink-0">🕒</span> | |
| <span>{formatDate(item.date)}</span> | |
| <span aria-hidden="true" className="flex-shrink-0">🕒</span> | |
| <time dateTime={new Date(item.date).toISOString()}>{formatDate(item.date)}</time> |
| <div className="flex flex-wrap gap-2 mt-auto"> | ||
| <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getStatusColor(item.kind)}`}> | ||
| {statusText} | ||
| </span> | ||
| {item.category && ( | ||
| <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 border border-blue-200"> | ||
| {item.category} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
[nitpick] The 'Claimed' badge present in the previous UI has been removed, which drops an important state indicator. If that was unintentional, consider re-adding it in this tag section, e.g.: {item.claimed && (Claimed)}.
ntur101
left a comment
ntur101
left a comment
There was a problem hiding this comment.
Looks really good, love the spacing and the new layout - although I did notice the claimed tag is not showing up if an item has been set to claimed by the owner of the post, if you could just fix that then it would be perfect :)
|
ntur101
left a comment
ntur101
left a comment
There was a problem hiding this comment.
Looks good!! love the changes looking good now
📌 Description
Made the item cards in the 'Feed' page a lot bigger to more easily display all of the information needed in the preview of the item. Previously, the card was small, and therefore some of the information such as the location or date it was lost/found would be cut off.
Now, it's a lot clearer to see in the previews.
🔗 Related Issue(s)
Closes #81
✅ Changes
UI update on the item cards in the feed
🧪 How to Test
Go onto the 'Feed' page and look at the updated cards.