mirror of
https://github.com/skidoodle/erettsegi-browser.git
synced 2025-02-15 05:39:15 +01:00
nextui, next-themes, pnpm
This commit is contained in:
parent
4afb6adaed
commit
6ca06abc00
8 changed files with 5035 additions and 2592 deletions
|
|
@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
|
|||
import { useAvailableYears } from '@/utils/years'
|
||||
import { subjects } from '@/utils/subjects'
|
||||
import Footer from '@/components/Footer'
|
||||
import { Select, SelectItem } from '@nextui-org/select'
|
||||
import { Button, ButtonGroup } from '@nextui-org/button'
|
||||
|
||||
export default function Home() {
|
||||
const [flPdfLink, setflPdfLink] = useState<string>('')
|
||||
|
|
@ -59,106 +61,124 @@ export default function Home() {
|
|||
])
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="container mx-auto mt-15">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="mb-3">
|
||||
<select
|
||||
value={selectedSubject}
|
||||
onChange={(e) => setSelectedSubject(e.target.value)}
|
||||
className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none hover:bg-[#3C4143] transition-colors duration-150"
|
||||
>
|
||||
<option className="hidden" value="">
|
||||
Tárgy
|
||||
</option>
|
||||
{subjects.map((subject) => (
|
||||
<option key={subject.value} value={subject.value}>
|
||||
{subject.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<select
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(e.target.value)}
|
||||
className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none hover:bg-[#3C4143] transition-colors duration-150"
|
||||
>
|
||||
<option className="hidden" value="">
|
||||
Év
|
||||
</option>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<select
|
||||
value={selectedPeriod}
|
||||
onChange={(e) => setSelectedPeriod(e.target.value)}
|
||||
className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none hover:bg-[#3C4143] transition-colors duration-150"
|
||||
>
|
||||
<option className="hidden" value="">
|
||||
Időszak
|
||||
</option>
|
||||
<option value="tavasz">Tavasz</option>
|
||||
<option value="osz">Ősz</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<select
|
||||
value={selectedLevel}
|
||||
onChange={(e) => setSelectedLevel(e.target.value)}
|
||||
className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none hover:bg-[#3C4143] transition-colors duration-150"
|
||||
>
|
||||
<option className="hidden" value="">
|
||||
Szint
|
||||
</option>
|
||||
<option value="kozep">Közép</option>
|
||||
<option value="emelt">Emelt</option>
|
||||
</select>
|
||||
</div>
|
||||
<main className="dark text-foreground bg-background">
|
||||
<div className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="container mx-auto mt-15">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="mb-3">
|
||||
<Select
|
||||
selectionMode="single"
|
||||
label="Tárgy"
|
||||
value={selectedSubject}
|
||||
onChange={(e) => setSelectedSubject(e.target.value)}
|
||||
className="w-56"
|
||||
>
|
||||
{subjects.map((subject) => (
|
||||
<SelectItem key={subject.value} value={subject.value}>
|
||||
{subject.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Select
|
||||
selectionMode="single"
|
||||
label="Év"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(e.target.value)}
|
||||
className="w-56"
|
||||
>
|
||||
{years.map((year) => (
|
||||
<SelectItem key={year} value={year}>
|
||||
{year}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Select
|
||||
selectionMode="single"
|
||||
label="Időszak"
|
||||
value={selectedPeriod}
|
||||
onChange={(e) => setSelectedPeriod(e.target.value)}
|
||||
className="w-56"
|
||||
>
|
||||
<SelectItem key={'tavasz'} value={'tavasz'}>
|
||||
Tavasz
|
||||
</SelectItem>
|
||||
<SelectItem key={'osz'} value={'osz'}>
|
||||
Ősz
|
||||
</SelectItem>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<Select
|
||||
selectionMode="single"
|
||||
label="Szint"
|
||||
value={selectedLevel}
|
||||
onChange={(e) => setSelectedLevel(e.target.value)}
|
||||
className="w-56"
|
||||
>
|
||||
<SelectItem key={'kozep'} value={'kozep'}>
|
||||
Közép
|
||||
</SelectItem>
|
||||
<SelectItem key={'emelt'} value={'emelt'}>
|
||||
Emelt
|
||||
</SelectItem>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-x-3">
|
||||
<button
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"
|
||||
onClick={flPdfLink ? () => window.open(flPdfLink) : () => {}}
|
||||
>
|
||||
Feladatlap
|
||||
</button>
|
||||
<button
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"
|
||||
onClick={utPdfLink ? () => window.open(utPdfLink) : () => {}}
|
||||
>
|
||||
Útmutató
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-x-3">
|
||||
{selectedSubject === 'inf' ||
|
||||
selectedSubject === 'infoism' ||
|
||||
selectedSubject === 'digkult' ? (
|
||||
<button
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"
|
||||
onClick={flZipLink ? () => window.open(flZipLink) : () => {}}
|
||||
>
|
||||
Forrás
|
||||
</button>
|
||||
) : null}
|
||||
{selectedSubject === 'inf' ||
|
||||
selectedSubject === 'infoism' ||
|
||||
selectedSubject === 'digkult' ? (
|
||||
<button
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"
|
||||
onClick={utZipLink ? () => window.open(utZipLink) : () => {}}
|
||||
>
|
||||
Megoldás
|
||||
</button>
|
||||
) : null}
|
||||
<div className="space-x-3">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
isDisabled={!flPdfLink}
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
|
||||
onClick={flPdfLink ? () => window.open(flPdfLink) : () => {}}
|
||||
>
|
||||
Feladatlap
|
||||
</Button>
|
||||
<Button
|
||||
isDisabled={!utPdfLink}
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
|
||||
onClick={utPdfLink ? () => window.open(utPdfLink) : () => {}}
|
||||
>
|
||||
Útmutató
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div className="space-x-3">
|
||||
<ButtonGroup>
|
||||
{selectedSubject === 'inf' ||
|
||||
selectedSubject === 'infoism' ||
|
||||
selectedSubject === 'digkult' ? (
|
||||
<Button
|
||||
isDisabled={!flZipLink}
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
|
||||
onClick={
|
||||
flZipLink ? () => window.open(flZipLink) : () => {}
|
||||
}
|
||||
>
|
||||
Forrás
|
||||
</Button>
|
||||
) : null}
|
||||
{selectedSubject === 'inf' ||
|
||||
selectedSubject === 'infoism' ||
|
||||
selectedSubject === 'digkult' ? (
|
||||
<Button
|
||||
isDisabled={!utZipLink}
|
||||
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
|
||||
onClick={
|
||||
utZipLink ? () => window.open(utZipLink) : () => {}
|
||||
}
|
||||
>
|
||||
Megoldás
|
||||
</Button>
|
||||
) : null}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue