global refactoring

src/components/PostOnFeed.jsx

@@ -0,0 +1,82 @@
+import PinIcon from "./icons/PinIcon";
+import CalendarIcon from "./icons/CalendarIcon";
+import PhoneIcon from "./icons/PhoneIcon";
+import MapIcon from "./icons/MapIcon";
+import HeartIcon from "./icons/HeartIcon";
+import { API_URL } from "../config/authConstants";
+
+export default function PostOnFeed({ ad, liked, onLike, onEdit }) {
+  const imageUrl = ad.images?.[0] ? `${API_URL}${ad.images[0]}` : null;
+
+  return (
+      <div className="f-card">
+        <div className="f-card-inner">
+
+          {/* Левая колонка — картинка */}
+          <div className="f-card-img">
+            {imageUrl
+                ? <img src={imageUrl} alt={ad.title} />
+                : <span className="f-card-emoji">{ad.emoji || "📋"}</span>
+            }
+          </div>
+
+          {/* Правая колонка — контент */}
+          <div className="f-card-body">
+            <div className="f-card-badges">
+              {ad.category && <div className="f-cat-badge">{ad.category}</div>}
+              <div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss"
+                  : "f-type-found"}`}>
+                {ad.type === "loss" ? "Потеря" : "Находка"}
+              </div>
+            </div>
+            <div className="f-card-title">{ad.title}</div>
+            <div className="f-card-desc">{ad.description}</div>
+            <div className="f-card-meta">
+              {ad.location && <div className="f-meta-pill">
+                <PinIcon/> {ad.location}</div>}
+              {ad.date && <div className="f-meta-pill"><CalendarIcon/> {ad.date}
+              </div>}
+            </div>
+            {ad.location && (
+                <button className="f-card-map"
+                        onClick={e => e.stopPropagation()}>
+                  <MapIcon/> Показать на карте — {ad.location}
+                </button>
+            )}
+            <div className="f-card-foot">
+              <div className="f-card-foot-left">
+                {ad.phone && (
+                    <a className="f-card-phone" href={`tel:${ad.phone}`}
+                       onClick={e => e.stopPropagation()}>
+                      <PhoneIcon/> {ad.phone}
+                    </a>
+                )}
+              </div>
+              <div className="f-card-foot-right">
+                {onEdit && (
+                    <button
+                        className="f-like-btn"
+                        onClick={e => {
+                          e.stopPropagation();
+                          onEdit(ad);
+                        }}
+                    >✏️</button>
+                )}
+                <button
+                    className={`f-like-btn${liked ? " liked" : ""}`}
+                    onClick={e => {
+                      e.stopPropagation();
+                      onLike(ad.id);
+                    }}
+                >
+                  <HeartIcon filled={liked}/>
+                  {liked ? (ad.likes || 0) + 1 : (ad.likes || 0)}
+                </button>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+  );
+}