321 lines
16 KiB
JavaScript
321 lines
16 KiB
JavaScript
import { Search, User, Play, Archive, History, Settings, Volume2, Heart, MessageCircle, Share2, Bookmark, MoreVertical } from 'lucide-react'
|
|
|
|
export default function App() {
|
|
return (
|
|
<div className="h-screen bg-[#27282a] text-gray-200 flex flex-col overflow-hidden">
|
|
{/* Header */}
|
|
<header className="bg-[#27282a] border-b border-gray-700 px-4 py-3 flex-shrink-0">
|
|
<div className="max-w-[1400px] mx-auto flex items-center justify-between gap-6">
|
|
{/* Left: Logo */}
|
|
<div className="flex items-center gap-3 flex-shrink-0">
|
|
<div className="w-8 h-8 bg-[#f4b840] rounded-lg flex items-center justify-center">
|
|
<Volume2 size={18} className="text-white" />
|
|
</div>
|
|
<h1 className="text-lg font-bold text-gray-200">VoiceVault</h1>
|
|
</div>
|
|
|
|
{/* Center: Search Bar */}
|
|
<div className="flex-1 max-w-2xl">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search archives, stories, history..."
|
|
className="w-full bg-[#1f2022] border border-gray-700 rounded-lg pl-10 pr-4 py-2 text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Login */}
|
|
<div className="flex items-center gap-3 flex-shrink-0">
|
|
<button className="bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] px-4 py-2 rounded text-sm font-medium flex items-center gap-2">
|
|
<User size={16} />
|
|
Log In
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 flex overflow-hidden max-w-[1400px] mx-auto w-full">
|
|
{/* Sidebar - Profile */}
|
|
<aside className="w-64 bg-[#27282a] border-r border-gray-700 p-6 hidden md:block flex-shrink-0 overflow-y-auto">
|
|
<div className="sticky top-6">
|
|
{/* Profile Image */}
|
|
<div className="w-32 h-32 bg-gradient-to-br from-[#f4b840] to-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] font-bold text-4xl mx-auto mb-4">
|
|
JD
|
|
</div>
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-xl font-semibold text-gray-200 mb-1">John Doe</h2>
|
|
<p className="text-sm text-gray-400">Oral Historian</p>
|
|
<p className="text-xs text-gray-500 mt-2">San Francisco, CA</p>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="space-y-2 mb-6">
|
|
<button className="w-full flex items-center gap-3 px-3 py-2 rounded text-sm text-gray-200 bg-gray-800 hover:bg-gray-750 transition-colors">
|
|
<Play size={18} />
|
|
<span>Post to Archive</span>
|
|
</button>
|
|
<button className="w-full flex items-center gap-3 px-3 py-2 rounded text-sm text-gray-300 hover:bg-gray-800 transition-colors">
|
|
<Archive size={18} />
|
|
<span>Posted Archives</span>
|
|
</button>
|
|
<button className="w-full flex items-center gap-3 px-3 py-2 rounded text-sm text-gray-300 hover:bg-gray-800 transition-colors">
|
|
<History size={18} />
|
|
<span>History</span>
|
|
</button>
|
|
<button className="w-full flex items-center gap-3 px-3 py-2 rounded text-sm text-gray-300 hover:bg-gray-800 transition-colors">
|
|
<Settings size={18} />
|
|
<span>Settings</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-3 gap-2 p-3 bg-[#1f2022] rounded border border-gray-700">
|
|
<div className="text-center">
|
|
<div className="text-base font-semibold text-gray-200">127</div>
|
|
<div className="text-xs text-gray-500">Posts</div>
|
|
</div>
|
|
<div className="text-center border-x border-gray-700">
|
|
<div className="text-base font-semibold text-gray-200">2.4k</div>
|
|
<div className="text-xs text-gray-500">Listeners</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-base font-semibold text-gray-200">89</div>
|
|
<div className="text-xs text-gray-500">Following</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content - Feed */}
|
|
<main className="flex-1 overflow-y-auto p-6">
|
|
<div className="max-w-3xl mx-auto space-y-6">
|
|
|
|
{/* Audio Post Card */}
|
|
<article className="bg-[#1f2022] rounded-lg border border-gray-700 overflow-hidden">
|
|
{/* Post Header */}
|
|
<div className="p-6 pb-4">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-pink-500 to-pink-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
|
|
DM
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold text-gray-200">Diana Martinez</span>
|
|
<span className="text-gray-500 text-sm">• 2 hours ago</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-xs px-2 py-1 bg-[#f4b840]/10 text-[#f4b840] rounded border border-[#f4b840]/20">Historical Events</span>
|
|
<span className="text-xs px-2 py-1 bg-blue-500/10 text-blue-400 rounded border border-blue-500/20">Personal Stories</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button className="text-gray-500 hover:text-gray-300">
|
|
<MoreVertical size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-gray-200 mb-3">My Grandmother's Journey Through WWII</h3>
|
|
|
|
{/* Audio Player */}
|
|
<div className="bg-[#27282a] rounded-lg p-4 border border-gray-700">
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<button className="w-10 h-10 bg-[#f4b840] hover:bg-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a]">
|
|
<Play size={16} fill="currentColor" />
|
|
</button>
|
|
<div className="flex-1">
|
|
<div className="h-1.5 bg-gray-700 rounded-full overflow-hidden mb-2">
|
|
<div className="h-full w-1/3 bg-[#f4b840] rounded-full"></div>
|
|
</div>
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>2:34</span>
|
|
<span>7:52</span>
|
|
</div>
|
|
</div>
|
|
<button className="text-gray-400 hover:text-gray-200">
|
|
<Volume2 size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Transcription Preview */}
|
|
<div className="mt-4 p-4 bg-[#27282a] rounded-lg border border-gray-700">
|
|
<p className="text-sm text-gray-300 leading-relaxed line-clamp-3">
|
|
"I remember the day clearly, despite all these years. We were living in a small village outside Warsaw when the news came. My mother gathered us all together and told us we had to leave everything behind..."
|
|
</p>
|
|
<button className="text-xs text-[#f4b840] hover:text-[#e5a930] mt-2 font-medium">
|
|
Read full transcript →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Post Actions */}
|
|
<div className="px-6 py-4 border-t border-gray-700 flex items-center gap-6">
|
|
<button className="flex items-center gap-2 text-gray-400 hover:text-gray-200 text-sm">
|
|
<Heart size={18} />
|
|
<span>248</span>
|
|
</button>
|
|
<button className="flex items-center gap-2 text-gray-400 hover:text-gray-200 text-sm">
|
|
<MessageCircle size={18} />
|
|
<span>32</span>
|
|
</button>
|
|
<button className="flex items-center gap-2 text-gray-400 hover:text-gray-200 text-sm">
|
|
<Share2 size={18} />
|
|
<span>Share</span>
|
|
</button>
|
|
<button className="ml-auto text-gray-400 hover:text-gray-200">
|
|
<Bookmark size={18} />
|
|
</button>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Second Audio Post Card */}
|
|
<article className="bg-[#1f2022] rounded-lg border border-gray-700 overflow-hidden">
|
|
<div className="p-6 pb-4">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
|
|
RM
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold text-gray-200">Robert Miller</span>
|
|
<span className="text-gray-500 text-sm">• 5 hours ago</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-xs px-2 py-1 bg-purple-500/10 text-purple-400 rounded border border-purple-500/20">Cultural Traditions</span>
|
|
<span className="text-xs px-2 py-1 bg-green-500/10 text-green-400 rounded border border-green-500/20">Oral History</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button className="text-gray-500 hover:text-gray-300">
|
|
<MoreVertical size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-gray-200 mb-3">Traditional Music of the Appalachian Mountains</h3>
|
|
|
|
<div className="bg-[#27282a] rounded-lg p-4 border border-gray-700">
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<button className="w-10 h-10 bg-[#f4b840] hover:bg-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a]">
|
|
<Play size={16} fill="currentColor" />
|
|
</button>
|
|
<div className="flex-1">
|
|
<div className="h-1.5 bg-gray-700 rounded-full overflow-hidden mb-2">
|
|
<div className="h-full w-1/2 bg-[#f4b840] rounded-full"></div>
|
|
</div>
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>4:15</span>
|
|
<span>8:30</span>
|
|
</div>
|
|
</div>
|
|
<button className="text-gray-400 hover:text-gray-200">
|
|
<Volume2 size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 p-4 bg-[#27282a] rounded-lg border border-gray-700">
|
|
<p className="text-sm text-gray-300 leading-relaxed line-clamp-3">
|
|
"This song has been passed down through five generations of our family. My great-great-grandfather used to play it on his banjo during summer evenings on the porch. The melody tells the story of..."
|
|
</p>
|
|
<button className="text-xs text-[#f4b840] hover:text-[#e5a930] mt-2 font-medium">
|
|
Read full transcript →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-6 py-4 border-t border-gray-700 flex items-center gap-6">
|
|
<button className="flex items-center gap-2 text-gray-400 hover:text-gray-200 text-sm">
|
|
<Heart size={18} />
|
|
<span>412</span>
|
|
</button>
|
|
<button className="flex items-center gap-2 text-gray-400 hover:text-gray-200 text-sm">
|
|
<MessageCircle size={18} />
|
|
<span>58</span>
|
|
</button>
|
|
<button className="flex items-center gap-2 text-gray-400 hover:text-gray-200 text-sm">
|
|
<Share2 size={18} />
|
|
<span>Share</span>
|
|
</button>
|
|
<button className="ml-auto text-gray-400 hover:text-gray-200">
|
|
<Bookmark size={18} />
|
|
</button>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
{/* Right Sidebar - Trending */}
|
|
<aside className="w-64 bg-[#27282a] border-l border-gray-700 p-4 hidden lg:block overflow-y-auto">
|
|
<div className="sticky top-4 space-y-6">
|
|
|
|
{/* Trending Categories */}
|
|
<div className="bg-[#1f2022] rounded-lg p-4 border border-gray-700">
|
|
<h3 className="text-sm font-semibold text-gray-200 mb-3">Trending Topics</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-200">Historical Events</p>
|
|
<p className="text-xs text-gray-500">1.2k new stories</p>
|
|
</div>
|
|
<div className="text-xs text-[#f4b840] font-semibold">↑ 23%</div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-200">Family Stories</p>
|
|
<p className="text-xs text-gray-500">892 new stories</p>
|
|
</div>
|
|
<div className="text-xs text-green-400 font-semibold">↑ 18%</div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-200">Cultural Heritage</p>
|
|
<p className="text-xs text-gray-500">654 new stories</p>
|
|
</div>
|
|
<div className="text-xs text-blue-400 font-semibold">↑ 12%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Suggested Follows */}
|
|
<div className="bg-[#1f2022] rounded-lg p-4 border border-gray-700">
|
|
<h3 className="text-sm font-semibold text-gray-200 mb-3">Suggested Historians</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
|
|
SL
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-200 truncate">Sarah Lewis</p>
|
|
<p className="text-xs text-gray-500">342 followers</p>
|
|
</div>
|
|
<button className="text-xs px-3 py-1 bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] rounded font-medium">
|
|
Follow
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
|
|
MK
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-200 truncate">Mike Kim</p>
|
|
<p className="text-xs text-gray-500">218 followers</p>
|
|
</div>
|
|
<button className="text-xs px-3 py-1 bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] rounded font-medium">
|
|
Follow
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|