Untitled

import React from 'react'
import ReactMarkdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'
import remarkGfm from 'remark-gfm'
import 'github-markdown-css/github-markdown-light.css'


export function CreateExercice() : JSX.Element {
    const [markdown, setMarkdown] = React.useState("## Markdown");
    
    function handleMarkdownChange(event: React.ChangeEvent<HTMLTextAreaElement>){
        let markdown = event.target.value;
        // escape \n to \\n
        // markdown = markdown.replace(/\n/g, "\\\n");
        setMarkdown(markdown);

    }
    
    return (
        // formulaire de création d'exercice
        <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8 bg-light">
            <div className="min-h-3xl w-auto mx-auto py-20 text-center">
                <h1 className="text-8xl font-mono">
                    Créer un exercice
                </h1>
            </div>
            <div className="flex justify-center pb-10">
                <form className="w-full max-w-lg">
                    <div className="flex flex-wrap -mx-3 mb-6">
                        <div className="w-full px-3">
                            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="grid-description">
                                Description de l'exercice
                            </label>
                            <textarea onInput={handleMarkdownChange} className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 h-48 resize-none" id="grid-description" placeholder="Description de l'exercice"></textarea>
                            {/* Zone d'affichage de la preview de markdown */}
                            <div id="markdownPreview" className="markdown-body">
                                <ReactMarkdown  remarkPlugins={[remarkGfm]} children={markdown} />
                            </div>
                            
                            
                            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                Créer l'exercice
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    )
}