Edit app-9xzmfic2e4g1/src/pages/GuidesPage.tsx via Editor
This commit is contained in:
Flatlogic Bot
parent
af845fdc33
commit
f89537473a
241
app-9xzmfic2e4g1/src/pages/GuidesPage.tsx
Normal file
241
app-9xzmfic2e4g1/src/pages/GuidesPage.tsx
Normal file
@ -0,0 +1,241 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import api from '@/db/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Heart, Eye, MapPin, Calendar, ArrowRight, Compass, Loader2 } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { tr } from 'date-fns/locale';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function GuidesPage() {
|
||||
const [guides, setGuides] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [myLikes, setMyLikes] = useState<Set<string>>(new Set());
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const [data, likes] = await Promise.all([
|
||||
api.getPublicGuides(50),
|
||||
user ? api.getMyLikes() : Promise.resolve([]),
|
||||
]);
|
||||
setGuides(data);
|
||||
setMyLikes(new Set(likes));
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLike = async (e: React.MouseEvent, guideId: string) => {
|
||||
e.preventDefault();
|
||||
if (!user) { navigate('/login'); return; }
|
||||
const wasLiked = myLikes.has(guideId);
|
||||
// optimistic
|
||||
setMyLikes(prev => {
|
||||
const next = new Set(prev);
|
||||
wasLiked ? next.delete(guideId) : next.add(guideId);
|
||||
return next;
|
||||
});
|
||||
setGuides(prev => prev.map(g => g.id === guideId
|
||||
? { ...g, likes_count: g.likes_count + (wasLiked ? -1 : 1) }
|
||||
: g
|
||||
));
|
||||
try {
|
||||
await api.toggleLike(guideId);
|
||||
} catch {
|
||||
// revert
|
||||
setMyLikes(prev => {
|
||||
const next = new Set(prev);
|
||||
wasLiked ? next.add(guideId) : next.delete(guideId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getGuidePhoto = (guide: any) => {
|
||||
const first = guide.itinerary?.days?.[0]?.items?.[0];
|
||||
if (first?.photo_reference) {
|
||||
return first.photo_reference.startsWith('http')
|
||||
? first.photo_reference
|
||||
: api.getPhotoUrl(first.photo_reference);
|
||||
}
|
||||
return 'https://images.unsplash.com/photo-1541167760496-1628856ab772?auto=format&fit=crop&q=80&w=800';
|
||||
};
|
||||
|
||||
const getDayCount = (guide: any) => guide.itinerary?.days?.length || 0;
|
||||
const getPlaceCount = (guide: any) =>
|
||||
(guide.itinerary?.days || []).reduce((s: number, d: any) => s + (d.items?.length || 0), 0);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
|
||||
{/* Hero */}
|
||||
<div className="relative bg-secondary overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1570168007204-dfb528c6958f?auto=format&fit=crop&q=80&w=2400"
|
||||
className="w-full h-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-secondary/80 to-secondary" />
|
||||
<div className="relative max-w-5xl mx-auto px-6 pt-24 pb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Compass className="h-4 w-4 text-primary" />
|
||||
<span className="text-[10px] font-black text-primary uppercase tracking-widest">Topluluk Rehberleri</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-6xl font-black text-white tracking-tighter uppercase leading-none mb-4">
|
||||
REHBERLERİM
|
||||
</h1>
|
||||
<p className="text-white/50 text-lg font-medium italic max-w-md">
|
||||
Gerçek gezginlerin oluşturduğu Kapadokya rotaları. Beğen, kopyala, yola çık.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="max-w-5xl mx-auto px-6 py-12">
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-24 gap-4">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-primary opacity-40" />
|
||||
<p className="text-xs font-black text-gray-400 uppercase tracking-widest">Rehberler yükleniyor...</p>
|
||||
</div>
|
||||
) : guides.length === 0 ? (
|
||||
<div className="text-center py-24 space-y-6">
|
||||
<div className="w-20 h-20 bg-orange-50 rounded-3xl flex items-center justify-center mx-auto border-2 border-dashed border-orange-200">
|
||||
<Compass className="h-8 w-8 text-orange-300" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-black text-gray-900 tracking-tight uppercase">Henüz rehber yok</h3>
|
||||
<p className="text-gray-400 text-sm mt-2 italic">İlk rehberi siz oluşturun.</p>
|
||||
</div>
|
||||
<Button className="bg-orange-600 hover:bg-orange-700 h-12 px-8 rounded-xl font-black" asChild>
|
||||
<Link to="/planner">Rota Oluştur</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<p className="text-sm font-bold text-gray-400">{guides.length} rehber</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{guides.map((guide, idx) => (
|
||||
<motion.div
|
||||
key={guide.id}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
>
|
||||
<Link to={`/rehber/${guide.id}`} className="group block">
|
||||
<div className="bg-white rounded-3xl overflow-hidden border-2 border-gray-50 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||
|
||||
{/* Cover image */}
|
||||
<div className="relative h-52 overflow-hidden bg-gray-100">
|
||||
<img
|
||||
src={getGuidePhoto(guide)}
|
||||
alt={guide.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = 'https://images.unsplash.com/photo-1541167760496-1628856ab772?w=800&q=80';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
|
||||
|
||||
{/* Stats overlay */}
|
||||
<div className="absolute top-3 right-3 flex gap-1.5">
|
||||
<Badge className="bg-black/40 text-white border-0 backdrop-blur-sm text-[9px] font-black px-2">
|
||||
{getDayCount(guide)} GÜN
|
||||
</Badge>
|
||||
<Badge className="bg-black/40 text-white border-0 backdrop-blur-sm text-[9px] font-black px-2">
|
||||
{getPlaceCount(guide)} DURAK
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Like button */}
|
||||
<button
|
||||
onClick={(e) => handleLike(e, guide.id)}
|
||||
className={cn(
|
||||
'absolute top-3 left-3 w-9 h-9 rounded-full flex items-center justify-center backdrop-blur-sm transition-all',
|
||||
myLikes.has(guide.id)
|
||||
? 'bg-red-500 text-white'
|
||||
: 'bg-black/30 text-white hover:bg-red-500'
|
||||
)}
|
||||
>
|
||||
<Heart className={cn('h-4 w-4', myLikes.has(guide.id) && 'fill-current')} />
|
||||
</button>
|
||||
|
||||
{/* Title */}
|
||||
<div className="absolute bottom-3 left-4 right-4">
|
||||
<h3 className="text-base font-black text-white leading-tight line-clamp-2 group-hover:text-orange-300 transition-colors">
|
||||
{guide.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Author intro */}
|
||||
{guide.guide_intro && (
|
||||
<p className="text-xs text-gray-500 italic leading-relaxed line-clamp-2">
|
||||
"{guide.guide_intro}"
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Meta */}
|
||||
<div className="flex items-center gap-4 text-[10px] font-bold text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="h-3 w-3 text-primary" />
|
||||
{guide.destination || 'Kapadokya'}
|
||||
</span>
|
||||
{guide.start_date && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3 text-primary" />
|
||||
{format(new Date(guide.start_date), 'd MMM yyyy', { locale: tr })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between pt-1 border-t border-gray-50">
|
||||
<div className="flex items-center gap-3 text-[10px] font-bold text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<Heart className="h-3 w-3" />
|
||||
{guide.likes_count || 0}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Eye className="h-3 w-3" />
|
||||
{guide.views_count || 0}
|
||||
</span>
|
||||
{guide.profiles?.username && (
|
||||
<span className="text-gray-300">@{guide.profiles.username}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="flex items-center gap-1 text-[10px] font-black text-orange-600 group-hover:gap-2 transition-all">
|
||||
İncele <ArrowRight className="h-3 w-3" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user