File size: 5,468 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 |
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Search, Tag, TrendingUp, Calendar, BookOpen } from "lucide-react"
import Link from "next/link"
// Mock data for popular tags
const POPULAR_TAGS = [
{ id: 1, name: "Rural Healthcare", count: 24 },
{ id: 2, name: "Traditional Wisdom", count: 18 },
{ id: 3, name: "Blockchain", count: 15 },
{ id: 4, name: "Community Support", count: 12 },
{ id: 5, name: "Digital Health", count: 10 },
{ id: 6, name: "Midwifery", count: 9 },
{ id: 7, name: "Guardian Stories", count: 8 },
{ id: 8, name: "African Medicine", count: 7 },
]
// Mock data for trending stories
const TRENDING_STORIES = [
{ id: 1, title: "How One CHW Transformed Maternal Care in Rural Kenya", views: 1245 },
{ id: 2, title: "The Ancient Healing Rituals Finding New Life in Modern Care", views: 982 },
{ id: 3, title: "From Isolation to Connection: The Digital Revolution in Rural Healthcare", views: 876 },
{ id: 4, title: "Guardian Voices: The Elders Preserving Medical Traditions", views: 754 },
]
export function JourneySidebar() {
return (
<div className="space-y-6">
{/* Search Card */}
<Card className="bg-ash-gray/30 border border-gray-700">
<CardContent className="pt-6">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
<input
type="text"
placeholder="Search stories..."
className="w-full bg-ash-gray/50 border border-gray-700 rounded-md pl-10 pr-4 py-2 text-white placeholder-gray-500"
/>
</div>
</CardContent>
</Card>
{/* Popular Tags Card */}
<Card className="bg-ash-gray/30 border border-gray-700">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-heading flex items-center">
<Tag className="h-5 w-5 mr-2 text-pulse" />
Popular Tags
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{POPULAR_TAGS.map((tag) => (
<Badge key={tag.id} className="bg-ash-gray/50 hover:bg-ash-gray text-white cursor-pointer">
{tag.name} <span className="ml-1 text-gray-400">({tag.count})</span>
</Badge>
))}
</div>
</CardContent>
</Card>
{/* Trending Stories Card */}
<Card className="bg-ash-gray/30 border border-gray-700">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-heading flex items-center">
<TrendingUp className="h-5 w-5 mr-2 text-flame" />
Trending Stories
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{TRENDING_STORIES.map((story) => (
<div key={story.id} className="group">
<Link href="#" className="text-gray-300 group-hover:text-flame transition-colors">
{story.title}
</Link>
<div className="text-xs text-gray-500 mt-1">{story.views.toLocaleString()} views</div>
</div>
))}
</div>
</CardContent>
</Card>
{/* Archives Card */}
<Card className="bg-ash-gray/30 border border-gray-700">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-heading flex items-center">
<Calendar className="h-5 w-5 mr-2 text-neon" />
Archives
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2">
<Link href="#" className="block text-gray-300 hover:text-neon transition-colors">
May 2023 <span className="text-gray-500">(12)</span>
</Link>
<Link href="#" className="block text-gray-300 hover:text-neon transition-colors">
April 2023 <span className="text-gray-500">(15)</span>
</Link>
<Link href="#" className="block text-gray-300 hover:text-neon transition-colors">
March 2023 <span className="text-gray-500">(9)</span>
</Link>
<Link href="#" className="block text-gray-300 hover:text-neon transition-colors">
February 2023 <span className="text-gray-500">(7)</span>
</Link>
<Link href="#" className="block text-gray-300 hover:text-neon transition-colors">
January 2023 <span className="text-gray-500">(10)</span>
</Link>
</div>
</CardContent>
</Card>
{/* Resources Card */}
<Card className="bg-gradient-to-br from-pulse/20 to-flame/20 border border-gray-700">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-heading flex items-center">
<BookOpen className="h-5 w-5 mr-2 text-white" />
Resources
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-gray-300 mb-4">Access guides, research, and tools to support your healthcare journey.</p>
<Link
href="#"
className="block w-full bg-pulse hover:bg-flame text-center text-white py-2 rounded-md transition-colors"
>
Explore Resources
</Link>
</CardContent>
</Card>
</div>
)
}
|