113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import {
|
|
Archive,
|
|
ArchiveRestore,
|
|
MoreVertical,
|
|
Palette,
|
|
Pin,
|
|
Trash2,
|
|
} from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import { NOTE_COLORS } from "@/lib/types"
|
|
|
|
interface NoteActionsProps {
|
|
isPinned: boolean
|
|
isArchived: boolean
|
|
currentColor: string
|
|
onTogglePin: () => void
|
|
onToggleArchive: () => void
|
|
onColorChange: (color: string) => void
|
|
onDelete: () => void
|
|
className?: string
|
|
}
|
|
|
|
export function NoteActions({
|
|
isPinned,
|
|
isArchived,
|
|
currentColor,
|
|
onTogglePin,
|
|
onToggleArchive,
|
|
onColorChange,
|
|
onDelete,
|
|
className
|
|
}: NoteActionsProps) {
|
|
return (
|
|
<div
|
|
className={cn("flex items-center justify-end gap-1", className)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Pin Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 w-8 p-0"
|
|
onClick={onTogglePin}
|
|
title={isPinned ? 'Unpin' : 'Pin'}
|
|
>
|
|
<Pin className={cn('h-4 w-4', isPinned && 'fill-current')} />
|
|
</Button>
|
|
|
|
{/* Color Palette */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0" title="Change color">
|
|
<Palette className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<div className="grid grid-cols-5 gap-2 p-2">
|
|
{Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
|
|
<button
|
|
key={colorName}
|
|
className={cn(
|
|
'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
|
|
classes.bg,
|
|
currentColor === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700'
|
|
)}
|
|
onClick={() => onColorChange(colorName)}
|
|
title={colorName}
|
|
/>
|
|
))}
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* More Options */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={onToggleArchive}>
|
|
{isArchived ? (
|
|
<>
|
|
<ArchiveRestore className="h-4 w-4 mr-2" />
|
|
Unarchive
|
|
</>
|
|
) : (
|
|
<>
|
|
<Archive className="h-4 w-4 mr-2" />
|
|
Archive
|
|
</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={onDelete} className="text-red-600 dark:text-red-400">
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
}
|