feat: update configuration, styles, and components for improved UI and functionality

src/components/dday.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+interface DDayComponentProps {
+    targetDate: Date;
+    label: string;
+
+}
+
+export default function DDayComponent({ targetDate, label }: DDayComponentProps) {
+    const today = new Date();
+    const diffTime = targetDate.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    const getLabel = () => {
+        if (diffDays > 0) return `D-${diffDays}`;
+        if (diffDays < 0) return `D+${Math.abs(diffDays)}`;
+        return `D-Day`;
+    };
+
+    return (
+        <div className="flex flex-col items-end text-right text-sm">
+            <span>{getLabel()}</span>
+            <span className="text-muted-foreground">{label} | {targetDate.toDateString()}</span>
+        </div>
+    );
+}