Notes

import React from 'react'
import { NavLink } from 'react-router-dom'

export default function QuizUI() {
const mystyle = {
color: "red"
}
const btnStyle = {
backgroundColor: "#FF683B",
color: "white"
}
return (
<div className="container">
<div className="row justify-content-center mt-4">
<div className="col-md-6 border border-4 rounded-3 pt-4 pb-3 ps-5 pe-5 shadow p-3 bg-body rounded">
<form>
<h4 className="text-center mb-4">Quiz Generator</h4>
<div className="mb-3">
<label for="name" className="form-label">Subjects <span style={mystyle}>*</span></label>
<select className="form-select form-select-sm mb-4" aria-label=".form-select-sm example">
<option selected>Choose Subjects</option>
<option value="1">English</option>
<option value="2">Math</option>
<option value="3">Science</option>
<option value="4">Computer</option>
</select>

<label for="name" className="form-label">Difficulty <span style={mystyle}>*</span></label>
<select className="form-select form-select-sm mb-4" aria-label=".form-select-sm example">
<option selected>Choose Difficulty</option>
<option value="1">Easy</option>
<option value="2">Medium</option>
<option value="3">Hard</option>
</select>

<label for="name" className="form-label">Topics <span style={mystyle}>*</span></label>
<select className="form-select form-select-sm mb-4" aria-label=".form-select-sm example">
<option selected>Choose Topics</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

<label for="name" className="form-label">Number of Questionnarie <span style={mystyle}>*</span></label>
<select className="form-select form-select-sm mb-4" aria-label=".form-select-sm example">
<option selected>Choose Number Of Questionnarie</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
<div className="d-flex justify-content-between">
<NavLink className="btn" style={btnStyle} to="quiz-generator">Generate <i className="fa-solid fa-arrow-right"></i></NavLink>
<button type="submit" className="btn" style={btnStyle}>Cancel</button>
</div>

</form>
</div>
</div>
</div>
)
}