dominiknatter/lederle-text-analyzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extended version

Browse Source
This commit is contained in:
Dominik Natter
2025-03-28 10:31:04 +01:00
parent 0e0ba8fe9f
commit fdf551167e
3 changed files with 106 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/WordDensity.tsx Normal file
View File

@@ -0,0 +1,46 @@
"use client";
import { Progress } from "@/components/ui/progress";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
type WordDensityProps = {
density: Record<string, number>;
};
export default function WordDensity({ density }: WordDensityProps) {
const sorted = Object.entries(density).sort((a, b) => b[1] - a[1]);
const firstFive = sorted.slice(0, 5);
const rest = sorted.slice(5);
return (
<div className="h-auto w-full pt-8">
<h2 className="text-2xl">Word Density</h2>
<div className="flex flex-col py-4 gap-2">
{firstFive.map(([word, value]) => (
<div className="flex flex-row items-center" key={word}>
<p className="pr-4 text-lg uppercase">{word}</p>
<Progress className="h-4 flex-1" value={value * 100} />
<p className="pl-4">{(value * 100).toFixed(2)}%</p>
</div>
))}
</div>
{rest.length > 0 && (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="text-xl">See more</AccordionTrigger>
<AccordionContent>
<div className="flex flex-col py-4 gap-2">
{rest.map(([word, value]) => (
<div className="flex flex-row items-center" key={word}>
<p className="pr-4 text-lg uppercase">{word}</p>
<Progress className="h-4 flex-1" value={value * 100} />
<p className="pl-4">{(value * 100).toFixed(2)}%</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
</div>
);
}