feat: bounty countdown timer - Bounty #826 (100K $FNDRY)

Author: OpenClaw Bot

frontend/src/components/bounty/BountyCountdown.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface BountyCountdownProps {
+  /** ISO date string or timestamp when the bounty expires */
+  deadline: string | number | Date;
+  /** Optional label above the countdown */
+  label?: string;
+  /** Optional className for the outer container */
+  className?: string;
+}
+
+interface TimeRemaining {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  total: number;
+}
+
+function getTimeRemaining(deadline: Date): TimeRemaining {
+  const total = deadline.getTime() - Date.now();
+  if (total <= 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+  }
+  return {
+    days: Math.floor(total / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((total / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((total / (1000 * 60)) % 60),
+    seconds: Math.floor((total / 1000) % 60),
+    total,
+  };
+}
+
+type Urgency = "expired" | "critical" | "warning" | "safe";
+
+function getUrgency(time: TimeRemaining): Urgency {
+  if (time.total <= 0) return "expired";
+  if (time.days < 1) return "critical";
+  if (time.days < 3) return "warning";
+  return "safe";
+}
+
+const urgencyStyles: Record<Urgency, { bg: string; text: string; ring: string; label: string }> = {
+  safe: {
+    bg: "bg-emerald-500/10",
+    text: "text-emerald-400",
+    ring: "ring-emerald-500/30",
+    label: "Plenty of time",
+  },
+  warning: {
+    bg: "bg-amber-500/10",
+    text: "text-amber-400",
+    ring: "ring-amber-500/30",
+    label: "Expiring soon",
+  },
+  critical: {
+    bg: "bg-red-500/10",
+    text: "text-red-400",
+    ring: "ring-red-500/30",
+    label: "Almost expired!",
+  },
+  expired: {
+    bg: "bg-gray-500/10",
+    text: "text-gray-400",
+    ring: "ring-gray-500/30",
+    label: "Expired",
+  },
+};
+
+function TimeUnit({ value, label, color }: { value: number; label: string; color: string }) {
+  return (
+    <div className="flex flex-col items-center">
+      <motion.div
+        key={value}
+        initial={{ y: -8, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ type: "spring", stiffness: 300, damping: 20 }}
+        className={`text-xl sm:text-2xl md:text-3xl font-bold font-mono tabular-nums ${color}`}
+      >
+        {String(value).padStart(2, "0")}
+      </motion.div>
+      <span className="text-[10px] sm:text-xs uppercase tracking-wider text-gray-500 mt-0.5">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+export default function BountyCountdown({
+  deadline,
+  label = "Time Remaining",
+  className = "",
+}: BountyCountdownProps) {
+  const [time, setTime] = useState<TimeRemaining>(() =>
+    getTimeRemaining(new Date(deadline))
+  );
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const interval = setInterval(() => {
+      setTime(getTimeRemaining(new Date(deadline)));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [deadline]);
+
+  const urgency = getUrgency(time);
+  const styles = urgencyStyles[urgency];
+
+  // Avoid hydration mismatch
+  if (!mounted) {
+    return (
+      <div className={`rounded-lg p-3 ring-1 ${styles.ring} ${styles.bg} ${className}`}>
+        <p className={`text-xs font-medium ${styles.text} mb-2`}>{label}</p>
+        <div className="flex items-center justify-center gap-3 sm:gap-4">
+          {["Days", "Hrs", "Min", "Sec"].map((l) => (
+            <div key={l} className="flex flex-col items-center">
+              <span className={`text-xl sm:text-2xl md:text-3xl font-bold font-mono ${styles.text}`}>
+                --
+              </span>
+              <span className="text-[10px] sm:text-xs uppercase tracking-wider text-gray-500 mt-0.5">
+                {l}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3 }}
+      className={`rounded-lg p-3 ring-1 ${styles.ring} ${styles.bg} ${className}`}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <p className={`text-xs font-medium ${styles.text}`}>{label}</p>
+        <AnimatePresence mode="wait">
+          <motion.span
+            key={urgency}
+            initial={{ opacity: 0, x: 6 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -6 }}
+            className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${styles.bg} ${styles.text}`}
+          >
+            {styles.label}
+          </motion.span>
+        </AnimatePresence>
+      </div>
+
+      <div className="flex items-center justify-center gap-3 sm:gap-4">
+        <TimeUnit value={time.days} label="Days" color={styles.text} />
+        <span className={`text-lg font-light ${styles.text} opacity-40 -mt-4`}>:</span>
+        <TimeUnit value={time.hours} label="Hrs" color={styles.text} />
+        <span className={`text-lg font-light ${styles.text} opacity-40 -mt-4`}>:</span>
+        <TimeUnit value={time.minutes} label="Min" color={styles.text} />
+        <span className={`text-lg font-light ${styles.text} opacity-40 -mt-4`}>:</span>
+        <TimeUnit value={time.seconds} label="Sec" color={styles.text} />
+      </div>
+    </motion.div>
+  );
+}