feat: expiry links

packages/ui/primitives/date-time-picker.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import React from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { CalendarIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Calendar } from './calendar';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+export interface DateTimePickerProps {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  minDate?: Date;
+}
+
+export const DateTimePicker = ({
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  className,
+  minDate = new Date(),
+}: DateTimePickerProps) => {
+  const { _ } = useLingui();
+  const [open, setOpen] = React.useState(false);
+
+  const handleDateSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) {
+      onChange?.(undefined);
+      return;
+    }
+
+    if (value) {
+      const existingTime = DateTime.fromJSDate(value);
+      const newDateTime = DateTime.fromJSDate(selectedDate).set({
+        hour: existingTime.hour,
+        minute: existingTime.minute,
+      });
+      onChange?.(newDateTime.toJSDate());
+    } else {
+      const now = DateTime.now();
+      const newDateTime = DateTime.fromJSDate(selectedDate).set({
+        hour: now.hour,
+        minute: now.minute,
+      });
+      onChange?.(newDateTime.toJSDate());
+    }
+    setOpen(false);
+  };
+
+  const handleTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const timeValue = event.target.value;
+    if (!timeValue || !value) return;
+
+    const [hours, minutes] = timeValue.split(':').map(Number);
+    const newDateTime = DateTime.fromJSDate(value).set({
+      hour: hours,
+      minute: minutes,
+    });
+
+    onChange?.(newDateTime.toJSDate());
+  };
+
+  const formatDateTime = (date: Date) => {
+    return DateTime.fromJSDate(date).toFormat('MMM dd, yyyy');
+  };
+
+  const formatTime = (date: Date) => {
+    return DateTime.fromJSDate(date).toFormat('HH:mm');
+  };
+
+  return (
+    <div className={cn('flex gap-2', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              'w-[200px] justify-start text-left font-normal',
+              !value && 'text-muted-foreground',
+            )}
+            disabled={disabled}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value ? formatDateTime(value) : <span>{placeholder || _(msg`Pick a date`)}</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={handleDateSelect}
+            disabled={
+              disabled
+                ? true
+                : (date) => {
+                    return date < minDate;
+                  }
+            }
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+
+      {value && (
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm">
+            <Trans>at</Trans>
+          </span>
+          <Input
+            type="time"
+            value={formatTime(value)}
+            onChange={handleTimeChange}
+            disabled={disabled}
+            className="w-[120px]"
+          />
+        </div>
+      )}
+    </div>
+  );
+};