fix: photo edit by admin

2026-06-28 11:00:28 +07:00
parent 9f60efeb6d
commit 41c8e67229
7 changed files with 487 additions and 2 deletions
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Clock, X } from 'lucide-react';
+
+export interface SharedLocationPhoto {
+  id: string;
+  url: string;
+  uploaderName: string;
+  uploaderAvatar?: string;
+  isGuest: boolean;
+  capturedAt: string;
+  description?: string;
+}
+
+interface TimelineProps {
+  locationName: string;
+  photos: SharedLocationPhoto[];
+  onSelectPhoto: (photoId: string) => void;
+  onClose: () => void;
+}
+
+export const LocationTimelineSheet: React.FC<TimelineProps> = ({ locationName, photos, onSelectPhoto, onClose }) => {
+  // Sort photos chronologically by capture timestamp
+  const chronologicalPhotos = [...photos].sort(
+    (a, b) => new Date(b.capturedAt).getTime() - new Date(a.capturedAt).getTime()
+  );
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-[9999] bg-slate-900 border-t border-slate-800 rounded-t-3xl max-h-[85vh] flex flex-col overflow-hidden text-white text-xs shadow-2xl animate-slide-up">
+      {/* Dynamic Header Drag/Close Strip */}
+      <div className="w-full px-5 py-4 border-b border-slate-800/60 flex justify-between items-center bg-slate-900 sticky top-0 z-10">
+        <div>
+          <h3 className="font-bold text-sm text-slate-100 truncate max-w-[70vw]">{locationName || "Hành trình tại địa điểm"}</h3>
+          <p className="text-[10px] text-slate-400">Tổng hợp {photos.length} khoảnh khắc từ cộng đồng</p>
+        </div>
+        <button type="button" onClick={onClose} className="p-2 bg-slate-800 hover:bg-slate-700 rounded-xl text-slate-350 hover:text-white transition-colors">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* THE CHRONOLOGICAL TIMELINE STREAM CANVAS */}
+      <div className="flex-1 overflow-y-auto p-5 space-y-6 relative">
+        {/* Vertical Timeline Track Line */}
+        <div className="absolute left-[27px] top-6 bottom-6 w-[2px] bg-slate-800" />
+
+        {chronologicalPhotos.map((photo) => (
+          <div key={photo.id} className="flex gap-4 items-start relative group">
+            {/* Timeline Node Circle Asset Indicator */}
+            <div className="w-6 h-6 rounded-full bg-blue-600 border-4 border-slate-900 flex items-center justify-center z-10 shrink-0 shadow-md" />
+
+            {/* Core Content Card Box */}
+            <div className="flex-1 bg-slate-950/50 border border-slate-800/80 rounded-2xl p-3 space-y-3 hover:border-slate-700/60 transition-colors">
+              {/* Meta row identifier */}
+              <div className="flex justify-between items-center text-[10px] text-slate-400">
+                <div className="flex items-center gap-1.5">
+                  <div className="w-4 h-4 rounded-full bg-slate-700 flex items-center justify-center font-bold text-[8px] text-white overflow-hidden shrink-0">
+                    {photo.uploaderAvatar ? (
+                      <img src={photo.uploaderAvatar} className="object-cover w-full h-full" />
+                    ) : (
+                      photo.uploaderName.charAt(0).toUpperCase()
+                    )}
+                  </div>
+                  <span className="font-medium text-slate-300 truncate max-w-[120px]">{photo.uploaderName}</span>
+                  {photo.isGuest && <span className="bg-slate-800 text-[8px] px-1 py-0.5 rounded text-slate-500 font-bold">Khách</span>}
+                </div>
+                <div className="flex items-center gap-1">
+                  <Clock className="w-3 h-3 text-slate-500" />
+                  <span>{new Date(photo.capturedAt).toLocaleDateString('vi-VN')}</span>
+                </div>
+              </div>
+
+              {/* Clickable Card Thumbnail Container */}
+              <div 
+                onClick={() => onSelectPhoto(photo.id)}
+                className="w-full aspect-video rounded-xl overflow-hidden bg-slate-900 relative cursor-pointer active:scale-[0.99] transition-transform"
+              >
+                <img src={photo.url} alt="Timeline view" className="w-full h-full object-cover" />
+              </div>
+              
+              {photo.description && <p className="text-slate-300 leading-relaxed text-[11px] px-0.5">{photo.description}</p>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};