93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { Plus, X } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { giveBadge, removeBadge } from '@/actions/users'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { useServerAction } from '@/hooks/use-server-action'
|
|
|
|
interface BadgeInfo {
|
|
id: number
|
|
badgeCode: string
|
|
}
|
|
|
|
interface UserBadgesSectionProps {
|
|
userId: number
|
|
badges: BadgeInfo[]
|
|
}
|
|
|
|
export function UserBadgesSection({ userId, badges }: UserBadgesSectionProps) {
|
|
const { isPending, run } = useServerAction()
|
|
const [newBadge, setNewBadge] = useState('')
|
|
|
|
function handleAddBadge() {
|
|
if (!newBadge.trim()) return
|
|
run(() => giveBadge({ userId, badgeCode: newBadge.trim() }), {
|
|
successMessage: `Badge "${newBadge.trim()}" added.`,
|
|
onSuccess: () => setNewBadge(''),
|
|
})
|
|
}
|
|
|
|
function handleRemoveBadge(badgeCode: string) {
|
|
run(() => removeBadge({ userId, badgeCode }), {
|
|
successMessage: `Badge "${badgeCode}" removed.`,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Badges ({badges.length})</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={newBadge}
|
|
onChange={(e) => setNewBadge(e.target.value)}
|
|
placeholder="Badge code..."
|
|
onKeyDown={(e) => e.key === 'Enter' && handleAddBadge()}
|
|
/>
|
|
<Button size="icon" onClick={handleAddBadge} disabled={isPending}>
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{badges.map((badge) => (
|
|
<div
|
|
key={badge.id}
|
|
className="group flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-sm hover:border-destructive/50 transition-colors"
|
|
>
|
|
<img
|
|
src={
|
|
process.env.NEXT_PUBLIC_BADGE_URL
|
|
? `${process.env.NEXT_PUBLIC_BADGE_URL}/${badge.badgeCode}.gif`
|
|
: `/swf/c_images/album1584/${badge.badgeCode}.gif`
|
|
}
|
|
alt={badge.badgeCode}
|
|
className="h-5 w-5"
|
|
onError={(e) => {
|
|
;(e.target as HTMLImageElement).style.display = 'none'
|
|
}}
|
|
/>
|
|
<span>{badge.badgeCode}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveBadge(badge.badgeCode)}
|
|
disabled={isPending}
|
|
className="ml-0.5 rounded-full p-0.5 opacity-0 group-hover:opacity-100 hover:bg-destructive/10 text-destructive transition-opacity disabled:opacity-50"
|
|
title={`Remove ${badge.badgeCode}`}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
{badges.length === 0 && <p className="text-sm text-muted-foreground">No badges</p>}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|