- Joined
- Mar 9, 2023
- Messages
- 3
- Reaction score
- 0
Code:
import "./App.css";
import Navbar from "./Components/Navbar";
import TextForm from "./TextForm";
import React, { useState } from "react";
import Alert from "./Components/Alert";
function App() {
const [mode, setMode] = useState("light");
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert({
msg: message,
type: type,
});
setTimeout(() => {
showAlert(null);
}, 1000);
};
const toggleMode = () => {
if (mode === "light") {
setMode("dark");
document.body.style.backgroundColor = "black";
showAlert("The dark mode has been set", "success");
} else {
setMode("light");
document.body.style.backgroundColor = "white";
showAlert("The light mode has been set", "success");
}
};
return (
<>
<Navbar toggleMode={toggleMode} mode={mode} />
<Alert alert={alert} />
<TextForm
heading="This is textarea"
mode={mode}
alert={alert}
showAlert={showAlert}
/>
</>
);
}
export default App;
Code:
import React from "react";
export default function Alert(props) {
const capitalize = (word) => {
const lower = word.toLowerCase();
return lower.charAt(0).toUpperCase() + lower.slice(1);
};
return (
props.alert && (
<div
class={`alert alert-${props.alert.type} alert-dismissible fade show`}
role="alert"
>
<strong>{capitalize(props.alert.type)}</strong>:{props.alert.msg}
<button
type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
)
);
}