nextui, next-themes, pnpm

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

1
.npmrc Normal file
View file

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

View file

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

4891
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load diff

View file

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

View file

@ -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>
)

View file

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

View file

@ -1,10 +1,21 @@
import type { Config } from 'tailwindcss'
import { nextui } from '@nextui-org/react'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{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

File diff suppressed because it is too large Load diff