File size: 2,083 Bytes
28269c5 009a97a 28269c5 009a97a 28269c5 009a97a 28269c5 009a97a 28269c5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { ChevronDown, ChevronUp } from 'lucide-react';
type TranscriptToggleProps = {
content: string;
};
const TranscriptToggle = ({ content }: TranscriptToggleProps) => {
const [isExpanded, setIsExpanded] = useState(false);
const toggleTranscript = () => {
setIsExpanded(!isExpanded);
};
return (
<div className="mt-3">
<button
onClick={toggleTranscript}
className="flex items-center space-x-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500 rounded"
aria-expanded={isExpanded}
aria-label={isExpanded ? "Hide transcript" : "Show transcript"}
>
<span>{isExpanded ? "Hide transcript" : "Show transcript"}</span>
{isExpanded ? (
<ChevronUp className="w-4 h-4" />
) : (
<ChevronDown className="w-4 h-4" />
)}
</button>
{isExpanded && (
<div
className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-sm leading-relaxed break-words"
>
<ReactMarkdown
components={{
p: ({ node, ...props }) => (
<p {...props} className="whitespace-pre-wrap mb-2 last:mb-0" />
),
ul: ({ node, ...props }) => (
<ul
{...props}
className="list-disc ml-5 space-y-1 mb-2 last:mb-0"
/>
),
ol: ({ node, ...props }) => (
<ol
{...props}
className="list-decimal ml-5 space-y-1 mb-2 last:mb-0"
/>
),
li: ({ node, ...props }) => (
<li {...props} className="ml-1" />
),
}}
>
{content}
</ReactMarkdown>
</div>
)}
</div>
);
};
export default TranscriptToggle; |