forked from maik/IPFS-portal
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { CheckCircle, Pin } from 'lucide-react';
|
||
|
|
import { addPin } from '@/lib/api';
|
||
|
|
|
||
|
|
interface PinBadgeProps {
|
||
|
|
cid: string;
|
||
|
|
isPinned: boolean;
|
||
|
|
onPin: (cid: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PinBadge({ cid, isPinned, onPin }: PinBadgeProps) {
|
||
|
|
const [pinning, setPinning] = useState(false);
|
||
|
|
|
||
|
|
async function handlePin() {
|
||
|
|
setPinning(true);
|
||
|
|
try {
|
||
|
|
await addPin(cid);
|
||
|
|
onPin(cid);
|
||
|
|
} catch {
|
||
|
|
// pin failed silently
|
||
|
|
} finally {
|
||
|
|
setPinning(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isPinned) {
|
||
|
|
return (
|
||
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-accent-green/10 text-accent-green text-xs font-medium">
|
||
|
|
<CheckCircle className="w-3.5 h-3.5" />
|
||
|
|
Pinned
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={handlePin}
|
||
|
|
disabled={pinning}
|
||
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-surface-600 text-surface-300 text-xs font-medium hover:bg-surface-700 hover:border-surface-500 transition-colors disabled:opacity-50"
|
||
|
|
>
|
||
|
|
<Pin className="w-3.5 h-3.5" />
|
||
|
|
{pinning ? 'Pinning…' : 'Pin this CID'}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|