Skip to content

Commit 7d82484

Browse files
bibhuti-sshbibhuti-ssh
authored
Merge pull request #20 from bibhuti-ssh/main
blogs - end to end finished
2 parents 70cda85 + aeb32e8 commit 7d82484

File tree

9 files changed

+950
-191
lines changed

9 files changed

+950
-191
lines changed

‎Cassidy-Talking-Avatar/src/app/dashboard/blogs/[slug]/page.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { getBlogPostBySlug } from "@/lib/firebase-blog"
55
import type { BlogPost } from "@/types/blog"
66
import CommentSection from "@/components/blog/CommentSection"
77
import BlogPostActions from "@/components/blog/BlogPostActions"
8+
import { followUser } from "@/lib/firebase-blog"
9+
import FollowCard from "@/components/blog/FollowCard"
810

911
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
1012
const { slug } = await params;
@@ -46,19 +48,13 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
4648
<div className="mb-8">
4749
<h1 className="text-3xl md:text-4xl font-bold mb-4">{typedPost.title}</h1>
4850

49-
<div className="flex items-center mb-6">
50-
<img
51-
src={typedPost.author.avatar || "/placeholder.svg"}
52-
alt={typedPost.author.name}
53-
className="w-10 h-10 rounded-full mr-3"
54-
/>
55-
<div>
56-
<div className="font-medium">{typedPost.author.name}</div>
57-
<div className="text-sm text-gray-400">
58-
{new Date(typedPost.date).toLocaleDateString()} · {typedPost.readTime} min read
59-
</div>
60-
</div>
61-
</div>
51+
<FollowCard
52+
targetUserId={typedPost.author.id}
53+
avatarUrl={typedPost.author.avatar}
54+
authorName={typedPost.author.name}
55+
postDate={typedPost.date}
56+
readTime={typedPost.readTime}
57+
/>
6258

6359
<div className="flex flex-wrap gap-2 mb-6">
6460
{typedPost.tags.map((tag, index) => (
@@ -70,7 +66,6 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
7066
</span>
7167
))}
7268
</div>
73-
7469
<div className="aspect-video overflow-hidden rounded-lg mb-8">
7570
<img
7671
src={typedPost.coverImage || "/placeholder.svg"}

