12- Customising and Creating our Third Component About
What kind of about component do we want?
We want a component that can perform following operations:
--> Is an accordion with its own heading and content for each heading.
--> Heading is Text Summary, Reading Time and Text View.
--> Have its own Light and Dark Mode.
Image 1 - About component in Light and Dark Mode
Creating our third component About
These are the following steps we will perform to create our About:
1- Inside folder name components in our src folder of project add About.js.
2- In About.js , Inside return of jsx format
Copy paste accordion code from collapse from bootstrap website.
Copy paste button code and add other content using basic html.
Make changes according to jsx format in About.js
--> class written as className
--> for written as htmlFor
--> tabindex written as tabIndex.
src --> components --> About.js
import React, { useState } from 'react';
export default function About() {
const [myStyle, setMyStyle] = useState({ color: 'black', backgroundColor: 'white' });
const [btnText, setBtnText] = useState("Enable Dark Mode");
const toggleStyle = () => {
if (myStyle.color === 'white') {
setMyStyle({ color: 'black', backgroundColor: 'white' });
setBtnText("Enable Dark Mode")
}
else {
setMyStyle({ color: 'white', backgroundColor: 'black',border:'white 1px solid' });
setBtnText("Enable Light Mode")
}
}
return (
<>
<div className="container border border-4 border-success my-5 " style={myStyle}>
<h1 className=" mx-1 my-6">About </h1>
<div className="accordion" id="accordionExample" style={myStyle}>
<div className="accordion-item" style={myStyle}>
<h2 className="accordion-header" id="headingOne" style={myStyle}>
<button style={myStyle} className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Text Summary
</button>
</h2>
<div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style={myStyle}>
<div className="accordion-body text-success" style={myStyle}>
<strong>This is the first output you recieve from textbox gives you numer of characters and words in your textbox .</strong>
</div>
</div>
</div>
<div className="accordion-item" style={myStyle}>
<h2 className="accordion-header" id="headingTwo" style={myStyle}>
<button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Reading Time
</button>
</h2>
<div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" style={myStyle}>
<div className="accordion-body text-success" style={myStyle}>
<strong>As per the rate of reading i.e(minutes per word) you can calculate the reading time for entire textbox </strong>
</div>
</div>
</div>
<div className="accordion-item" style={myStyle}>
<h2 className="accordion-header" id="headingThree" style={myStyle}>
<button style={myStyle} className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Text View
</button>
</h2>
<div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" style={myStyle}>
<div className="accordion-body text-success" style={myStyle}>
<strong>Gives us the view of entire content of textbox</strong>
</div>
</div>
</div>
</div>
<button className="btn btn-success mx-1 my-4" onClick={toggleStyle}> {btnText} </button>
</div>
</>
)
}
3- Go to app.js and add your About component in return
src --> App.js
import React, { useState } from 'react'
import './App.css';
import Navbar from './components/Navbar';
import Alert from './components/Alert';
import TextForm from './components/TextForm';
import About from './components/About';
function App() {
//Using State to Generate dismissable alert
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert(
{
msg: message,
type: type
}
)
setTimeout(() => {
setAlert(null);
}, 1500);
}
// Using State to apply Dark Mode and Light Mode CSS
const [Mode, setMode] = useState('light');
const [Mode1, setMode1] = useState('dark');
const toggleMode = () => {
if (Mode === 'dark') {
setMode("light");
setMode1("dark");
document.body.style.backgroundColor = 'white';
showAlert('Light Mode is Enabled', 'Success:')
}
else {
setMode("dark");
setMode1("light")
document.body.style.backgroundColor = 'indigo';
showAlert('Dark Mode is Enabled', 'Success:')
}
}
return (
<>
<Navbar title="TextBox"about="About" mode={Mode} mode1={Mode1} ToggleMode={toggleMode} />
<Alert alert={alert} />
<TextForm heading="Enter your text to analyse" mode1={Mode1} ToggleMode={toggleMode} showAlert={showAlert} />
<About/>
</>
);
}
export default App;
Image 2 - About Box position and appearance in webpage
Comments
Post a Comment