72 lines
2.0 KiB
React
72 lines
2.0 KiB
React
import React from "react";
|
|
|
|
const Notification = ({ notification }) => {
|
|
let timeStringToDayName = (dateStr) => {
|
|
// for getting day name by time string
|
|
// const dateStr = "2024-09-26T04:31:50.646+00:00";
|
|
const date = new Date(dateStr);
|
|
const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
|
|
|
|
return dayName;
|
|
};
|
|
|
|
let timeStringtoRealTime = (utcDateStr) => {
|
|
// for converting the to get time in am or pm
|
|
//const utcDateStr = "2024-09-26T04:31:50.646+00:00";
|
|
const date = new Date(utcDateStr);
|
|
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
|
const options = {
|
|
timeZone: "Asia/Kolkata",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
second: "numeric",
|
|
hour12: true,
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
};
|
|
|
|
const istDate = date.toLocaleString("en-US", options);
|
|
|
|
return istDate;
|
|
};
|
|
|
|
let { message, timestamp, isRead } = notification;
|
|
|
|
const realTimeString = timeStringtoRealTime(timestamp);
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center justify-between p-4 bg-white shadow rounded-lg"
|
|
onClick={() => {
|
|
isRead = true;
|
|
}}
|
|
>
|
|
<div className="flex items-center">
|
|
<img
|
|
src="https://placehold.co/40x40"
|
|
alt="Profile picture of the user who followed you"
|
|
className="w-10 h-10 rounded-full mr-3"
|
|
/>
|
|
<div>
|
|
<p className="text-gray-900">{message}</p>
|
|
<p className="text-gray-500">
|
|
{timeStringToDayName(timestamp)},
|
|
{realTimeString.substring(21, 26) +
|
|
" " +
|
|
realTimeString.substring(30)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<p className="text-gray-500 mr-3">{realTimeString.substring(0, 18)}</p>
|
|
<span
|
|
className={`w-3 h-3 bg-blue-600 rounded-full ${isRead && "hidden"}`}
|
|
></span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Notification;
|