albert/erettsegi-browser
1
0
Fork 0
mirror of https://github.com/skidoodle/erettsegi-browser.git synced 2025-02-15 05:39:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

nextui, next-themes, pnpm

Browse source
This commit is contained in:
skidoodle 2023-09-19 21:12:46 +02:00
parent 4afb6adaed
commit 6ca06abc00
8 changed files with 5035 additions and 2592 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.npmrc Normal file
View file

@ -0,0 +1 @@
public-hoist-pattern[]=*@nextui-org/*

3
package.json
View file

@ -9,13 +9,16 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@nextui-org/react": "^2.1.13",
"@types/node": "20.6.1", "@types/node": "20.6.1",
"@types/react": "18.2.21", "@types/react": "18.2.21",
"@types/react-dom": "18.2.7", "@types/react-dom": "18.2.7",
"autoprefixer": "10.4.15", "autoprefixer": "10.4.15",
"eslint": "8.49.0", "eslint": "8.49.0",
"eslint-config-next": "13.4.19", "eslint-config-next": "13.4.19",
"framer-motion": "^10.16.4",
"next": "13.4.19", "next": "13.4.19",
"next-themes": "^0.2.1",
"postcss": "8.4.29", "postcss": "8.4.29",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",

4891
pnpm-lock.yaml generated Normal file
View file

File diff suppressed because it is too large Load diff

12
src/pages/_app.tsx
View file

@ -1,7 +1,9 @@
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
import { AppProps } from 'next/app' import { AppProps } from 'next/app'
import '@/styles/globals.css' import { NextUIProvider } from '@nextui-org/react'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import Head from 'next/head' import Head from 'next/head'
import '@/styles/globals.css'
const inter = Inter({ const inter = Inter({
subsets: ['latin'], subsets: ['latin'],
@ -14,9 +16,11 @@ export default function App({ Component, pageProps }: AppProps) {
<Head> <Head>
<title>Érettségi kereső</title> <title>Érettségi kereső</title>
</Head> </Head>
<main className={`${inter.variable} font-sans`}> <NextUIProvider className={`${inter.variable} font-sans`}>
<Component {...pageProps} /> <NextThemesProvider attribute="class" defaultTheme="dark">
</main> <Component {...pageProps} />
</NextThemesProvider>
</NextUIProvider>
</> </>
) )
} }

214
src/pages/index.tsx
View file

@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
import { useAvailableYears } from '@/utils/years' import { useAvailableYears } from '@/utils/years'
import { subjects } from '@/utils/subjects' import { subjects } from '@/utils/subjects'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
import { Select, SelectItem } from '@nextui-org/select'
import { Button, ButtonGroup } from '@nextui-org/button'
export default function Home() { export default function Home() {
const [flPdfLink, setflPdfLink] = useState<string>('') const [flPdfLink, setflPdfLink] = useState<string>('')
@ -59,106 +61,124 @@ export default function Home() {
]) ])
return ( return (
<main className="flex min-h-screen flex-col items-center justify-between p-24"> <main className="dark text-foreground bg-background">
<div className="container mx-auto mt-15"> <div className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="flex flex-col items-center justify-center"> <div className="container mx-auto mt-15">
<div className="mb-3"> <div className="flex flex-col items-center justify-center">
<select <div className="mb-3">
value={selectedSubject} <Select
onChange={(e) => setSelectedSubject(e.target.value)} selectionMode="single"
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" label="Tárgy"
> value={selectedSubject}
<option className="hidden" value=""> onChange={(e) => setSelectedSubject(e.target.value)}
Tárgy className="w-56"
</option> >
{subjects.map((subject) => ( {subjects.map((subject) => (
<option key={subject.value} value={subject.value}> <SelectItem key={subject.value} value={subject.value}>
{subject.label} {subject.label}
</option> </SelectItem>
))} ))}
</select> </Select>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<select <Select
value={selectedYear} selectionMode="single"
onChange={(e) => setSelectedYear(e.target.value)} label="Év"
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" value={selectedYear}
> onChange={(e) => setSelectedYear(e.target.value)}
<option className="hidden" value=""> className="w-56"
Év >
</option> {years.map((year) => (
{years.map((year) => ( <SelectItem key={year} value={year}>
<option key={year} value={year}> {year}
{year} </SelectItem>
</option> ))}
))} </Select>
</select> </div>
</div> <div className="mb-3">
<div className="mb-3"> <Select
<select selectionMode="single"
value={selectedPeriod} label="Időszak"
onChange={(e) => setSelectedPeriod(e.target.value)} value={selectedPeriod}
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" onChange={(e) => setSelectedPeriod(e.target.value)}
> className="w-56"
<option className="hidden" value=""> >
Időszak <SelectItem key={'tavasz'} value={'tavasz'}>
</option> Tavasz
<option value="tavasz">Tavasz</option> </SelectItem>
<option value="osz">Ősz</option> <SelectItem key={'osz'} value={'osz'}>
</select> Ősz
</div> </SelectItem>
<div className="mb-3"> </Select>
<select </div>
value={selectedLevel} <div className="mb-3">
onChange={(e) => setSelectedLevel(e.target.value)} <Select
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" selectionMode="single"
> label="Szint"
<option className="hidden" value=""> value={selectedLevel}
Szint onChange={(e) => setSelectedLevel(e.target.value)}
</option> className="w-56"
<option value="kozep">Közép</option> >
<option value="emelt">Emelt</option> <SelectItem key={'kozep'} value={'kozep'}>
</select> Közép
</div> </SelectItem>
<SelectItem key={'emelt'} value={'emelt'}>
Emelt
</SelectItem>
</Select>
</div>
<div className="space-x-3"> <div className="space-x-3">
<button <ButtonGroup>
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded" <Button
onClick={flPdfLink ? () => window.open(flPdfLink) : () => {}} isDisabled={!flPdfLink}
> className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
Feladatlap onClick={flPdfLink ? () => window.open(flPdfLink) : () => {}}
</button> >
<button Feladatlap
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded" </Button>
onClick={utPdfLink ? () => window.open(utPdfLink) : () => {}} <Button
> isDisabled={!utPdfLink}
Útmutató className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
</button> onClick={utPdfLink ? () => window.open(utPdfLink) : () => {}}
</div> >
<div className="space-x-3"> Útmutató
{selectedSubject === 'inf' || </Button>
selectedSubject === 'infoism' || </ButtonGroup>
selectedSubject === 'digkult' ? ( </div>
<button <div className="space-x-3">
className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded" <ButtonGroup>
onClick={flZipLink ? () => window.open(flZipLink) : () => {}} {selectedSubject === 'inf' ||
> selectedSubject === 'infoism' ||
Forrás selectedSubject === 'digkult' ? (
</button> <Button
) : null} isDisabled={!flZipLink}
{selectedSubject === 'inf' || className="w-24 mt-3 text-sm bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2"
selectedSubject === 'infoism' || onClick={
selectedSubject === 'digkult' ? ( flZipLink ? () => window.open(flZipLink) : () => {}
<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) : () => {}} Forrás
> </Button>
Megoldás ) : null}
</button> {selectedSubject === 'inf' ||
) : null} 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> </div>
<Footer />
</div> </div>
<Footer />
</div> </div>
</main> </main>
) )

5
src/styles/globals.css
View file

@ -2,6 +2,9 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html,
body { body {
background-color: #0e0f0f; margin: 0;
height: 100%;
overflow: hidden;
} }

11
tailwind.config.ts
View file

@ -1,10 +1,21 @@
import type { Config } from 'tailwindcss' import type { Config } from 'tailwindcss'
import { nextui } from '@nextui-org/react'
const config: Config = { const config: Config = {
content: [ content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
darkMode: 'class',
plugins: [
nextui({
addCommonColors: true,
}),
], ],
} }

2490
yarn.lock
View file

File diff suppressed because it is too large Load diff