Working!!!!!!!!!!!!!!! SIGMA MALE ATTITUDE JERKMATE RANKED GYATT
This commit is contained in:
Dominik Natter
103
src/app/page.tsx
103
src/app/page.tsx
@@ -1,42 +1,83 @@
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {Checkbox} from "@/components/ui/checkbox";
|
||||
import {Stats} from "@/components/Stats";
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Stats } from "@/components/Stats";
|
||||
import LetterDensity from "@/components/LetterDensity";
|
||||
|
||||
|
||||
const config = {
|
||||
includeSpaces: true,
|
||||
charLimit: 500,
|
||||
theme: "dark",
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="max-w-6xl m-auto min-h-screen flex flex-col ">
|
||||
<h1 className="text-6xl font-semibold text-center">Analyze your Text<br/>in real-time.</h1>
|
||||
<Textarea className="h-72" placeholder="Start typing here...(or paste your text)" />
|
||||
const [text, setText] = useState("");
|
||||
const [analysis, setAnalysis] = useState<any>(null);
|
||||
const [includeSpaces, setIncludeSpaces] = useState(true);
|
||||
|
||||
<div className="flex flex-row space-x-2 pt-2 justify-between">
|
||||
<div>
|
||||
<Checkbox id="terms" />
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Exclude Spaces
|
||||
</label>
|
||||
useEffect(() => {
|
||||
const result: any = {};
|
||||
const inputText = text;
|
||||
|
||||
result.charCount = includeSpaces ? inputText.length : inputText.replace(/\s/g, "").length;
|
||||
result.wordCount = (inputText.match(/[a-zA-ZäöüÄÖÜß]+/g) || []).length;
|
||||
result.sentenceCount = (inputText.match(/[\w\s][.?!](?=\s|$)/g) || []).length;
|
||||
result.exceedsLimit = result.charCount > config.charLimit;
|
||||
result.readingTimeMinutes = Math.ceil(result.wordCount / 200);
|
||||
|
||||
<Checkbox id="terms" />
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Set Character Limit
|
||||
</label>
|
||||
</div>
|
||||
const letters = inputText.toLowerCase().match(/[a-z]/g) || [];
|
||||
const totalLetters = letters.length;
|
||||
result.letterDensity = {};
|
||||
|
||||
<div>
|
||||
<p>Approx. reading time:</p>
|
||||
for (let char of letters) {
|
||||
result.letterDensity[char] = (result.letterDensity[char] || 0) + 1;
|
||||
}
|
||||
|
||||
for (let char in result.letterDensity) {
|
||||
result.letterDensity[char] = +(result.letterDensity[char] / totalLetters).toFixed(3);
|
||||
}
|
||||
|
||||
setAnalysis(result);
|
||||
}, [text, includeSpaces]);
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl m-auto min-h-screen flex flex-col">
|
||||
<h1 className="text-6xl font-semibold text-center">
|
||||
Analyze your Text<br />in real-time.
|
||||
</h1>
|
||||
|
||||
<Textarea
|
||||
className="h-72"
|
||||
placeholder="Start typing here...(or paste your text)"
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row space-x-2 pt-2 justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox id="spaces" checked={includeSpaces} onCheckedChange={setIncludeSpaces} />
|
||||
<label htmlFor="spaces" className="text-sm font-medium leading-none">
|
||||
Exclude Spaces
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Approx. reading time: {analysis?.readingTimeMinutes ?? 0} min</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{analysis && (
|
||||
<>
|
||||
<Stats
|
||||
charCount={analysis.charCount}
|
||||
wordCount={analysis.wordCount}
|
||||
sentenceCount={analysis.sentenceCount}
|
||||
/>
|
||||
<LetterDensity density={analysis.letterDensity} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Stats/>
|
||||
<LetterDensity/>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
"use client";
|
||||
import {Progress} from "@/components/ui/progress";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
|
||||
export default function LetterDensity(){
|
||||
return(
|
||||
type LetterDensityProps = {
|
||||
density: Record<string, number>;
|
||||
};
|
||||
|
||||
export default function LetterDensity({ density }: LetterDensityProps) {
|
||||
const sorted = Object.entries(density).sort((a, b) => b[1] - a[1]);
|
||||
|
||||
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">
|
||||
<div className="flex flex-row items-center">
|
||||
<p className="pr-4 text-lg">A</p>
|
||||
<Progress className="h-4" value={33}/>
|
||||
<p className="pl-4">40(16.06%)</p>
|
||||
</div>
|
||||
<div className="flex flex-row items-center">
|
||||
<p className="pr-4 text-lg">A</p>
|
||||
<Progress className="h-4" value={33}/>
|
||||
<p className="pl-4">40(16.06%)</p>
|
||||
</div>
|
||||
<div className="flex flex-row items-center">
|
||||
<p className="pr-4 text-lg">A</p>
|
||||
<Progress className="h-4" value={33}/>
|
||||
<p className="pl-4">40(16.06%)</p>
|
||||
</div>
|
||||
|
||||
{sorted.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>
|
||||
))}
|
||||
</div>
|
||||
<h3>See more</h3>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,44 +1,32 @@
|
||||
import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"
|
||||
import {Card, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
interface StatsProps {
|
||||
charCount: number;
|
||||
wordCount: number;
|
||||
sentenceCount: number;
|
||||
}
|
||||
|
||||
export function Stats() {
|
||||
export function Stats({ charCount, wordCount, sentenceCount }: StatsProps) {
|
||||
return (
|
||||
<div className="flex flex-row space-x-4 gap-4 h-32">
|
||||
<div className="flex flex-row space-x-4 gap-4 h-32">
|
||||
<Card className="w-full">
|
||||
<CardHeader className="relative">
|
||||
|
||||
<CardTitle className="text-6xl font-semibold tabular-nums">
|
||||
03
|
||||
</CardTitle>
|
||||
<CardTitle className="text-6xl font-semibold tabular-nums">{charCount}</CardTitle>
|
||||
<CardDescription>Total Characters</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="w-full">
|
||||
<CardHeader className="relative">
|
||||
|
||||
<CardTitle className="text-6xl font-semibold tabular-nums">
|
||||
03
|
||||
</CardTitle>
|
||||
<CardTitle className="text-6xl font-semibold tabular-nums">{wordCount}</CardTitle>
|
||||
<CardDescription>Word Count</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="w-full">
|
||||
<CardHeader className="relative">
|
||||
|
||||
<CardTitle className="text-6xl font-semibold tabular-nums">
|
||||
03
|
||||
</CardTitle>
|
||||
<CardTitle className="text-6xl font-semibold tabular-nums">{sentenceCount}</CardTitle>
|
||||
<CardDescription>Sentence Count</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user