855744c927
Epic 4 Story 1 compleet: Basis structuur voor meerdere artifacts met tabs.
E4.S1 - ArtifactContainer Component (5 SP)
- Artifact interface gedefineerd in store
- ArtifactTab component met active state en close button
- ArtifactContainer met conditional tab rendering
- Helper functies voor artifact rendering en titels
Nieuwe Components:
- components/swift/artifacts/artifact-tab.tsx (60 regels)
- Tab UI met title, active state, close button
- Hover effects en opacity animations
- Min/max width, title truncation met tooltip
- Stop propagation op close click
- components/swift/artifacts/artifact-container.tsx (127 regels)
- Props: artifacts[], activeArtifactId, onSelect, onClose
- Tabs alleen bij >1 artifact
- renderArtifactBlock(): switch op artifact type
- getArtifactTitle(): user-friendly titles met patient naam
- Placeholder state wanneer geen artifacts
Artifact Interface:
```typescript
interface Artifact {
id: string;
type: BlockType;
prefill: BlockPrefillData;
title: string;
createdAt: Date;
}
```
Features:
- Tab rendering: alleen bij meerdere artifacts
- Active tab styling: amber-500 border bottom
- Close button: opacity 0 → 100 on hover/active
- Title generation: "Dagnotitie - Jan" voor context
- Block rendering: dagnotitie, zoeken, overdracht, fallback
- Placeholder: "Artifacts verschijnen hier" met voorbeelden
- Responsive: min-w-[140px] max-w-[200px] per tab
Tab Styling:
- Active: bg-white + border-b-2 border-b-amber-500
- Hover: bg-slate-50
- Close button: group-hover:opacity-100
- Text: text-sm font-medium truncate
Build Status:
- ✅ pnpm build succesvol (geen type errors)
- Alleen bekende warnings (Supabase realtime, useCallback)
Note: E4.S1 definieert structuur. E4.S2 voegt store management toe
(openArtifacts[], activeArtifactId, openArtifact(), closeArtifact()).
Voortgang: 53 SP / 85 SP (62%) - 17/31 stories compleet, 2 geskipt
Next: E4.S2 (Artifact lifecycle management) - Store state & actions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.