-
{item?.title}
+
+
{item?.title}
+
{(() => {
@@ -382,4 +486,4 @@ const Page = () => {
);
};
-export default Page;
+export default Page;
\ No newline at end of file
From f27727267639f54e4ffaa80919b1d0836621ac7d Mon Sep 17 00:00:00 2001
From: Uday Kiran <132606304+udaykiran243@users.noreply.github.com>
Date: Sun, 8 Mar 2026 18:08:33 +0530
Subject: [PATCH 18/47] feat: Add Unix Timestamp (Epoch) Converter Utility
Closes: #16
---
.../epochConverter.tsx | 203 ++++++++++++++++++
app/libs/constants.tsx | 6 +
app/libs/developmentToolsConstant.tsx | 86 ++++++++
package-lock.json | 92 ++++----
package.json | 3 +-
5 files changed, 336 insertions(+), 54 deletions(-)
create mode 100644 app/components/developmentToolsComponent/epochConverter.tsx
diff --git a/app/components/developmentToolsComponent/epochConverter.tsx b/app/components/developmentToolsComponent/epochConverter.tsx
new file mode 100644
index 0000000..7d9959a
--- /dev/null
+++ b/app/components/developmentToolsComponent/epochConverter.tsx
@@ -0,0 +1,203 @@
+"use client";
+import React, { useState } from "react";
+import { Button, Input, DatePicker, message, Typography, Space, Row, Col, ConfigProvider, theme } from "antd";
+import dayjs, { Dayjs } from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
+
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const { Text } = Typography;
+
+const EpochConverter = () => {
+ // Timestamp in seconds (string to allow clear/typing)
+ const [timestamp, setTimestamp] = useState(Math.floor(Date.now() / 1000).toString());
+ // Date object for DatePicker
+ const [date, setDate] = useState(dayjs());
+ // Input mode: 'seconds' or 'milliseconds'
+ const [isMilliseconds, setIsMilliseconds] = useState(false);
+
+ // Update inputs when timestamp changes
+ const handleTimestampChange = (e: React.ChangeEvent) => {
+ const val = e.target.value;
+ setTimestamp(val);
+
+ if (!val) {
+ setDate(null);
+ return;
+ }
+
+ // Enforce plain integer input
+ if (/^-?\d+$/.test(val)) {
+ const num = Number(val);
+ const timestampInMs = isMilliseconds ? num : num * 1000;
+ setDate(dayjs(timestampInMs));
+ } else {
+ // Invalid input, clear date to keep UI consistent
+ setDate(null);
+ }
+ };
+
+ const handleDateChange = (value: Dayjs | null) => {
+ setDate(value);
+ if (value) {
+ const ms = value.valueOf();
+ setTimestamp(isMilliseconds ? ms.toString() : Math.floor(ms / 1000).toString());
+ } else {
+ setTimestamp("");
+ }
+ };
+
+ const setNow = () => {
+ const now = dayjs();
+ setDate(now);
+ const ms = now.valueOf();
+ setTimestamp(isMilliseconds ? ms.toString() : Math.floor(ms / 1000).toString());
+ };
+
+ const clear = () => {
+ setTimestamp("");
+ setDate(null);
+ };
+
+ const toggleUnit = () => {
+ const newVal = !isMilliseconds;
+ setIsMilliseconds(newVal);
+ // Adjust current timestamp value
+ if (timestamp) {
+ const num = Number(timestamp);
+ if (!isNaN(num)) {
+ if (newVal) {
+ // sec -> ms
+ setTimestamp((num * 1000).toString());
+ } else {
+ // ms -> sec
+ setTimestamp(Math.floor(num / 1000).toString());
+ }
+ }
+ }
+ };
+
+ // Derived values for display
+ const validTimestamp = /^-?\d+$/.test(timestamp);
+ const currentDayjs = validTimestamp ? dayjs(isMilliseconds ? Number(timestamp) : Number(timestamp) * 1000) : null;
+ const isValid = currentDayjs && currentDayjs.isValid();
+
+ return (
+
+
+
+
+
+ {/* Controls */}
+
+
+
+ }>Now
+ }>Clear
+
+
+
+
+
+ {/* Inputs */}
+
+
+ Unix Timestamp ({isMilliseconds ? "Milliseconds" : "Seconds"})
+
+
+
+ Date & Time (Local)
+
+
+
+
+ {/* Outputs */}
+ {isValid ? (
+
+
+
+
+
Local Time
+
+
+ {currentDayjs.format('YYYY-MM-DD HH:mm:ss')}
+
+
+
+
UTC Time
+
+
+ {currentDayjs.utc().format('YYYY-MM-DD HH:mm:ss')} UTC
+
+
+
+
ISO 8601
+
+
+ {currentDayjs.toISOString()}
+
+
+
+ Relative Time
+
+ {currentDayjs.fromNow()}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Title */}
+
+
URL Parser & Query Editor
+
+
+ {/* Main URL Input */}
+