Added frontend folder structure.

2025-02-22 12:54:00 +05:30
parent 8f13ac6d4b
commit 15593af2a9
60 changed files with 9080 additions and 0 deletions
@@ -0,0 +1,71 @@
+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" });
+    //console.log(dayName);
+    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);
+    //console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
+    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;