Quinta/valgo
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Still trying

Browse Source
This commit is contained in:
Quinta
2024-06-30 23:55:10 +02:00
parent 32814269ef
commit 4ea83685b7
1 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+19 -22
View File
@@ -2,10 +2,10 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import React from 'react'; import React from 'react';
import { Button } from "../components/ui/button" import { Button } from "../components/ui/button";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "../components/ui/dropdown-menu" import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "../components/ui/dropdown-menu";
import { Slider } from "../components/ui/slider" import { Slider } from "../components/ui/slider";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../components/ui/card";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -13,10 +13,12 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog" } from "@/components/ui/dialog";
type LanguageCode = 'en' | 'fr' | 'it' | 'de' | 'es' | 'ja' | 'no' | 'sv' | 'uk' | 'ru'; type AlgorithmKey = "bubble" | "insertion" | "heap" | "quick" | "merge" | "radix" | "counting" | "bucket" | "shell";
type AlgorithmKey = 'bubble' | 'insertion' | 'heap' | 'quick' | 'merge' | 'radix' | 'counting' | 'bucket' | 'shell'; type LanguageCode = "en" | "fr" | "it" | "de" | "es" | "ja" | "no" | "sv" | "uk" | "ru";
const languages: LanguageCode[] = ['en', 'fr', 'it', 'de', 'es', 'ja', 'no', 'sv', 'uk', 'ru'];
interface AlgorithmDescription { interface AlgorithmDescription {
title: string; title: string;
@@ -31,9 +33,7 @@ type Translations = {
}; };
}; };
const languages: LanguageCode[] = ['en', 'fr', 'it', 'de', 'es', 'ja', 'no', 'sv', 'uk', 'ru']; const translations: Translations = {
const translations = {
bubble: { bubble: {
en: { en: {
title: "Bubble Sort", title: "Bubble Sort",
@@ -594,14 +594,12 @@ const translations = {
} }
}; };
export default function Component() { export default function Component() {
const [array, setArray] = useState<number[]>([]) const [array, setArray] = useState<number[]>([])
const [isRunning, setIsRunning] = useState(false) const [isRunning, setIsRunning] = useState(false)
const [currentAlgorithm, setCurrentAlgorithm] = useState("bubble") const [currentAlgorithm, setCurrentAlgorithm] = useState<AlgorithmKey>("bubble")
const [arraySize, setArraySize] = useState(20) const [arraySize, setArraySize] = useState(20)
const [selectedLanguage, setSelectedLanguage] = useState('en'); const [selectedLanguage, setSelectedLanguage] = useState<LanguageCode>('en');
const pauseRef = useRef(false) const pauseRef = useRef(false)
const stopRef = useRef(false) const stopRef = useRef(false)
@@ -984,7 +982,7 @@ export default function Component() {
<div <div
key={index} key={index}
className={`mx-0.5 ${isRunning ? 'bg-red-500' : 'bg-blue-500'}`} className={`mx-0.5 ${isRunning ? 'bg-red-500' : 'bg-blue-500'}`}
style={{height: `${value * 2}px`, width: '20px'}} style={{ height: `${value * 2}px`, width: '20px' }}
></div> ></div>
))} ))}
</div> </div>
@@ -1001,7 +999,7 @@ export default function Component() {
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
value={currentAlgorithm} value={currentAlgorithm}
onValueChange={setCurrentAlgorithm} onValueChange={(value: AlgorithmKey) => setCurrentAlgorithm(value)}
> >
<DropdownMenuRadioItem value="bubble">Bubble Sort</DropdownMenuRadioItem> <DropdownMenuRadioItem value="bubble">Bubble Sort</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="insertion">Insertion Sort</DropdownMenuRadioItem> <DropdownMenuRadioItem value="insertion">Insertion Sort</DropdownMenuRadioItem>
@@ -1039,7 +1037,6 @@ export default function Component() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>
<footer className="bg-muted text-muted-foreground py-6"> <footer className="bg-muted text-muted-foreground py-6">
<div className="container mx-auto px-4 md:px-6 flex items-center justify-between"> <div className="container mx-auto px-4 md:px-6 flex items-center justify-between">
@@ -1052,7 +1049,7 @@ export default function Component() {
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
value={selectedLanguage} value={selectedLanguage}
onValueChange={(value) => setSelectedLanguage(value)} onValueChange={(value: LanguageCode) => setSelectedLanguage(value)}
> >
{languages.map((lang) => ( {languages.map((lang) => (
<DropdownMenuRadioItem key={lang} value={lang}> <DropdownMenuRadioItem key={lang} value={lang}>
@@ -1094,17 +1091,16 @@ export default function Component() {
</DialogHeader> </DialogHeader>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<a href="https://github.com/Quinta0" target="_blank" rel="noopener noreferrer" <a href="https://github.com/Quinta0" target="_blank" rel="noopener noreferrer"
className="hover:underline"> className="hover:underline">
<GitHubIcon className="w-6 h-6"/> <GitHubIcon className="w-6 h-6" />
</a> </a>
<a href="mailto:0pietroquintavalle0@gmail.com" className="hover:underline"> <a href="mailto:0pietroquintavalle0@gmail.com" className="hover:underline">
<GmailIcon className="w-6 h-6"/> <GmailIcon className="w-6 h-6" />
</a> </a>
<a href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" target="_blank" <a href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" target="_blank"
rel="noopener noreferrer" className="hover:underline"> rel="noopener noreferrer" className="hover:underline">
<LinkedInIcon className="w-6 h-6"/> <LinkedInIcon className="w-6 h-6" />
</a> </a>
</nav> </nav>
</div> </div>
@@ -1179,3 +1175,4 @@ function LinkedInIcon(props: React.SVGProps<SVGSVGElement>) {
</svg> </svg>
) )
} }