src/components/ResultDisplay.tsx

typescript
import { usePromptStore } from '../core/models/store';
import { Button } from './ui/Button';
import { Copy, Check } from 'lucide-react';
import { useState } from 'react';

export const ResultDisplay = () => {
    const { optimizedPrompt } = usePromptStore();
    const [copied, setCopied] = useState(false);
    
    const handleCopy = async () => {
        await navigator.clipboard.writeText(optimizedPrompt);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <div className="flex flex-col h-full">
            <div className="flex justify-between items-center mb-2">
                <label className="text-sm font-medium text-gray-700">Optimierter Prompt</label>
                {optimizedPrompt && (
                    <Button variant="ghost" size="sm" onClick={handleCopy}>
                        {copied ? <Check className="w-4 h-4 mr-1" /> : <Copy className="w-4 h-4 mr-1" />}
                        {copied ? 'Kopiert!' : 'Kopieren'}
                    </Button>
                )}
            </div>
            <div className="flex-1 rounded-lg border border-gray-300 bg-gray-50 p-4 overflow-auto">
                {optimizedPrompt ? (
                    <pre className="text-sm whitespace-pre-wrap font-mono">{optimizedPrompt}</pre>
                ) : (
                    <p className="text-gray-400 text-sm">Der optimierte Prompt wird hier angezeigt...</p>
                )}
            </div>
        </div>
    );
};

</html>