95 lines
2.8 KiB
TypeScript
95 lines
2.8 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>
|
|
);
|
|
}
|