feat(swift): E0 Setup & Foundation + documentatie
Swift - Contextual UI EPD: "Van 12 klikken naar 1 zin" Documentatie: - PRD, FO, TO, UX specificaties - Bouwplan met 6 epics, 27 stories (68 SP) - Analyse en onderzoeksdocumenten E0 Setup & Foundation: - E0.S1: Zustand v5.0.9 geïnstalleerd - E0.S2: Swift store met context, blocks, input state - E0.S3: /epd/swift route met eigen layout (dark theme) - E0.S4: Folder structuur components/swift/, lib/swift/ Components: - CommandCenter (container) - ContextBar (shift, patient) - CommandInput (text + voice button) - RecentStrip (laatste 5 acties) - BlockContainer (wrapper voor blocks) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
50
components/swift/blocks/block-container.tsx
Normal file
50
components/swift/blocks/block-container.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Block Container
|
||||
*
|
||||
* Wrapper for ephemeral blocks with animation, close button, and sizing.
|
||||
*/
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { useSwiftStore } from '@/stores/swift-store';
|
||||
import type { BlockSize } from '@/lib/swift/types';
|
||||
|
||||
interface BlockContainerProps {
|
||||
title: string;
|
||||
size?: BlockSize;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const SIZE_CLASSES: Record<BlockSize, string> = {
|
||||
sm: 'max-w-sm',
|
||||
md: 'max-w-md',
|
||||
lg: 'max-w-2xl',
|
||||
full: 'max-w-4xl',
|
||||
};
|
||||
|
||||
export function BlockContainer({ title, size = 'md', children }: BlockContainerProps) {
|
||||
const { closeBlock } = useSwiftStore();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full ${SIZE_CLASSES[size]} bg-slate-800 rounded-xl border border-slate-700 shadow-2xl`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-slate-700">
|
||||
<h2 className="text-lg font-medium text-white">{title}</h2>
|
||||
<button
|
||||
onClick={closeBlock}
|
||||
className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
|
||||
title="Sluiten (Esc)"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user