feat: add live clock feature and enhance timestamp tools

- Introduced a live clock that updates the current epoch time every second, with an option to toggle its visibility.
- Added functionality to copy the current epoch time to the clipboard and set the timestamp to the current time.
- Enhanced the display of the current epoch time with formatted date representation.
- Improved UI elements for better user interaction and experience.

Author: 0xdps

src/pages/TimestampTools.tsx

@@ -9,12 +9,25 @@ export default function TimestampTools() {
   const [timestamp, setTimestamp] = useState(0) // Initialize with 0 to match server
   const [cronExpression, setCronExpression] = useState('0 0 * * *')
   const [cronDescription, setCronDescription] = useState('')
+  const [currentEpoch, setCurrentEpoch] = useState(Math.floor(Date.now() / 1000))
+  const [showLiveClock, setShowLiveClock] = useState(true)
 
   // Set current timestamp after hydration to avoid mismatch
   useEffect(() => {
     setTimestamp(Math.floor(Date.now() / 1000))
   }, [])
 
+  // Update live epoch time every second
+  useEffect(() => {
+    if (!showLiveClock) return
+
+    const interval = setInterval(() => {
+      setCurrentEpoch(Math.floor(Date.now() / 1000))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [showLiveClock])
+
   const convertToDate = () => {
     const date = new Date(timestamp * 1000)
     return date.toLocaleString()
@@ -25,6 +38,28 @@ export default function TimestampTools() {
     toast.success('Set to current time')
   }
 
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      toast.success('Copied to clipboard')
+    } catch {
+      toast.error('Copy failed')
+    }
+  }
+
+  const formatLiveDate = (epoch: number): string => {
+    const date = new Date(epoch * 1000)
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      timeZoneName: 'short'
+    })
+  }
+
   const parseCron = () => {
     try {
       const description = cronstrue.toString(cronExpression)
@@ -51,7 +86,57 @@ export default function TimestampTools() {
 
       <div className="space-y-6">
         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg border">
-          <h2 className="text-xl font-semibold mb-4">Unix Timestamp</h2>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold">Unix Timestamp</h2>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={showLiveClock}
+                onChange={(e) => setShowLiveClock(e.target.checked)}
+                className="w-4 h-4 rounded border-gray-300 dark:border-gray-600"
+              />
+              <span className="text-sm text-gray-600 dark:text-gray-400">Show live clock</span>
+            </label>
+          </div>
+
+          {/* Live Clock Widget */}
+          {showLiveClock && (
+            <div className="mb-6 p-4 bg-gradient-to-r from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 rounded-lg border border-primary-200 dark:border-primary-800">
+              <div className="flex items-center justify-between flex-wrap gap-4">
+                <div className="flex-1 min-w-[200px]">
+                  <div className="text-xs text-primary-700 dark:text-primary-300 font-medium mb-1">
+                    Current Epoch Time (Live)
+                  </div>
+                  <div className="flex items-baseline gap-3 flex-wrap">
+                    <span className="text-2xl font-mono font-bold text-primary-900 dark:text-primary-100">
+                      {currentEpoch.toLocaleString()}
+                    </span>
+                    <span className="text-sm text-primary-600 dark:text-primary-400">
+                      {formatLiveDate(currentEpoch)}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => copyToClipboard(currentEpoch.toString())}
+                    className="px-3 py-1.5 text-sm bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors"
+                  >
+                    📋 Copy Epoch
+                  </button>
+                  <button
+                    onClick={() => {
+                      setTimestamp(currentEpoch)
+                      toast.success('Timestamp set to current time')
+                    }}
+                    className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 text-primary-700 dark:text-primary-300 border border-primary-300 dark:border-primary-700 rounded-lg transition-colors"
+                  >
+                    Use This
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
           <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
             ℹ️ Unix timestamp is the number of seconds since January 1, 1970 (UTC). Commonly used in databases and APIs.
           </p>