From 2e301924226fda12ce8fea82828b3eaa4c2976c6 Mon Sep 17 00:00:00 2001
From: RohitR311 <rohit.rajan031101@gmail.com>
Date: Wed, 18 Dec 2024 18:24:51 +0530
Subject: [PATCH] feat: add date picker component to input date

---
 src/components/atoms/DatePicker.tsx | 74 +++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/atoms/DatePicker.tsx

diff --git a/src/components/atoms/DatePicker.tsx b/src/components/atoms/DatePicker.tsx
new file mode 100644
index 00000000..30d3b869
--- /dev/null
+++ b/src/components/atoms/DatePicker.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useSocketStore } from '../../context/socket';
+import { Coordinates } from './canvas';
+
+interface DatePickerProps {
+  coordinates: Coordinates;
+  selector: string;
+  onClose: () => void;
+}
+
+const DatePicker: React.FC<DatePickerProps> = ({ coordinates, selector, onClose }) => {
+  const { socket } = useSocketStore();
+  const [selectedDate, setSelectedDate] = useState<string>('');
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedDate(e.target.value);
+  };
+
+  const handleConfirm = () => {
+    if (socket && selectedDate) {
+      socket.emit('input:date', {
+        selector,
+        value: selectedDate
+      });
+      onClose();
+    }
+  };
+
+  return (
+    <div 
+      style={{
+        position: 'absolute',
+        left: `${coordinates.x}px`,
+        top: `${coordinates.y}px`,
+        zIndex: 1000,
+        backgroundColor: 'white',
+        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+        padding: '10px',
+        borderRadius: '4px'
+      }}
+    >
+      <div className="flex flex-col space-y-2">
+        <input
+          type="date"
+          onChange={handleDateChange}
+          value={selectedDate}
+          className="p-2 border rounded"
+          autoFocus
+        />
+        <div className="flex justify-end space-x-2">
+          <button 
+            onClick={onClose}
+            className="px-3 py-1 text-sm text-gray-600 hover:text-gray-800 border rounded"
+          >
+            Cancel
+          </button>
+          <button 
+            onClick={handleConfirm}
+            disabled={!selectedDate}
+            className={`px-3 py-1 text-sm rounded ${
+              selectedDate 
+                ? 'bg-blue-500 text-white hover:bg-blue-600' 
+                : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+            }`}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DatePicker;
\ No newline at end of file