Evidence Details - Copy this React, Tailwind Component to your project

please-redesign-my-code-to-make-it-more-beautiful'use-client'-import-React-from-'react'-import-{-Copy,-BookOpen,-Lightbulb,-FileText,-Check,-AlertTriangle-}-from-'lucide-react'-import-{-Button-}-from-"@/components/ui/button"-import-{-Tabs,-TabsContent,-TabsList,-TabsTrigger-}-from-"@/components/ui/tabs"-import-{-Textarea-}-from-"@/components/ui/textarea"-import-{-Card,-CardContent,-CardHeader,-CardTitle-}-from-"@/components/ui/card"-import-{-Badge-}-from-"@/components/ui/badge"-import-{-Tooltip,-TooltipContent,-TooltipProvider,-TooltipTrigger-}-from-"@/components/ui/tooltip"-import-{-ScrollArea-}-from-"@/components/ui/scroll-area"-export-default-function-EvidenceDetails()-{-const-[copied,-setCopied]-=-React.useState(false)-const-[activeTab,-setActiveTab]-=-React.useState('content')-const-copyToClipboard-=-(text:-string)-=>-{-navigator.clipboard.writeText(text)-setCopied(true)-setTimeout(()-=>-setCopied(false),-2000)-}-return-(-<div-className="h-full-flex-flex-col-bg-background-text-foreground">-<Tabs-value={activeTab}-onValueChange={setActiveTab}-className="w-full-h-full-flex-flex-col">-<div-className="border-b-sticky-top-0-bg-background/95-backdrop-blur-supports-[backdrop-filter]:bg-background/60-z-10">-<TabsList-className="w-full-h-16-p-1">-{['content',-'analysis',-'metadata'].map((tab)-=>-(-<TabsTrigger-key={tab}-value={tab}-className="flex-1-data-[state=active]:bg-primary-data-[state=active]:text-primary-foreground-transition-all-duration-200-ease-in-out"->-{tab-===-'content'-&&-<BookOpen-className="w-4-h-4-mr-2"-/>}-{tab-===-'analysis'-&&-<Lightbulb-className="w-4-h-4-mr-2"-/>}-{tab-===-'metadata'-&&-<FileText-className="w-4-h-4-mr-2"-/>}-{tab.charAt(0).toUpperCase()-+-tab.slice(1)}-</TabsTrigger>-))}-</TabsList>-</div>-<ScrollArea-className="flex-grow">-<TabsContent-value="content"-className="p-6-focus-visible:outline-none-focus-visible:ring-0">-<Card-className="overflow-hidden">-<CardHeader-className="bg-muted">-<CardTitle-className="text-lg-flex-items-center-justify-between">-Evidence-Content-<TooltipProvider>-<Tooltip>-<TooltipTrigger-asChild>-<Button-variant="ghost"-size="sm"-className="hover:bg-background"-onClick={()-=>-copyToClipboard("This-is-a-placeholder-for-the-raw-text-content-of-the-selected-evidence.-It-could-be-a-paragraph-or-multiple-paragraphs-of-text-extracted-from-a-document.")}->-{copied-?-<Check-className="w-4-h-4"-/>-:-<Copy-className="w-4-h-4"-/>}-</Button>-</TooltipTrigger>-<TooltipContent>-<p>{copied-?-'Copied!'-:-'Copy-to-clipboard'}</p>-</TooltipContent>-</Tooltip>-</TooltipProvider>-</CardTitle>-</CardHeader>-<CardContent-className="p-6">-<p-className="text-sm-leading-relaxed-text-foreground">-This-is-a-placeholder-for-the-raw-text-content-of-the-selected-evidence.-It-could-be-a-paragraph-or-multiple-paragraphs-of-text-extracted-from-a-document.-</p>-</CardContent>-</Card>-</TabsContent>-<TabsContent-value="analysis"-className="p-6-space-y-6-focus-visible:outline-none-focus-visible:ring-0">-<Card>-<CardHeader>-<CardTitle-className="text-lg-flex-items-center-space-x-2">-<span>Evidence-Strength</span>-<Badge-variant="secondary">Medium</Badge>-</CardTitle>-</CardHeader>-<CardContent>-<div-className="mb-4">-<div-className="h-2.5-bg-secondary-rounded-full-overflow-hidden">-<div-className="h-full-bg-primary-rounded-full-transition-all-duration-500-ease-out"-style={{-width:-'66%'-}}-/>-</div>-</div>-<p-className="text-sm-text-muted-foreground">-This-is-a-placeholder-for-the-justification-of-the-evidence-strength.-It-explains-why-the-evidence-is-considered-strong,-medium,-or-weak.-</p>-</CardContent>-</Card>-<Card>-<CardHeader>-<CardTitle-className="text-lg">Category</CardTitle>-</CardHeader>-<CardContent>-<Badge-variant="outline"-className="text-sm">Placeholder-Category</Badge>-</CardContent>-</Card>-<Card>-<CardHeader>-<CardTitle-className="text-lg">Reasoning</CardTitle>-</CardHeader>-<CardContent>-<p-className="text-sm">This-is-a-placeholder-for-the-reasoning-behind-the-evidence.-It-explains-how-this-piece-of-evidence-supports-or-relates-to-the-main-argument-or-topic.</p>-</CardContent>-</Card>-<Card>-<CardHeader>-<CardTitle-className="text-lg">Annotations</CardTitle>-</CardHeader>-<CardContent>-<Textarea-placeholder="Add-your-notes-about-this-evidence..."-className="min-h-[120px]-resize-none-focus-visible:ring-primary"-/>-</CardContent>-</Card>-</TabsContent>-<TabsContent-value="metadata"-className="p-6-space-y-6-focus-visible:outline-none-focus-visible:ring-0">-<Card>-<CardHeader>-<CardTitle-className="text-lg">Document-Details</CardTitle>-</CardHeader>-<CardContent-className="space-y-4">-<div>-<h4-className="text-sm-font-medium-text-muted-foreground-mb-1">Document-Name</h4>-<p-className="text-sm-bg-muted-p-2-rounded">Placeholder-Document-Name</p>-</div>-<div>-<h4-className="text-sm-font-medium-text-muted-foreground-mb-1">File-Name</h4>-<p-className="text-sm-bg-muted-p-2-rounded">placeholder_file_name.pdf</p>-</div>-</CardContent>-</Card>-<Card>-<CardHeader>-<CardTitle-className="text-lg">Topic-Information</CardTitle>-</CardHeader>-<CardContent-className="space-y-4">-<div>-<h4-className="text-sm-font-medium-text-muted-foreground-mb-1">Essay-Topic</h4>-<p-className="text-sm-bg-muted-p-2-rounded">This-is-a-placeholder-for-the-general-essay-topic.</p>-</div>-<div>-<h4-className="text-sm-font-medium-text-muted-foreground-mb-1">Refined-Topic</h4>-<p-className="text-sm-bg-muted-p-2-rounded">This-is-a-placeholder-for-the-more-specific,-refined-topic-based-on-the-evidence.</p>-</div>-</CardContent>-</Card>-</TabsContent>-</ScrollArea>-</Tabs>-</div>-)-}