Spaces:
Sleeping
Sleeping
File size: 4,263 Bytes
743409d | 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 | import { Card } from './ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { AnalysisData } from '../types/analysis';
import { OverviewPanel } from './OverviewPanel';
import { HeatmapView } from './HeatmapView';
import { DarkPatternsList } from './DarkPatternsList';
import { CompliancePanel } from './CompliancePanel';
import { ExportReport } from './ExportReport';
import { BarChart3 } from 'lucide-react';
interface AnalysisResultsProps {
data: AnalysisData;
}
export function AnalysisResults({ data }: AnalysisResultsProps) {
return (
<div className="space-y-6">
<Card className="p-6 bg-card/40 backdrop-blur-md border border-border shadow-2xl rounded-2xl relative overflow-hidden">
{/* Decorative background glow */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl -z-10 pointer-events-none" />
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 pb-6 border-b border-white/5">
<div className="flex items-center gap-2">
<BarChart3 className="w-5 h-5 text-indigo-400 animate-pulse" />
<h2 className="text-xl font-extrabold bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
AI Auditing Diagnostic
</h2>
</div>
<ExportReport data={data} />
</div>
<Tabs defaultValue="overview" className="w-full">
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4 bg-slate-900/60 p-1.5 rounded-xl border border-border gap-1 mb-6">
<TabsTrigger
value="overview"
className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
>
Overview Summary
</TabsTrigger>
<TabsTrigger
value="heatmap"
className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
>
Diagnostic Heatmap
</TabsTrigger>
<TabsTrigger
value="patterns"
className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
>
Detected Triggers
</TabsTrigger>
<TabsTrigger
value="compliance"
className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
>
CFPB Compliance
</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="mt-4 focus-visible:outline-none">
<OverviewPanel data={data} />
</TabsContent>
<TabsContent value="heatmap" className="mt-4 focus-visible:outline-none">
<HeatmapView data={data} />
</TabsContent>
<TabsContent value="patterns" className="mt-4 focus-visible:outline-none">
<DarkPatternsList patterns={data.darkPatterns} />
</TabsContent>
<TabsContent value="compliance" className="mt-4 focus-visible:outline-none">
<CompliancePanel report={data.complianceReport} />
</TabsContent>
</Tabs>
</Card>
</div>
);
} |