focalxaiinspection
Version:
Focalx AI Inspection
160 lines (157 loc) • 8.99 kB
JavaScript
/* eslint-disable jsx-a11y/anchor-is-valid */
import {React, useState} from 'react';
import './ConfirmationPage.scss';
import {Heading} from '../../Components/Heading';
import {TabNavItem, TabContent} from './../../Components/TabComponent';
import {DamageType} from './../../Components/DamageType';
import {DamageList} from './../../Components/DamageList';
const ConfirmationPage = () => {
const [activeTab, setActiveTab] = useState("car-details");
return (
<>
<main>
<Heading title="Damage Report" />
<div className='damage-report-section'>
<div className='tabs-container'>
<ul className="nav-tabs">
<li className="nav-item">
<span className="nav-link active">Car Details</span>
</li>
</ul>
<div className="tab-content">
<div className="container">
<div className="car-details-grid">
<div className="item">
<div className="custom-card">
<div className="para-wrap">
<figure>
<img src={require('../../Assets/images/model.svg').default} alt="" />
</figure>
<p className="title">BMW</p>
<p>Make</p>
</div>
<div className="para-wrap">
<p className="title">S3</p>
<p>Model</p>
</div>
<div className="para-wrap">
<p className="title">2020</p>
<p>Year</p>
</div>
</div>
</div>
<div className="item">
<div className="custom-card">
<div className="para-wrap">
<figure>
<img src={require('../../Assets/images/milage.svg').default} alt="" />
</figure>
<p className="title">1200</p>
<p>Year</p>
</div>
</div>
</div>
<div className="item">
<div className="custom-card">
<div className="para-wrap">
<figure>
<img src={require('../../Assets/images/inspection.svg').default} alt="" />
</figure>
<p className="title">RTU456YU</p>
<p>Inspection ID</p>
</div>
</div>
</div>
<div className="item">
<div className="custom-card">
<div className="para-wrap">
<figure>
<img src={require('../../Assets/images/dashboard.svg').default} alt="" />
</figure>
<p className="title">AY345AJ</p>
<p>VIN</p>
</div>
</div>
</div>
<div className="item">
<div className="custom-card">
<div className="para-wrap">
<figure>
<img src={require('../../Assets/images/calendar.svg').default} alt="" />
</figure>
<p className="title">14 APR 2022</p>
<p>Created</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul className="nav-tabs">
<li className="nav-item">
<span className="nav-link active">Car Images</span>
</li>
</ul>
<div className="tab-content">
<DamageType />
</div>
<ul className="nav-tabs">
<li className="nav-item">
<span className="nav-link active">Damages</span>
</li>
</ul>
<div className="tab-content">
<div className="container left0">
<DamageList />
</div>
</div>
<ul className="nav-tabs">
<li className="nav-item">
<span className="nav-link active">Manual</span>
</li>
</ul>
<div className="tab-content">
<div className="container left0">
<DamageList />
</div>
</div>
<ul className="nav-tabs">
<li className="nav-item">
<span className="nav-link active">Personal Info</span>
</li>
</ul>
<div className="tab-content">
<div className="car-info-form">
<div className="container">
<div className="form">
<div className="form-group">
<label htmlFor="name" className="form-label">Name</label>
<div className="label-value">XXXXXXXXXXXXX</div>
</div>
<div className="form-group">
<label htmlFor="contact" className="form-label">Contact</label>
<div className="label-value">XXXXXXXXXXXXX</div>
</div>
<div className="form-group">
<label htmlFor="email" className="form-label">Email</label>
<div className="label-value">XXXXXXXXXX@gmail.com</div>
</div>
<div className="form-group custom-checkbox">
<input id="tnc" type="checkbox" name="checkbox" checked />
<label htmlFor="tnc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label>
</div>
</div>
</div>
</div>
</div>
<div className="action-btn-wrap confirmation-action-btn-wrap">
<a className="custom-secondary-outline-button justify-content-center w-50">Cancel</a>
<a className="custom-primary-button justify-content-center w-50">Submit</a>
</div>
</div>
</main>
</>
);
};
export default ConfirmationPage;