Selaa lähdekoodia

feat(map): обложка места в карточке PlaceCardModal

neyrogovnarik 1 viikko sitten
vanhempi
sitoutus
faee66b0cc
1 muutettua tiedostoa jossa 22 lisäystä ja 13 poistoa
  1. 22 13
      frontend/src/components/MapView.tsx

+ 22 - 13
frontend/src/components/MapView.tsx

@@ -117,19 +117,28 @@ export default function MapView() {
 
 function PlaceCardModal({ place, onClose }: { place: Place; onClose: () => void }) {
   return (
-    <div className="absolute bottom-0 left-0 right-0 z-20 max-h-[60vh] overflow-y-auto rounded-t-2xl bg-[#1e293b] p-6 shadow-xl">
-      <button onClick={onClose} className="mb-4 text-white/60 hover:text-white">✕</button>
-      <h2 className="mb-2 text-xl font-bold text-white">{place.title}</h2>
-      {place.address && <p className="mb-2 text-sm text-white/60">{place.address}</p>}
-      {place.description && <p className="mb-4 text-sm text-white/80">{place.description}</p>}
-      <div className="mb-4 flex flex-wrap gap-2">
-        {place.tags?.map((tag) => (
-          <span key={tag.id} className="rounded-full bg-white/10 px-3 py-1 text-xs text-white/80">{tag.name}</span>
-        ))}
-      </div>
-      <div className="flex items-center gap-4 text-sm text-white/60">
-        <span>★ {place.rating?.toFixed(1) || 'Нет оценок'}</span>
-        {place.type === 'studio' && place.hourly_rate && <span>{place.hourly_rate} ₽/час</span>}
+    <div className="absolute bottom-0 left-0 right-0 z-20 max-h-[60vh] overflow-y-auto rounded-t-2xl bg-[#1e293b] shadow-xl">
+      {place.cover_image && (
+        <img
+          src={place.cover_image}
+          alt={place.title}
+          className="h-48 w-full object-cover"
+        />
+      )}
+      <div className="p-6">
+        <button onClick={onClose} className="mb-4 text-white/60 hover:text-white">✕</button>
+        <h2 className="mb-2 text-xl font-bold text-white">{place.title}</h2>
+        {place.address && <p className="mb-2 text-sm text-white/60">{place.address}</p>}
+        {place.description && <p className="mb-4 text-sm text-white/80">{place.description}</p>}
+        <div className="mb-4 flex flex-wrap gap-2">
+          {place.tags?.map((tag) => (
+            <span key={tag.id} className="rounded-full bg-white/10 px-3 py-1 text-xs text-white/80">{tag.name}</span>
+          ))}
+        </div>
+        <div className="flex items-center gap-4 text-sm text-white/60">
+          <span>★ {place.rating?.toFixed(1) || 'Нет оценок'}</span>
+          {place.type === 'studio' && place.hourly_rate && <span>{place.hourly_rate} ₽/час</span>}
+        </div>
       </div>
     </div>
   )