janpeter visser
ffda65490f
- Product aanmaken/bewerken/archiveren/herstellen (ST-101, ST-103) - SplitPane component met versleepbare splitter en localStorage (ST-104) - PanelNavBar herbruikbaar paneelheader component (ST-105) - PbiList met prioriteitsgroepen, inline aanmaken, filter en verwijderen (ST-106-ST-110) - StoryPanel placeholder rechter paneel met selectie via Zustand (ST-109) - App iconen geinstalleerd: favicon, apple-icon, PWA manifest (192/512px) - AppIcon SVG component in navigatiebar - Root layout metadata bijgewerkt naar Nederlands Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { useSelectionStore } from '@/stores/selection-store'
|
|
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
|
|
|
interface Story {
|
|
id: string
|
|
title: string
|
|
status: string
|
|
}
|
|
|
|
interface StoryPanelProps {
|
|
storiesByPbi: Record<string, Story[]>
|
|
isDemo: boolean
|
|
}
|
|
|
|
export function StoryPanel({ storiesByPbi, isDemo }: StoryPanelProps) {
|
|
const { selectedPbiId } = useSelectionStore()
|
|
|
|
const stories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : null
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<PanelNavBar
|
|
title="Stories"
|
|
actions={
|
|
selectedPbiId && !isDemo ? (
|
|
<button className="text-xs text-primary hover:underline">+ Story</button>
|
|
) : undefined
|
|
}
|
|
/>
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{stories === null ? (
|
|
<p className="text-sm text-muted-foreground text-center mt-8">
|
|
Selecteer een PBI om de stories te bekijken.
|
|
</p>
|
|
) : stories.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center mt-8">
|
|
Nog geen stories voor dit PBI.
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{stories.map(story => (
|
|
<div
|
|
key={story.id}
|
|
className="bg-surface-container-low border border-border rounded-lg p-3 text-sm"
|
|
>
|
|
{story.title}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|