diff --git a/src/components/PostOnFeed.jsx b/src/components/PostOnFeed.jsx index 64610ff..3e4c635 100644 --- a/src/components/PostOnFeed.jsx +++ b/src/components/PostOnFeed.jsx @@ -34,8 +34,26 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark // Проверяем, закрыт ли пост (вещь найдена) const isClosed = ad.status === 'CLOSED'; + const roleClass = ad.userRole === 'LOST_AND_FOUND' ? 'f-card-role-lost-found' + : ad.userRole === 'METRO' ? 'f-card-role-metro' : ''; + + const roleBadge = ad.userRole === 'LOST_AND_FOUND' ? ( +
+ + + + + Бюро находок +
+ ) : ad.userRole === 'METRO' ? ( +
+ М + Метрополитен +
+ ) : null; + return ( -
+
{imageUrl @@ -49,6 +67,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
{ad.type === "loss" ? "Потеря" : "Находка"}
+ {roleBadge} {isClosed &&
✓ Найдено
}
{ad.title}
diff --git a/src/styles/card.css b/src/styles/card.css index 094632e..640f013 100644 --- a/src/styles/card.css +++ b/src/styles/card.css @@ -32,7 +32,6 @@ background: rgba(13,16,24,.8); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal); - margin-right: auto; } .f-type-badge { border-radius: 20px; padding: 3px 10px; @@ -52,6 +51,46 @@ background: rgba(72,187,120,.2); color: #48bb78; border: 1px solid rgba(72,187,120,.3); } +/* ── Role badges (LOST_AND_FOUND / METRO) ── */ +.f-role-badge { + display: inline-flex; align-items: center; gap: 4px; + border-radius: 20px; padding: 3px 8px; + font-size: .68rem; font-weight: 800; + white-space: nowrap; +} +.f-role-lost-found { + background: rgba(255,200,50,.18); color: #f5c842; + border: 1px solid rgba(255,200,50,.3); +} +.f-role-metro { + background: rgba(227,6,19,.15); color: #e30613; + border: 1px solid rgba(227,6,19,.25); +} +.f-role-metro-letter { + display: inline-flex; align-items: center; justify-content: center; + width: 14px; height: 14px; border-radius: 50%; + background: #e30613; color: #fff; + font-size: 9px; font-weight: 900; line-height: 1; +} + +/* Role-based card border */ +.f-card-role-lost-found { + border-color: rgba(255,200,50,.3); + box-shadow: 0 0 20px rgba(255,200,50,.08), inset 0 0 20px rgba(255,200,50,.04); +} +.f-card-role-lost-found:hover { + border-color: rgba(255,200,50,.5); + box-shadow: 0 0 30px rgba(255,200,50,.15), inset 0 0 25px rgba(255,200,50,.06); +} +.f-card-role-metro { + border-color: rgba(227,6,19,.25); + box-shadow: 0 0 20px rgba(227,6,19,.08), inset 0 0 20px rgba(227,6,19,.04); +} +.f-card-role-metro:hover { + border-color: rgba(227,6,19,.45); + box-shadow: 0 0 30px rgba(227,6,19,.15), inset 0 0 25px rgba(227,6,19,.06); +} + /* Body */ .f-card-body { flex: 1; padding: 14px 16px;