mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-02-04 15:56:31 -05:00
feat: improve invoice calendar item display and date picker icon button styling
This commit is contained in:
3
bun.lock
3
bun.lock
@@ -6,6 +6,7 @@
|
||||
"name": "beenvoice",
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
@@ -145,6 +146,8 @@
|
||||
|
||||
"@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
|
||||
|
||||
"@dnd-kit/modifiers": ["@dnd-kit/modifiers@9.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw=="],
|
||||
|
||||
"@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
|
||||
|
||||
"@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
|
||||
@@ -255,8 +255,8 @@ export function InvoiceCalendarView({
|
||||
{dayItems.length > 0 ? (
|
||||
dayItems.map(({ item }, i) => (
|
||||
<div key={i} className="bg-background rounded-xl p-2 text-xs shadow-sm border">
|
||||
<div className="font-medium truncate">{item.description || "No description"}</div>
|
||||
<div className="text-muted-foreground">{item.hours}h</div>
|
||||
<div className="font-medium line-clamp-2 text-wrap break-words">{item.description || "No description"}</div>
|
||||
<div className="text-muted-foreground whitespace-nowrap">{item.hours}h</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
@@ -285,11 +285,11 @@ export function InvoiceCalendarView({
|
||||
>
|
||||
<SheetContent side="right" className="w-[400px] sm:w-[540px] flex flex-col gap-0 p-0 sm:max-w-[540px]">
|
||||
<SheetHeader className="p-6 border-b">
|
||||
<SheetTitle className="flex items-center gap-3 text-2xl">
|
||||
<div className="bg-primary/10 p-2.5 rounded-full">
|
||||
<SheetTitle className="flex items-center gap-3 text-2xl flex-wrap">
|
||||
<div className="bg-primary/10 p-2.5 rounded-full flex-shrink-0">
|
||||
<CalendarIcon className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
{date ? format(date, "EEEE, MMMM do") : "Details"}
|
||||
<span className="break-words text-left">{date ? format(date, "EEEE, MMMM do") : "Details"}</span>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
@@ -312,50 +312,48 @@ export function InvoiceCalendarView({
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{selectedDateItems.map(({ item, index }) => (
|
||||
<div key={item.id} className="bg-card border rounded-xl p-4 transition-all shadow-sm group hover:border-primary/20">
|
||||
<div className="flex-1 space-y-3">
|
||||
<div key={item.id} className="border-border bg-card overflow-hidden rounded-lg border group hover:border-primary/50 transition-colors">
|
||||
<div className="space-y-3 p-4">
|
||||
{/* Description */}
|
||||
<div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">Description</Label>
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) => onUpdateItem(index, "description", e.target.value)}
|
||||
placeholder="Describe the work performed..."
|
||||
className="w-full text-sm font-medium"
|
||||
className="pl-3 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Controls Row */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Hours */}
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={v => onUpdateItem(index, "hours", v)}
|
||||
step={0.25}
|
||||
min={0}
|
||||
width="auto"
|
||||
className="h-9 flex-1 min-w-[100px] font-mono"
|
||||
suffix="h"
|
||||
/>
|
||||
|
||||
{/* Rate */}
|
||||
<NumberInput
|
||||
value={item.rate}
|
||||
onChange={v => onUpdateItem(index, "rate", v)}
|
||||
prefix="$"
|
||||
min={0}
|
||||
step={1}
|
||||
width="auto"
|
||||
className="h-9 flex-1 min-w-[100px] font-mono"
|
||||
/>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="ml-auto">
|
||||
<span className="text-primary font-semibold">
|
||||
${(item.hours * item.rate).toFixed(2)}
|
||||
</span>
|
||||
{/* Hours and Rate in a row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">Hours</Label>
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={v => onUpdateItem(index, "hours", v)}
|
||||
step={0.25}
|
||||
min={0}
|
||||
width="full"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-muted-foreground text-xs">Rate</Label>
|
||||
<NumberInput
|
||||
value={item.rate}
|
||||
onChange={v => onUpdateItem(index, "rate", v)}
|
||||
prefix="$"
|
||||
min={0}
|
||||
step={1}
|
||||
width="full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{/* Bottom section with controls, item name, and total */}
|
||||
<div className="border-border bg-muted/50 flex items-center justify-between border-t px-4 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@@ -366,6 +364,17 @@ export function InvoiceCalendarView({
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 px-3 text-center">
|
||||
<span className="text-muted-foreground block text-sm font-medium">
|
||||
Item #{index + 1}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-muted-foreground text-xs">Total</span>
|
||||
<span className="text-primary text-lg font-bold">
|
||||
${(item.hours * item.rate).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -134,7 +134,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
||||
}, [formData.items, formData.taxRate]);
|
||||
|
||||
// Handlers (addItem, updateItem etc. - same as before)
|
||||
const addItem = (date?: Date | unknown) => {
|
||||
const addItem = (date?: unknown) => {
|
||||
const validDate = date instanceof Date ? date : new Date();
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
|
||||
@@ -1,26 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
GripVertical,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
@@ -73,73 +55,30 @@ interface LineItemRowProps {
|
||||
isLast: boolean;
|
||||
}
|
||||
|
||||
interface SortableLineItemProps {
|
||||
item: InvoiceItem;
|
||||
index: number;
|
||||
canRemove: boolean;
|
||||
onRemove: (index: number) => void;
|
||||
onUpdate: (
|
||||
index: number,
|
||||
field: string,
|
||||
value: string | number | Date,
|
||||
) => void;
|
||||
onMoveUp: (index: number) => void;
|
||||
onMoveDown: (index: number) => void;
|
||||
isFirst: boolean;
|
||||
isLast: boolean;
|
||||
}
|
||||
|
||||
function SortableLineItem({
|
||||
item,
|
||||
index,
|
||||
canRemove,
|
||||
onRemove,
|
||||
onUpdate,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
isFirst,
|
||||
isLast,
|
||||
}: SortableLineItemProps) {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: item.id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
layout
|
||||
// Add ID here for scrolling
|
||||
id={`invoice-item-${index}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className={cn(
|
||||
"bg-card border hidden rounded-xl p-4 md:block transition-all shadow-sm group hover:border-primary/20",
|
||||
isDragging && "opacity-50 shadow-md rotate-1 scale-[1.01] z-50 ring-2 ring-primary/20",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Drag Handle and Arrow Controls */}
|
||||
<div className="mt-1 flex flex-col items-center gap-1">
|
||||
<div
|
||||
className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded-md transition-colors mt-2"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<GripVertical className="text-muted-foreground/50 hover:text-foreground h-4 w-4 transition-colors" />
|
||||
</div>
|
||||
const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
|
||||
(
|
||||
{
|
||||
item,
|
||||
index,
|
||||
canRemove,
|
||||
onRemove,
|
||||
onUpdate,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
isFirst,
|
||||
isLast,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-card border hidden rounded-xl p-4 md:block transition-all shadow-sm group hover:border-primary/20",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Arrow Controls */}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Button
|
||||
type="button"
|
||||
@@ -164,80 +103,81 @@ function SortableLineItem({
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 space-y-3">
|
||||
{/* Description */}
|
||||
<div>
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) => onUpdate(index, "description", e.target.value)}
|
||||
placeholder="Describe the work performed..."
|
||||
className="w-full text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Controls Row */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Date */}
|
||||
<DatePicker
|
||||
date={item.date}
|
||||
onDateChange={(date) =>
|
||||
onUpdate(index, "date", date ?? new Date())
|
||||
}
|
||||
size="sm"
|
||||
className="w-full sm:w-[180px]"
|
||||
inputClassName="h-9"
|
||||
/>
|
||||
|
||||
{/* Hours */}
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={(value) => onUpdate(index, "hours", value)}
|
||||
min={0}
|
||||
step={0.25}
|
||||
width="auto"
|
||||
className="h-9 flex-1 min-w-[100px] font-mono"
|
||||
suffix="h"
|
||||
/>
|
||||
|
||||
{/* Rate */}
|
||||
<NumberInput
|
||||
value={item.rate}
|
||||
onChange={(value) => onUpdate(index, "rate", value)}
|
||||
min={0}
|
||||
step={1}
|
||||
prefix="$"
|
||||
width="auto"
|
||||
className="h-9 flex-1 min-w-[100px] font-mono"
|
||||
/>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="ml-auto">
|
||||
<span className="text-primary font-semibold">
|
||||
${(item.hours * item.rate).toFixed(2)}
|
||||
</span>
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 space-y-3">
|
||||
{/* Description */}
|
||||
<div>
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) => onUpdate(index, "description", e.target.value)}
|
||||
placeholder="Describe the work performed..."
|
||||
className="w-full text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemove(index)}
|
||||
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
|
||||
disabled={!canRemove}
|
||||
aria-label="Remove item"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* Controls Row */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Date */}
|
||||
<DatePicker
|
||||
date={item.date}
|
||||
onDateChange={(date) =>
|
||||
onUpdate(index, "date", date ?? new Date())
|
||||
}
|
||||
size="sm"
|
||||
className="w-full sm:w-[180px]"
|
||||
inputClassName="h-9"
|
||||
/>
|
||||
|
||||
{/* Hours */}
|
||||
<NumberInput
|
||||
value={item.hours}
|
||||
onChange={(value) => onUpdate(index, "hours", value)}
|
||||
min={0}
|
||||
step={0.25}
|
||||
width="auto"
|
||||
className="h-9 flex-1 min-w-[100px] font-mono"
|
||||
suffix="h"
|
||||
/>
|
||||
|
||||
{/* Rate */}
|
||||
<NumberInput
|
||||
value={item.rate}
|
||||
onChange={(value) => onUpdate(index, "rate", value)}
|
||||
min={0}
|
||||
step={1}
|
||||
prefix="$"
|
||||
width="auto"
|
||||
className="h-9 flex-1 min-w-[100px] font-mono"
|
||||
/>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="ml-auto">
|
||||
<span className="text-primary font-semibold">
|
||||
${(item.hours * item.rate).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemove(index)}
|
||||
className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
|
||||
disabled={!canRemove}
|
||||
aria-label="Remove item"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
LineItemCard.displayName = "LineItemCard";
|
||||
|
||||
function MobileLineItem({
|
||||
item,
|
||||
@@ -253,10 +193,6 @@ function MobileLineItem({
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
// Add ID here for scrolling (mobile uses same ID since only one is shown usually via CSS)
|
||||
// But safer to differentiate or handle duplicates?
|
||||
// Actually, IDs must be unique. Let's rely on the structure that only one is visible.
|
||||
// Or just duplicate ID knowing it's slightly invalid but functional if one is `display:none`.
|
||||
id={`invoice-item-${index}-mobile`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@@ -308,6 +244,7 @@ function MobileLineItem({
|
||||
step={1}
|
||||
prefix="$"
|
||||
width="full"
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -375,77 +312,54 @@ export function InvoiceLineItems({
|
||||
onUpdateItem,
|
||||
onMoveUp,
|
||||
onMoveDown,
|
||||
onReorderItems,
|
||||
className,
|
||||
}: InvoiceLineItemsProps) {
|
||||
const canRemoveItems = items.length > 1;
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
}),
|
||||
);
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event;
|
||||
|
||||
if (active.id !== over?.id) {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||
const newIndex = items.findIndex((item) => item.id === over?.id);
|
||||
|
||||
const newItems = arrayMove(items, oldIndex, newIndex);
|
||||
onReorderItems(newItems);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-2", className)}>
|
||||
{/* Desktop Cards with Drag and Drop */}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={items.map((item) => item.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<AnimatePresence>
|
||||
<div className="space-y-2">
|
||||
{items.map((item, index) => (
|
||||
<React.Fragment key={item.id}>
|
||||
{/* Desktop/Tablet Card with Drag and Drop */}
|
||||
<SortableLineItem
|
||||
item={item}
|
||||
index={index}
|
||||
canRemove={canRemoveItems}
|
||||
onRemove={onRemoveItem}
|
||||
onUpdate={onUpdateItem}
|
||||
onMoveUp={onMoveUp}
|
||||
onMoveDown={onMoveDown}
|
||||
isFirst={index === 0}
|
||||
isLast={index === items.length - 1}
|
||||
/>
|
||||
<AnimatePresence>
|
||||
<div className="space-y-2">
|
||||
{items.map((item, index) => (
|
||||
<React.Fragment key={item.id}>
|
||||
{/* Desktop/Tablet Card */}
|
||||
<motion.div
|
||||
layout
|
||||
id={`invoice-item-${index}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
<LineItemCard
|
||||
item={item}
|
||||
index={index}
|
||||
canRemove={canRemoveItems}
|
||||
onRemove={onRemoveItem}
|
||||
onUpdate={onUpdateItem}
|
||||
onMoveUp={onMoveUp}
|
||||
onMoveDown={onMoveDown}
|
||||
isFirst={index === 0}
|
||||
isLast={index === items.length - 1}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Mobile Card */}
|
||||
<MobileLineItem
|
||||
item={item}
|
||||
index={index}
|
||||
canRemove={canRemoveItems}
|
||||
onRemove={onRemoveItem}
|
||||
onUpdate={onUpdateItem}
|
||||
onMoveUp={onMoveUp}
|
||||
onMoveDown={onMoveDown}
|
||||
isFirst={index === 0}
|
||||
isLast={index === items.length - 1}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
{/* Mobile Card */}
|
||||
<MobileLineItem
|
||||
item={item}
|
||||
index={index}
|
||||
canRemove={canRemoveItems}
|
||||
onRemove={onRemoveItem}
|
||||
onUpdate={onUpdateItem}
|
||||
onMoveUp={onMoveUp}
|
||||
onMoveDown={onMoveDown}
|
||||
isFirst={index === 0}
|
||||
isLast={index === items.length - 1}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Add Item Button */}
|
||||
<div className="px-3 pt-3">
|
||||
|
||||
@@ -100,10 +100,11 @@ function Calendar({
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
|
||||
props.showWeekNumber
|
||||
"relative w-full h-full p-0 text-center group/day aspect-square select-none",
|
||||
props.mode !== "single" && "[&:last-child[data-selected=true]_button]:rounded-r-md",
|
||||
props.mode !== "single" && (props.showWeekNumber
|
||||
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
|
||||
: "[&:first-child[data-selected=true]_button]:rounded-l-md",
|
||||
: "[&:first-child[data-selected=true]_button]:rounded-l-md"),
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
|
||||
@@ -98,13 +98,13 @@ export function DatePicker({
|
||||
<Button
|
||||
variant="ghost"
|
||||
disabled={disabled}
|
||||
className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
|
||||
className="absolute top-1/2 right-2 size-6 p-0 -translate-y-1/2 text-primary/80 hover:text-primary transition-colors z-20"
|
||||
>
|
||||
<CalendarIcon className="size-3.5" />
|
||||
<CalendarIcon className="size-4" />
|
||||
<span className="sr-only">Select date</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto overflow-hidden p-0" align="end">
|
||||
<PopoverContent className="w-auto overflow-hidden p-0 rounded-xl" align="end">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
|
||||
Reference in New Issue
Block a user