261 lines
11 KiB
JavaScript
261 lines
11 KiB
JavaScript
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
export default function Comment() {
|
|
return (
|
|
<div id="comments" className="relative !m-0">
|
|
<h3 className="!mb-6">5 Comments</h3>
|
|
<ol id="singlecomments" className="commentlist m-0 p-0 list-none">
|
|
<li className="comment !mt-8">
|
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
|
<div className="flex items-center">
|
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
|
<Image
|
|
className="rounded-[50%]"
|
|
alt="image"
|
|
src="/assets/img/avatars/u1.jpg"
|
|
width={120}
|
|
height={120}
|
|
/>
|
|
</figure>
|
|
<div>
|
|
<h6 className="m-0 !mb-[0.2rem]">
|
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
|
Connor Gibson
|
|
</a>
|
|
</h6>
|
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li>
|
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
|
14 Jan 2022
|
|
</li>
|
|
</ul>
|
|
{/* /.post-meta */}
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /div */}
|
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
|
Reply
|
|
</a>
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /.comment-header */}
|
|
<p>
|
|
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
|
|
vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor
|
|
ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est
|
|
at lobortis integer posuere erat ante.
|
|
</p>
|
|
</li>
|
|
<li className="comment !mt-8">
|
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
|
<div className="flex items-center">
|
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
|
<Image
|
|
className="rounded-[50%]"
|
|
alt="image"
|
|
src="/assets/img/avatars/u2.jpg"
|
|
width={120}
|
|
height={120}
|
|
/>
|
|
</figure>
|
|
<div>
|
|
<h6 className="m-0 !mb-[0.2rem]">
|
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
|
Nikolas Brooten
|
|
</a>
|
|
</h6>
|
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li>
|
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
|
21 Feb 2022
|
|
</li>
|
|
</ul>
|
|
{/* /.post-meta */}
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /div */}
|
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
|
Reply
|
|
</a>
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /.comment-header */}
|
|
<p>
|
|
Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit
|
|
amet quam sollicitudin vestibulum vitae malesuada libero. Mauris
|
|
magna elit, suscipit non ornare et, blandit a tellus. Pellentesque
|
|
dignissim ornare faucibus mollis.
|
|
</p>
|
|
<ul className="children">
|
|
<li className="comment !mt-8">
|
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
|
<div className="flex items-center">
|
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
|
<Image
|
|
className="rounded-[50%]"
|
|
alt="image"
|
|
src="/assets/img/avatars/u3.jpg"
|
|
width={120}
|
|
height={120}
|
|
/>
|
|
</figure>
|
|
<div>
|
|
<h6 className="m-0 !mb-[0.2rem]">
|
|
<a
|
|
href="#"
|
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
|
>
|
|
Pearce Frye
|
|
</a>
|
|
</h6>
|
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li>
|
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
|
22 Feb 2022
|
|
</li>
|
|
</ul>
|
|
{/* /.post-meta */}
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /div */}
|
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
|
Reply
|
|
</a>
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /.comment-header */}
|
|
<p>
|
|
Cras mattis consectetur purus sit amet fermentum. Integer
|
|
posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
Etiam porta sem malesuada magna mollis.
|
|
</p>
|
|
<ul className="children">
|
|
<li className="comment !mt-8">
|
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
|
<div className="flex items-center">
|
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
|
<Image
|
|
className="rounded-[50%]"
|
|
alt="image"
|
|
src="/assets/img/avatars/u2.jpg"
|
|
width={120}
|
|
height={120}
|
|
/>
|
|
</figure>
|
|
<div>
|
|
<h6 className="m-0 !mb-[0.2rem]">
|
|
<a
|
|
href="#"
|
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
|
>
|
|
Nikolas Brooten
|
|
</a>
|
|
</h6>
|
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li>
|
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
|
4 Apr 2022
|
|
</li>
|
|
</ul>
|
|
{/* /.post-meta */}
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /div */}
|
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
|
Reply
|
|
</a>
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /.comment-header */}
|
|
<p>
|
|
Nullam id dolor id nibh ultricies vehicula ut id. Cras
|
|
mattis consectetur purus sit amet fermentum. Aenean eu leo
|
|
quam. Pellentesque ornare sem lacinia aenean bibendum nulla
|
|
consectetur.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="comment !mt-8">
|
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
|
<div className="flex items-center">
|
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
|
<Image
|
|
className="rounded-[50%]"
|
|
alt="image"
|
|
src="/assets/img/avatars/u4.jpg"
|
|
width={120}
|
|
height={120}
|
|
/>
|
|
</figure>
|
|
<div>
|
|
<h6 className="m-0 !mb-[0.2rem]">
|
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
|
Lou Bloxham
|
|
</a>
|
|
</h6>
|
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li>
|
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
|
3 May 2022
|
|
</li>
|
|
</ul>
|
|
{/* /.post-meta */}
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /div */}
|
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
|
<a
|
|
href="#"
|
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
|
Reply
|
|
</a>
|
|
</div>
|
|
{/* /div */}
|
|
</div>
|
|
{/* /.comment-header */}
|
|
<p>
|
|
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta
|
|
felis euismod semper. Cum sociis natoque penatibus et magnis dis
|
|
parturient montes, nascetur ridiculus mus.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
);
|
|
}
|