File size: 6,827 Bytes
78d0e31 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
import { Card } from "@/components/ui/card"
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CalendarDays, Clock, ArrowRight, BookOpen } from "lucide-react"
import Link from "next/link"
// Replace this:
// const BLOG_POSTS = [
// {
// id: 1,
// title: "The Sacred Flame: Ancient Wisdom in Modern Healthcare",
// excerpt:
// "Exploring how traditional African healing practices are being integrated with modern medicine to create holistic care systems that honor cultural heritage while embracing innovation.",
// image: "/BridgingWorldsOfHealing.png",
// category: "Tradition",
// author: {
// name: "Dr. Kofi Mensah",
// avatar: "/confident-african-doctor.png",
// },
// date: "May 15, 2023",
// readTime: "8 min read",
// },
// {
// id: 2,
// title: "Guardians of the Scroll: Stories from the Verification Process",
// excerpt:
// "Meet the dedicated Guardians who verify healthcare workers and learn about the profound connections being formed through the blockchain verification process.",
// image: "/connected-care-africa.png",
// category: "Community",
// author: {
// name: "Amina Diallo",
// avatar: "/focused-african-journalist.png",
// },
// date: "April 28, 2023",
// readTime: "6 min read",
// },
// {
// id: 3,
// title: "From Recognition to Resources: The Economic Impact of Flameborn",
// excerpt:
// "How blockchain verification is creating economic opportunities for rural healthcare workers and transforming local economies through direct support mechanisms.",
// image: "/placeholder.svg?height=300&width=600&query=African%20rural%20healthcare%20economy",
// category: "Impact",
// author: {
// name: "Tendai Moyo",
// avatar: "/placeholder.svg?height=40&width=40&query=African%20economist",
// },
// date: "April 10, 2023",
// readTime: "10 min read",
// },
// {
// id: 4,
// title: "The Digital Hearth: Building Virtual Communities of Care",
// excerpt:
// "How technology is enabling healthcare workers across Africa to connect, share knowledge, and support each other despite vast geographical distances.",
// image: "/placeholder.svg?height=300&width=600&query=African%20healthcare%20digital%20community",
// category: "Technology",
// author: {
// name: "Zainab Osei",
// avatar: "/placeholder.svg?height=40&width=40&query=African%20female%20tech%20specialist",
// },
// date: "March 22, 2023",
// readTime: "7 min read",
// },
// ]
// With:
const BLOG_POSTS: any[] = []
// Helper function to get badge color based on category
const getCategoryColor = (category: string) => {
switch (category.toLowerCase()) {
case "tradition":
return "bg-flame/20 text-flame hover:bg-flame/30"
case "community":
return "bg-guardian/20 text-guardian hover:bg-guardian/30"
case "impact":
return "bg-pulse/20 text-pulse hover:bg-pulse/30"
case "technology":
return "bg-neon/20 text-neon hover:bg-neon/30"
default:
return "bg-gray-500/20 text-gray-400 hover:bg-gray-500/30"
}
}
export function JourneyPosts() {
return (
<div>
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-heading text-white">Latest Stories</h2>
<select className="bg-ash-gray/30 border border-gray-700 rounded-md px-3 py-2 text-sm text-white">
<option>All Categories</option>
<option>Tradition</option>
<option>Community</option>
<option>Impact</option>
<option>Technology</option>
</select>
</div>
{BLOG_POSTS.length === 0 ? (
<div className="text-center py-12 bg-ash-gray/30 border border-gray-700 rounded-lg">
<BookOpen className="h-16 w-16 mx-auto mb-4 text-gray-500 opacity-50" />
<h3 className="text-xl font-heading mb-2 text-white">No Stories Yet</h3>
<p className="text-gray-400 mb-6">Be the first to share your Flameborn journey.</p>
<Button className="bg-pulse hover:bg-flame text-white">Submit Your Story</Button>
</div>
) : (
<div className="space-y-8">
{BLOG_POSTS.map((post) => (
<Card key={post.id} className="bg-ash-gray/30 border border-gray-700 overflow-hidden">
<div className="md:flex">
<div className="md:w-1/3 relative overflow-hidden">
<img
src={post.image || "/placeholder.svg"}
alt={post.title}
className="w-full h-full object-cover transition-transform hover:scale-105 duration-500"
style={{ minHeight: "200px" }}
/>
</div>
<div className="p-6 md:w-2/3">
<Badge className={`mb-3 ${getCategoryColor(post.category)}`}>{post.category}</Badge>
<h3 className="text-xl font-heading text-white mb-3 hover:text-flame transition-colors">
<Link href="#">{post.title}</Link>
</h3>
<p className="text-gray-300 mb-4">{post.excerpt}</p>
<div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-700">
<div className="flex items-center">
<Avatar className="h-8 w-8 mr-2">
<img src={post.author.avatar || "/placeholder.svg"} alt={post.author.name} />
</Avatar>
<span className="text-sm text-gray-400">{post.author.name}</span>
</div>
<div className="flex items-center text-xs text-gray-500">
<CalendarDays className="h-3 w-3 mr-1" />
<span className="mr-3">{post.date}</span>
<Clock className="h-3 w-3 mr-1" />
<span>{post.readTime}</span>
</div>
</div>
<Link
href="#"
className="inline-flex items-center text-flame hover:text-pulse transition-colors mt-4 text-sm font-medium"
>
Continue reading <ArrowRight className="h-4 w-4 ml-1" />
</Link>
</div>
</div>
</Card>
))}
</div>
)}
<div className="flex justify-center mt-10">
<button className="bg-transparent border border-pulse text-pulse hover:bg-pulse/10 px-6 py-3 rounded-md font-medium transition-all">
Load More Stories
</button>
</div>
</div>
)
}
|