‎Cassidy-Talking-Avatar/src/app/dashboard/blogs/following/page.tsx‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
'use client'
2+
3+
import { useState, useEffect } from 'react'
4+
import { Users, Heart, MessageCircle, Bookmark, Clock, ArrowLeft } from 'lucide-react'
5+
import Link from 'next/link'
6+
import { getFollowingBlogPosts } from '@/lib/firebase-blog'
7+
import type { BlogPost } from '@/types/blog'
8+
import { getCurrentUser } from '@/lib/firebase'
9+
import { requireAuth } from '@/lib/firebase'
10+
11+
export default function FollowingPage() {
12+
const [posts, setPosts] = useState<BlogPost[]>([])
13+
const [loading, setLoading] = useState(true)
14+
const [error, setError] = useState<string | null>(null)
15+
16+
// You'll need to get current user ID from your auth context
17+
const [currentUserId, setCurrentUserId] = useState<string | null>(null) // Replace with actual user ID from auth
18+
19+
useEffect(() => {
20+
async function fetchFollowingPosts() {
21+
try {
22+
setLoading(true)
23+
console.log("ruk ja sabar kar");
24+
await requireAuth() ;
25+
const user = await getCurrentUser()
26+
27+
console.log(user, 'user fetched')
28+
29+
if (!user) {
30+
setError('User not logged in')
31+
return
32+
}
33+
34+
setCurrentUserId(user.uid);
35+
const followingPosts = await getFollowingBlogPosts(currentUserId);
36+
setPosts(followingPosts)
37+
} catch (err) {
38+
setError('Failed to load posts from people you follow')
39+
console.error(err)
40+
} finally {
41+
setLoading(false)
42+
}
43+
}
44+
45+
fetchFollowingPosts()
46+
}, [currentUserId])
47+
48+
if (loading) {
49+
return (
50+
<div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-emerald-950">
51+
<div className="container mx-auto px-4 py-8">
52+
<div className="flex items-center justify-center min-h-[400px]">
53+
<div className="text-center">
54+
<div className="w-12 h-12 border-4 border-emerald-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
55+
<p className="text-gray-400">Loading posts from people you follow...</p>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
)
61+
}
62+
63+
return (
64+
<div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-emerald-950">
65+
{/* Header */}
66+
<header className="bg-gradient-to-r from-gray-900 via-gray-800 to-emerald-900/20 border-b border-gray-700/50 backdrop-blur-sm">
67+
<div className="container mx-auto px-4 py-6">
68+
<div className="flex items-center justify-between">
69+
<div className="flex items-center space-x-4">
70+
<Link
71+
href="/dashboard/blogs"
72+
className="p-2 bg-gray-700/50 hover:bg-emerald-700/50 rounded-lg transition-colors"
73+
>
74+
<ArrowLeft className="h-5 w-5 text-emerald-400" />
75+
</Link>
76+
<div className="flex items-center space-x-3">
77+
<Users className="h-8 w-8 text-emerald-400" />
78+
<div>
79+
<h1 className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-green-400 bg-clip-text text-transparent">
80+
Following
81+
</h1>
82+
<p className="text-gray-400 text-sm">Posts from people you follow</p>
83+
</div>
84+
</div>
85+
</div>
86+
<div className="text-sm text-emerald-300 bg-emerald-900/30 px-3 py-2 rounded-lg border border-emerald-700/50">
87+
{posts.length} posts
88+
</div>
89+
</div>
90+
</div>
91+
</header>
92+
93+
<div className="container mx-auto px-4 py-8">
94+
{error && (
95+
<div className="bg-red-900/20 border border-red-700/50 rounded-lg p-4 mb-6">
96+
<p className="text-red-400">{error}</p>
97+
</div>
98+
)}
99+
100+
{posts.length === 0 ? (
101+
<div className="text-center py-16">
102+
<Users className="h-16 w-16 text-gray-600 mx-auto mb-4" />
103+
<h3 className="text-xl font-semibold text-gray-400 mb-2">No posts yet</h3>
104+
<p className="text-gray-500 mb-6">
105+
You're not following anyone yet, or they haven't posted anything.
106+
</p>
107+
<Link
108+
href="/dashboard/blogs/top-authors"
109+
className="bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-500 hover:to-green-500 text-white px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105"
110+
>
111+
Discover Authors
112+
</Link>
113+
</div>
114+
) : (
115+
<div className="space-y-6">
116+
{posts.map((post) => (
117+
<article key={post.id} className="bg-gradient-to-br from-gray-800/50 via-gray-700/30 to-emerald-900/10 rounded-xl p-6 border border-gray-600/30 hover:border-emerald-600/50 transition-all duration-300">
118+
<div className="flex items-start space-x-4">
119+
{/* Author Avatar */}
120+
<div className="w-12 h-12 bg-gradient-to-br from-emerald-600 to-green-600 rounded-full flex items-center justify-center flex-shrink-0">
121+
<span className="text-white font-semibold text-lg">
122+
{post.author.name.charAt(0).toUpperCase()}
123+
</span>
124+
</div>
125+
126+
{/* Post Content */}
127+
<div className="flex-1 min-w-0">
128+
{/* Author & Date */}
129+
<div className="flex items-center space-x-2 mb-3">
130+
<span className="font-medium text-emerald-400">{post.author.name}</span>
131+
<span className="text-gray-500">•</span>
132+
<span className="text-gray-500 text-sm">
133+
{new Date(post.date).toLocaleDateString()}
134+
</span>
135+
<span className="text-gray-500">•</span>
136+
<div className="flex items-center text-gray-500 text-sm">
137+
<Clock className="h-4 w-4 mr-1" />
138+
{post.readTime} min read
139+
</div>
140+
</div>
141+
142+
{/* Title & Excerpt */}
143+
<Link href={`/dashboard/blogs/${post.slug}`} className="group">
144+
<h2 className="text-xl font-semibold text-white mb-2 group-hover:text-emerald-300 transition-colors">
145+
{post.title}
146+
</h2>
147+
<p className="text-gray-300 mb-4 line-clamp-2">
148+
{post.excerpt}
149+
</p>
150+
</Link>
151+
152+
{/* Tags */}
153+
{post.tags.length > 0 && (
154+
<div className="flex flex-wrap gap-2 mb-4">
155+
{post.tags.slice(0, 3).map((tag) => (
156+
<span
157+
key={tag}
158+
className="text-xs bg-emerald-800/30 text-emerald-300 px-2 py-1 rounded-full border border-emerald-700/50"
159+
>
160+
#{tag}
161+
</span>
162+
))}
163+
</div>
164+
)}
165+
166+
{/* Engagement Stats */}
167+
<div className="flex items-center space-x-6 text-gray-400 text-sm">
168+
<div className="flex items-center space-x-1">
169+
<Heart className="h-4 w-4" />
170+
<span>{post.likes}</span>
171+
</div>
172+
<div className="flex items-center space-x-1">
173+
<MessageCircle className="h-4 w-4" />
174+
<span>{post.comments}</span>
175+
</div>
176+
<div className="flex items-center space-x-1">
177+
<Bookmark className="h-4 w-4" />
178+
<span>{post.bookmarks}</span>
179+
</div>
180+
</div>
181+
</div>
182+
</div>
183+
</article>
184+
))}
185+
</div>
186+
)}
187+
</div>
188+
</div>
189+
)
190+
}

0 commit comments

Comments
 (0)