style: format code biome
This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -8,153 +8,179 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useServerAction } from "@/hooks/use-server-action";
|
||||
|
||||
interface BanInfo {
|
||||
id: number;
|
||||
reason: string;
|
||||
type: string;
|
||||
staffName: string;
|
||||
timestamp: number;
|
||||
banExpire: number;
|
||||
id: number;
|
||||
reason: string;
|
||||
type: string;
|
||||
staffName: string;
|
||||
timestamp: number;
|
||||
banExpire: number;
|
||||
}
|
||||
|
||||
interface UserBanSectionProps {
|
||||
userId: number;
|
||||
username: string;
|
||||
bans: BanInfo[];
|
||||
userId: number;
|
||||
username: string;
|
||||
bans: BanInfo[];
|
||||
}
|
||||
|
||||
export function UserBanSection({ userId, username, bans }: UserBanSectionProps) {
|
||||
const { isPending, run } = useServerAction();
|
||||
const [showBanForm, setShowBanForm] = useState(false);
|
||||
const [reason, setReason] = useState("");
|
||||
const [duration, setDuration] = useState("24");
|
||||
const [banType, setBanType] = useState("account");
|
||||
export function UserBanSection({
|
||||
userId,
|
||||
username,
|
||||
bans,
|
||||
}: UserBanSectionProps) {
|
||||
const { isPending, run } = useServerAction();
|
||||
const [showBanForm, setShowBanForm] = useState(false);
|
||||
const [reason, setReason] = useState("");
|
||||
const [duration, setDuration] = useState("24");
|
||||
const [banType, setBanType] = useState("account");
|
||||
|
||||
const activeBan = bans.find((b) => {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return b.banExpire === 0 || b.banExpire > now;
|
||||
});
|
||||
const activeBan = bans.find((b) => {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return b.banExpire === 0 || b.banExpire > now;
|
||||
});
|
||||
|
||||
function handleBan() {
|
||||
run(
|
||||
() =>
|
||||
banUser({
|
||||
userId,
|
||||
reason,
|
||||
duration: parseInt(duration, 10),
|
||||
type: banType as "account" | "ip" | "machine",
|
||||
}),
|
||||
{
|
||||
successMessage: `${username} has been banned.`,
|
||||
onSuccess: () => {
|
||||
setShowBanForm(false);
|
||||
setReason("");
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
function handleBan() {
|
||||
run(
|
||||
() =>
|
||||
banUser({
|
||||
userId,
|
||||
reason,
|
||||
duration: parseInt(duration, 10),
|
||||
type: banType as "account" | "ip" | "machine",
|
||||
}),
|
||||
{
|
||||
successMessage: `${username} has been banned.`,
|
||||
onSuccess: () => {
|
||||
setShowBanForm(false);
|
||||
setReason("");
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function handleUnban() {
|
||||
run(() => unbanUser({ userId }), {
|
||||
successMessage: `${username} has been unbanned.`,
|
||||
});
|
||||
}
|
||||
function handleUnban() {
|
||||
run(() => unbanUser({ userId }), {
|
||||
successMessage: `${username} has been unbanned.`,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Bans</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
{activeBan ? (
|
||||
<Button variant="outline" size="sm" onClick={handleUnban} disabled={isPending}>
|
||||
<ShieldOff className="mr-2 h-4 w-4" />
|
||||
Unban
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="destructive" size="sm" onClick={() => setShowBanForm(!showBanForm)}>
|
||||
<Ban className="mr-2 h-4 w-4" />
|
||||
Ban
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{activeBan && (
|
||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
|
||||
<p className="text-sm font-medium text-destructive">Active Ban</p>
|
||||
<p className="text-sm">{activeBan.reason}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
By {activeBan.staffName} ·{" "}
|
||||
{activeBan.banExpire === 0
|
||||
? "Permanent"
|
||||
: `Expires ${new Date(activeBan.banExpire * 1000).toLocaleString()}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Bans</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
{activeBan ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleUnban}
|
||||
disabled={isPending}
|
||||
>
|
||||
<ShieldOff className="mr-2 h-4 w-4" />
|
||||
Unban
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowBanForm(!showBanForm)}
|
||||
>
|
||||
<Ban className="mr-2 h-4 w-4" />
|
||||
Ban
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{activeBan && (
|
||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
|
||||
<p className="text-sm font-medium text-destructive">Active Ban</p>
|
||||
<p className="text-sm">{activeBan.reason}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
By {activeBan.staffName} ·{" "}
|
||||
{activeBan.banExpire === 0
|
||||
? "Permanent"
|
||||
: `Expires ${new Date(activeBan.banExpire * 1000).toLocaleString()}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showBanForm && !activeBan && (
|
||||
<div className="space-y-3 rounded-md border p-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Reason</Label>
|
||||
<Textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="Ban reason..."
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Duration (hours)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(e.target.value)}
|
||||
placeholder="0 = permanent"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Type</Label>
|
||||
<Select value={banType} onValueChange={setBanType}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="account">Account</SelectItem>
|
||||
<SelectItem value="ip">IP</SelectItem>
|
||||
<SelectItem value="machine">Machine</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="destructive" onClick={handleBan} disabled={isPending || !reason}>
|
||||
{isPending ? "Banning..." : "Confirm Ban"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{showBanForm && !activeBan && (
|
||||
<div className="space-y-3 rounded-md border p-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Reason</Label>
|
||||
<Textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="Ban reason..."
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Duration (hours)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(e.target.value)}
|
||||
placeholder="0 = permanent"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Type</Label>
|
||||
<Select value={banType} onValueChange={setBanType}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="account">Account</SelectItem>
|
||||
<SelectItem value="ip">IP</SelectItem>
|
||||
<SelectItem value="machine">Machine</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleBan}
|
||||
disabled={isPending || !reason}
|
||||
>
|
||||
{isPending ? "Banning..." : "Confirm Ban"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{bans.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">History</p>
|
||||
{bans.map((ban) => (
|
||||
<div key={ban.id} className="flex items-center justify-between text-sm">
|
||||
<div>
|
||||
<span>{ban.reason}</span>
|
||||
<span className="ml-2">
|
||||
<Badge variant="outline">{ban.type}</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(ban.timestamp * 1000).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{bans.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">History</p>
|
||||
{bans.map((ban) => (
|
||||
<div
|
||||
key={ban.id}
|
||||
className="flex items-center justify-between text-sm"
|
||||
>
|
||||
<div>
|
||||
<span>{ban.reason}</span>
|
||||
<span className="ml-2">
|
||||
<Badge variant="outline">{ban.type}</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(ban.timestamp * 1000).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user