jalvarado
3e64837dd3
- Implemented ProgressBar component to display progress based on states. - Added EstatusEskeleton for loading state indication. - Created documentation page for ProgressBar with examples and props table. - Developed reusable CodeBlock and VistaComponente components for code display. - Introduced IndiceContenido for navigation within documentation. - Styled ProgressBar and related components with SCSS.
21 lines
653 B
TypeScript
21 lines
653 B
TypeScript
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
|
|
|
export const CodeBlock = ({ code }: { code: string }) => (
|
|
<div className="position-relative">
|
|
<SyntaxHighlighter
|
|
language="tsx"
|
|
style={vscDarkPlus}
|
|
customStyle={{ margin: 0, padding: '1rem', borderRadius: '0.5rem' }}
|
|
>
|
|
{code}
|
|
</SyntaxHighlighter>
|
|
<button
|
|
className="btn btn-sm btn-light position-absolute top-0 end-0 m-2"
|
|
onClick={() => navigator.clipboard.writeText(code)}
|
|
>
|
|
<i className="bi bi-clipboard"></i>
|
|
</button>
|
|
</div>
|
|
);
|