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 (
<div className="h-auto w-full pt-8">
<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]) => (
<div className="flex flex-row items-center" key={letter}>
<p className="pr-4 text-lg uppercase">{letter}</p>
<Progress className="h-4 flex-1" value={value * 100} />
<p className="pl-4">{(value * 100).toFixed(2)}%</p>
</div>
<tr key={letter}>
<td className="uppercase text-lg pr-4">{letter}</td>
<td className="w-full">
<Progress className="h-4" value={value * 100}/>
</td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))}
</div>
</tbody>
</table>
{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">
<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]) => (
<div className="flex flex-row items-center" key={letter}>
<p className="pr-4 text-lg uppercase">{letter}</p>
<Progress className="h-4 flex-1" value={value * 100} />
<p className="pl-4">{(value * 100).toFixed(2)}%</p>
</div>
<tr key={letter}>
<td className="uppercase text-lg pr-4">{letter}</td>
<td className="w-full">
<Progress className="h-4" value={value * 100}/>
</td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))}
</div>
</tbody>
</table>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
)}
</div>
);
}

50
src/components/WordDensity.tsx
View File

@@ -14,29 +14,51 @@ export default function WordDensity({ density }: WordDensityProps) {
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">
<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]) => (
<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>
<tr key={word}>
<td className="uppercase text-lg pr-4">{word}</td>
<td className="w-full">
<Progress className="h-4" value={value * 100}/>
</td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))}
</div>
</tbody>
</table>
{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">
<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]) => (
<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>
<tr key={word}>
<td className="uppercase text-lg pr-4">{word}</td>
<td className="w-full">
<Progress className="h-4" value={value * 100}/>
</td>
<td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
</tr>
))}
</div>
</tbody>
</table>
</AccordionContent>
</AccordionItem>
</Accordion>