50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import Image from "../Image";
|
|
|
|
const Notification = ({ className, title }) => (
|
|
<div
|
|
className={`flex items-center p-4 pr-6 bg-[#474060]/40 backdrop-blur border border-n-1/10 rounded-2xl ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<div className="mr-5">
|
|
<Image
|
|
className="w-full rounded-xl"
|
|
src="/images/notification/image-1.png"
|
|
width={52}
|
|
height={52}
|
|
alt="Image"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h6 className="mb-1 font-semibold text-base">{title}</h6>
|
|
<div className="flex items-center justify-between">
|
|
<ul className="flex -m-0.5">
|
|
{[
|
|
"/images/notification/image-4.png",
|
|
"/images/notification/image-3.png",
|
|
"/images/notification/image-2.png",
|
|
].map((item, index) => (
|
|
<li
|
|
className={`flex w-6 h-6 border-2 border-[#2E2A41] rounded-full overflow-hidden ${
|
|
index !== 0 ? "-ml-2" : ""
|
|
}`}
|
|
key={index}
|
|
>
|
|
<Image
|
|
className="w-full"
|
|
src={item}
|
|
width={20}
|
|
height={20}
|
|
alt={item}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="body-2 text-[#6C7275]">1m ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default Notification;
|