| 1 | "use client"; |
| 2 | |
| 3 | import { useState } from "react"; |
| 4 | import { type Story } from "@/lib/data"; |
| 5 | import { Avatar } from "@/components/ui/avatar"; |
| 6 | |
| 7 | function StoryRing({ story, onPress }: { story: Story & { seen: boolean }; onPress: () => void }) { |
| 8 | return ( |
| 9 | <button |
| 10 | onClick={onPress} |
| 11 | className="flex flex-col items-center gap-1.5 shrink-0 active:opacity-70 transition-opacity" |
| 12 | > |
| 13 | <div |
| 14 | className={`p-[2px] rounded-full ${ |
| 15 | story.seen |
| 16 | ? "bg-white/15" |
| 17 | : "bg-gradient-to-tr from-white/80 via-white/40 to-white/80" |
| 18 | }`} |
| 19 | > |
| 20 | <div className="p-[2px] rounded-full bg-nord-black"> |
| 21 | <Avatar letter={story.avatar} size="lg" /> |
| 22 | </div> |
| 23 | </div> |
| 24 | <span className="text-[10px] text-nord-white/60 tracking-tight max-w-[52px] truncate"> |
| 25 | {story.handle} |
| 26 | </span> |
| 27 | </button> |
| 28 | ); |
| 29 | } |
| 30 | |
| 31 | export default function StoriesBar({ stories }: { stories: Story[] }) { |
| 32 | const [seenIds, setSeenIds] = useState<Set<number>>(new Set()); |
| 33 | |
| 34 | return ( |
| 35 | <div |
| 36 | className="overflow-x-auto flex gap-4 px-4 py-4 border-b border-white/6" |
| 37 | style={{ scrollbarWidth: "none" }} |
| 38 | > |
| 39 | {/* Your story slot */} |
| 40 | <button className="flex flex-col items-center gap-1.5 shrink-0 active:opacity-70 transition-opacity"> |
| 41 | <div className="w-14 h-14 rounded-full border-2 border-dashed border-white/20 flex items-center justify-center"> |
| 42 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="text-nord-white/40"> |
| 43 | <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /> |
| 44 | <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /> |
| 45 | </svg> |
| 46 | </div> |
| 47 | <span className="text-[10px] text-nord-white/40 tracking-tight">your story</span> |
| 48 | </button> |
| 49 | |
| 50 | {stories.map((story) => ( |
| 51 | <StoryRing |
| 52 | key={story.id} |
| 53 | story={{ ...story, seen: seenIds.has(story.id) || story.seen }} |
| 54 | onPress={() => setSeenIds((prev) => new Set(prev).add(story.id))} |
| 55 | /> |
| 56 | ))} |
| 57 | </div> |
| 58 | ); |
| 59 | } |