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

fix Stats spacing to always have the same space

Browse Source
This commit is contained in:
Dominik Natter
2025-03-28 11:48:56 +01:00
parent 1429a069a6
commit aa5ad46c1b
2 changed files with 75 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/LetterDensity.tsx
View File

@@ -13,34 +13,58 @@ export default function LetterDensity({ density }: LetterDensityProps) {
return ( return (
<div className="h-auto w-full pt-8"> <div className="h-auto w-full pt-8">
<h2 className="text-2xl">Letter Density</h2> <h2 className="text-2xl">Letter Density</h2>
<div className="flex flex-col py-4 gap-2"> <table className="w-full table-auto border-separate border-spacing-y-2">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{firstFive.map(([letter, value]) => ( {firstFive.map(([letter, value]) => (
<div className="flex flex-row items-center" key={letter}> <tr key={letter}>
<p className="pr-4 text-lg uppercase">{letter}</p> <td className="uppercase text-lg pr-4">{letter}</td>
<Progress className="h-4 flex-1" value={value * 100} /> <td className="w-full">
<p className="pl-4">{(value * 100).toFixed(2)}%</p> <Progress className="h-4" value={value * 100}/>
</div> </td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))} ))}
</div> </tbody>
</table>
{rest.length > 0 && ( {rest.length > 0 && (
<Accordion type="single" collapsible> <Accordion type="single" collapsible>
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger className="text-xl">See more</AccordionTrigger> <AccordionTrigger className="text-xl">See more</AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="flex flex-col py-4 gap-2"> <table className="w-full table-auto border-separate border-spacing-y-2">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{rest.map(([letter, value]) => ( {rest.map(([letter, value]) => (
<div className="flex flex-row items-center" key={letter}> <tr key={letter}>
<p className="pr-4 text-lg uppercase">{letter}</p> <td className="uppercase text-lg pr-4">{letter}</td>
<Progress className="h-4 flex-1" value={value * 100} /> <td className="w-full">
<p className="pl-4">{(value * 100).toFixed(2)}%</p> <Progress className="h-4" value={value * 100}/>
</div> </td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))} ))}
</div> </tbody>
</table>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
)} )}
</div> </div>
); );
} }

50
src/components/WordDensity.tsx
View File

@@ -14,29 +14,51 @@ export default function WordDensity({ density }: WordDensityProps) {
return ( return (
<div className="h-auto w-full pt-8"> <div className="h-auto w-full pt-8">
<h2 className="text-2xl">Word Density</h2> <h2 className="text-2xl">Word Density</h2>
<div className="flex flex-col py-4 gap-2"> <table className="w-full table-auto border-separate border-spacing-y-2">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{firstFive.map(([word, value]) => ( {firstFive.map(([word, value]) => (
<div className="flex flex-row items-center" key={word}> <tr key={word}>
<p className="pr-4 text-lg uppercase">{word}</p> <td className="uppercase text-lg pr-4">{word}</td>
<Progress className="h-4 flex-1" value={value * 100} /> <td className="w-full">
<p className="pl-4">{(value * 100).toFixed(2)}%</p> <Progress className="h-4" value={value * 100}/>
</div> </td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))} ))}
</div> </tbody>
</table>
{rest.length > 0 && ( {rest.length > 0 && (
<Accordion type="single" collapsible> <Accordion type="single" collapsible>
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger className="text-xl">See more</AccordionTrigger> <AccordionTrigger className="text-xl">See more</AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="flex flex-col py-4 gap-2"> <table className="w-full table-auto border-separate border-spacing-y-2">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{rest.map(([word, value]) => ( {rest.map(([word, value]) => (
<div className="flex flex-row items-center" key={word}> <tr key={word}>
<p className="pr-4 text-lg uppercase">{word}</p> <td className="uppercase text-lg pr-4">{word}</td>
<Progress className="h-4 flex-1" value={value * 100} /> <td className="w-full">
<p className="pl-4">{(value * 100).toFixed(2)}%</p> <Progress className="h-4" value={value * 100}/>
</div> </td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))} ))}
</div> </tbody>
</table>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>