Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 16x 9x 8x 1x | interface PasskeyItemProps {
id: number
createdAt: string | null
lastUsedAt: string | null
isDeletable: boolean
onDelete: (id: number) => void
}
function formatDate(dateStr: string | null): string {
if (!dateStr) return 'Never'
return new Date(dateStr).toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
})
}
export default function PasskeyItem({
id,
createdAt,
lastUsedAt,
isDeletable,
onDelete,
}: PasskeyItemProps) {
return (
<div className="flex items-center justify-between rounded-lg border border-input bg-background p-4">
<div>
<div className="text-sm font-medium text-foreground">
Passkey #{id}
</div>
<div className="text-xs text-muted-foreground">
Added {formatDate(createdAt)}
</div>
<div className="text-xs text-muted-foreground">
Last used: {formatDate(lastUsedAt)}
</div>
</div>
{isDeletable && (
<button
onClick={() => onDelete(id)}
className="rounded-md px-3 py-1 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
>
Delete
</button>
)}
</div>
)
}
|