From ea4528d4802ac07bcb8df0629b8df90d80d0d713 Mon Sep 17 00:00:00 2001
From: Rudranil8 <95670098+Rudranil8@users.noreply.github.com>
Date: Fri, 31 Jan 2025 02:17:06 +0530
Subject: [PATCH] Update App.js

---
 src/components/App.js | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/App.js b/src/components/App.js
index 88f4bdc..f8612f0 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,2 +1,37 @@
-<p>Now I can render any React component on any DOM node I want using ReactDOM.render</p>
+import React, { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import "./App.css";
 
+function Markdown() {
+  const [markdown, setMarkdown] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const handleChange = (e) => {
+    setMarkdown(e.target.value);
+  };
+
+  const changeLoadingVar = () => {
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    setTimeout(changeLoadingVar, 3000);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="loading">
+        <h1>Loading...</h1>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app">
+      <textarea className="textarea" onChange={handleChange} />
+      <ReactMarkdown className="preview">{markdown}</ReactMarkdown>
+    </div>
+  );
+}
+
+export default Markdown;