Spaces:
Sleeping
Sleeping
File size: 3,480 Bytes
4c41b3d | 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | import React, { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Copy, Download, Shield } from "lucide-react";
import { toast } from "sonner";
interface Payload {
id: string;
name: string;
score: number;
tags: string[];
code?: string;
}
interface PayloadLibraryProps {
payloads: Payload[];
onSelect?: (payload: Payload) => void;
}
export function PayloadLibrary({ payloads, onSelect }: PayloadLibraryProps) {
const [searchTerm, setSearchTerm] = useState("");
const [selectedPayload, setSelectedPayload] = useState<Payload | null>(null);
const filtered = payloads.filter(p =>
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
p.tags.some(t => t.toLowerCase().includes(searchTerm.toLowerCase()))
);
return (
<div className="space-y-4">
<div className="flex gap-2">
<Input
placeholder="Search payloads..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="bg-black/50 border-green-500/20 text-white"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{filtered.map((payload) => (
<Card
key={payload.id}
className={`bg-gray-900/50 border-green-500/20 cursor-pointer hover:border-green-500/50 transition-all ${
selectedPayload?.id === payload.id ? "border-green-500 ring-1 ring-green-500" : ""
}`}
onClick={() => {
setSelectedPayload(payload);
onSelect?.(payload);
}}
>
<CardHeader className="pb-2">
<div className="flex justify-between items-start">
<CardTitle className="text-sm text-green-400">{payload.name}</CardTitle>
<Badge className="bg-cyan-500/20 text-cyan-400 text-xs">{payload.score}/100</Badge>
</div>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex flex-wrap gap-1">
{payload.tags.map((tag) => (
<Badge key={tag} className="bg-purple-500/20 text-purple-300 text-xs">
{tag}
</Badge>
))}
</div>
<div className="flex gap-2">
<Button
size="sm"
variant="ghost"
className="flex-1 text-xs text-green-400 hover:text-green-300"
onClick={(e) => {
e.stopPropagation();
toast.success("Payload copied!");
}}
>
<Copy size={12} className="mr-1" />
Copy
</Button>
<Button
size="sm"
variant="ghost"
className="flex-1 text-xs text-cyan-400 hover:text-cyan-300"
onClick={(e) => {
e.stopPropagation();
toast.success("Obfuscating...");
}}
>
<Shield size={12} className="mr-1" />
Obfuscate
</Button>
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
}
|