victorAnumudu
559 lines
26 KiB
JavaScript
559 lines
26 KiB
JavaScript
import React from "react";
|
||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||
import getImage from "../../utils/getImage";
|
||
|
||
export default function Comments() {
|
||
return (
|
||
<>
|
||
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
||
<div className="row">
|
||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||
<div className="col-12">
|
||
<div className="card card-statistics mail-contant">
|
||
<div className="card-body p-0">
|
||
<div className="row no-gutters">
|
||
<div className="col-md-4 col-xxl-2 col-md-4">
|
||
<div className="mail-sidebar">
|
||
<div className="row justify-content-center">
|
||
<div className="col-12">
|
||
<div className="text-center mail-sidebar-title px-4">
|
||
<a
|
||
href="javascript:void(0)"
|
||
className="btn btn-primary btn-block py-3 font-weight-bold font-18"
|
||
>
|
||
<i className="fa fa-plus pl-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="col-12">
|
||
<div className="px-4 py-4">
|
||
<ul className="pl-0">
|
||
<li className="py-2">
|
||
<a href="javascript:void(0)">
|
||
<span className="nav align-items-center">
|
||
<span>
|
||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||
</span>
|
||
<span>
|
||
<span>Inbox</span>
|
||
</span>
|
||
<span className="nav-item ml-auto text-right">
|
||
<span className="badge badge-pill badge-primary float-right">
|
||
0+
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li className="py-2">
|
||
<a href="javascript:void(0)">
|
||
<span className="nav align-items-center">
|
||
<span>
|
||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||
</span>
|
||
<span>
|
||
<span>Sent Mail</span>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<ul className="pl-0 mt-5">
|
||
<li className="py-2">
|
||
<a href="javascript:void(0)">
|
||
<span className="nav align-items-center">
|
||
<span>
|
||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
||
</span>
|
||
<span>
|
||
<span>Personal</span>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li className="py-2">
|
||
<a href="javascript:void(0)">
|
||
<span className="nav align-items-center">
|
||
<span>
|
||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||
</span>
|
||
<span>
|
||
<span>Work</span>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li className="py-2">
|
||
<a href="javascript:void(0)">
|
||
<span className="nav align-items-center">
|
||
<span>
|
||
<i className="fa fa-plus pr-4"></i>
|
||
</span>
|
||
<span>
|
||
<span>Add Category</span>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||
<div className="mail-content border-right border-n h-100">
|
||
<div className="mail-search border-bottom">
|
||
<div className="row align-items-center mx-0">
|
||
<div className="col-12">
|
||
<div className="form-group pt-3">
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
id="search"
|
||
placeholder="Search.."
|
||
/>
|
||
<i className="fa fa-search"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mail-msg scrollbar scroll_dark">
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/01.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>Martin smith</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||
<p>
|
||
Since there is not an "all the above" category,
|
||
I'll take the opportunity to enthusiastically
|
||
congratulate you on the very high quality.
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/02.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>DutcaPatrick</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">
|
||
Mobile app Designer{" "}
|
||
</h5>
|
||
<p>
|
||
Very nice template, lots of pages and good
|
||
documentation.
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/03.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>m_morsch</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">
|
||
Landing page Designer
|
||
</h5>
|
||
<p>
|
||
Excellent and at a great price... thank you very
|
||
much!
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/04.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>AnnaHorno</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">Re-Design ios app</h5>
|
||
<p>
|
||
Solved my theme problem in 10 minutes. We thank
|
||
you.
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/05.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>Wdcorbitt</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">
|
||
Mobil UX/UI Designer
|
||
</h5>
|
||
<p>
|
||
Asked for information and received it EXTREMELY
|
||
quickly. Great layout - good code - great price!{" "}
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/06.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>Anne Smith</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
|
||
<p>
|
||
Mentor has so many features and layouts. Its a
|
||
great choice.
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/07.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>Paul Flavius</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||
<p>
|
||
There are many people in the world with amazing
|
||
talents who realize only a small percentage of
|
||
their potential.{" "}
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/08.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>Sara Lisbon</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">UI Designer</h5>
|
||
<p>
|
||
We can look a bit further back in time to Albert
|
||
Einstein or even further back to Abraham
|
||
Lincoln.
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div className="mail-msg-item">
|
||
<a href="javascript:void(0)">
|
||
<div className="media align-items-center">
|
||
<div className="mr-3">
|
||
<div className="bg-img">
|
||
<img
|
||
src={getImage("avtar/09.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-100">
|
||
<div className="mail-msg-item-titel justify-content-between">
|
||
<p>Annahorno</p>
|
||
<p className="d-none d-xl-block">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||
<p>
|
||
One of the most difficult aspects of achieving
|
||
success is staying motivated over the long haul.
|
||
</p>
|
||
<p className="d-xl-none">
|
||
06:59 <span> PM </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-xxl-6 border-t border-xxl-t">
|
||
<div className="mail-chat py-5 px-5">
|
||
<div className="media align-items-center">
|
||
<div className="bg-img mr-3">
|
||
<img
|
||
src={getImage("avtar/03.jpg")}
|
||
className="img-fluid"
|
||
alt="user"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<h4 className="mb-0">Dutca Patrick</h4>
|
||
<p>30 Min ago</p>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 d-flex justify-content-between">
|
||
<div>
|
||
<h3>Landing page Designer...</h3>
|
||
</div>
|
||
<div className="d-flex">
|
||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p className="my-4">hey adminjon...</p>
|
||
<p className="mb-2">
|
||
I truly believe Augustine’s words are true and if you
|
||
look at history you know it is true. There are many
|
||
people in the world with amazing talents who realize
|
||
only a small percentage of their potential. We all know
|
||
people who live this truth.
|
||
</p>
|
||
<p>
|
||
We also know those epic stories, those modern-day
|
||
legends surrounding the early failures of such supremely
|
||
successful folks as Michael Jordan and Bill Gates. We
|
||
can look a bit further back in time to Albert Einstein
|
||
or even further back to Abraham Lincoln. What made each
|
||
of these people so successful? Motivation.
|
||
</p>
|
||
<p>
|
||
We know this in our gut, but what can we do about it?
|
||
How can we motivate ourselves? One of the most difficult
|
||
aspects of achieving success is staying motivated over
|
||
the long haul.
|
||
</p>
|
||
<div className="my-5">
|
||
<p>Have lovely Day,</p>
|
||
<p>adminjon</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*<div className="d-md-flex px-5 py-4">*/}
|
||
{/* <div className="flex-fill align-items-center">*/}
|
||
{/* <div className="d-flex">*/}
|
||
{/* <i className="ti ti-clip pr-3 font-22"></i>*/}
|
||
{/* <p className="pr-3 font-weight-bold">Wireframe</p>*/}
|
||
{/* <p>(220.MB)</p>*/}
|
||
{/* </div>*/}
|
||
{/* </div>*/}
|
||
{/* <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
|
||
{/*</div>*/}
|
||
<div className="bg-light mail-f px-4 py-3">
|
||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||
<p>
|
||
Click here to{" "}
|
||
<a
|
||
href="#editer"
|
||
data-toggle="collapse"
|
||
className="text-primary px-1"
|
||
>
|
||
Reply
|
||
</a>
|
||
or
|
||
<a
|
||
href="#forward"
|
||
data-toggle="collapse"
|
||
className="text-primary px-1"
|
||
>
|
||
Forward
|
||
</a>
|
||
</p>
|
||
<a href="javascript:void(0)" className="text-primary">
|
||
<i className="fa fa-microphone"></i>
|
||
</a>
|
||
</div>
|
||
<div className="collapse" id="editer">
|
||
<div className="form-group">
|
||
<textarea
|
||
className="form-control mt-3"
|
||
id="exampleFormControlTextarea1"
|
||
rows="3"
|
||
placeholder="Type here..."
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
<div className="collapse" id="forward">
|
||
<div className="form-group">
|
||
<input
|
||
className="form-control mt-3"
|
||
id="exampleFormControl"
|
||
placeholder="Email Address"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="d-flex align-items-center justify-content-between py-2">
|
||
<div>
|
||
<ul className="nav">
|
||
<li className="nav-item pr-3">
|
||
<a href="javascript:void(0)">
|
||
<i className="ti ti-clip font-20"></i>
|
||
</a>
|
||
</li>
|
||
<li className="nav-item pr-3">
|
||
<a href="javascript:void(0)">
|
||
<i className="ti ti-face-smile font-20"></i>
|
||
</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a href="javascript:void(0)">
|
||
<i className="ti ti-gallery font-20"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<a
|
||
href="javascript:void(0)"
|
||
className="btn btn-primary"
|
||
>
|
||
<span>Send</span>{" "}
|
||
<i className="fa fa-paper-plane"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|