Story Highlights

Instagram-style story circles with new indicators, live badges, and full-screen viewer.

Preview

Usage

import { StoryHighlights, StoryViewer } from "@/components/profile"

const stories = [
  { id: "1", title: "Travel", image: "/travel.jpg", isNew: true },
  { id: "2", title: "Food", image: "/food.jpg" },
  { id: "3", title: "Live", image: "/live.jpg", isLive: true },
]

<StoryHighlights
  stories={stories}
  showAddButton
  onAddClick={() => console.log("Add")}
  onStoryClick={(story) => openViewer(story)}
/>

Props

Prop	Type	Default
stories	StoryItem[]	required
showAddButton	boolean	false
onAddClick	() => void	-
onStoryClick	(story) => void	-
size	"sm" \| "md" \| "lg"	"md"

Story Item Interface

interface StoryItem {
  id: string
  title: string
  image: string
  isNew?: boolean    // Shows gradient ring
  isLive?: boolean   // Shows "LIVE" badge
  items?: StoryContent[]  // For StoryViewer
}