update

src/components/common/CounDown/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+
+interface CountDownProps {
+  deadline: Date | string;
+}
+
+const CounDown: React.FC<CountDownProps> = ({ deadline }) => {
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+
+  const getTime = () => {
+    let time: number;
+    if (deadline instanceof Date) {
+      time = deadline.getTime() - Date.now();
+    } else {
+      time = Number(deadline) * 1000 - Date.now();
+    }
+
+    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
+    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
+    setMinutes(Math.floor((time / 1000 / 60) % 60));
+    setSeconds(Math.floor((time / 1000) % 60));
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => getTime(), 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p> {days < 10 ? '0' + days : days} </p> <span>:</span>
+        </div>
+        <span className="blocl mt-1 text-sm">Ngày</span>
+      </div>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p>{hours < 10 ? '0' + hours : hours} </p> <span>:</span>
+        </div>
+        <span className="blocl mt-1 text-sm">Giờ</span>
+      </div>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p>{minutes < 10 ? '0' + minutes : minutes} </p> <span>:</span>
+        </div>
+        <span className="blocl mt-1 text-sm">Phút</span>
+      </div>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p>{seconds < 10 ? '0' + seconds : seconds} </p>
+        </div>
+        <span className="blocl mt-1 text-sm">Giây</span>
+      </div>
+    </>
+  );
+};
+
+export default CounDown;