téma váltó funkció gomb implementálása a kódbau

package.json

@@ -1,7 +1,8 @@
 {
   "name": "erettsegi-browser",
-  "version": "0.1.0",
+  "version": "6.9",
   "private": true,
+  "author": "albert|skidoodle@gh",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -22,6 +23,7 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   }

src/components/Footer.tsx

@@ -1,28 +1,11 @@
-import React from 'react'
-import Link from 'next/link'
+import { Source } from '@/components/Source'
+import { ThemeSwitcher } from '@/components/ThemeSwitcher'
 
-const Footer: React.FC = () => {
+export const Footer = () => {
   return (
-    <div className="fixed bottom-0 py-4 left-0 right-0 text-center">
-      <p className="text-sm text-gray-400">
-        <Link
-          href="https://albert.lol"
-          target="_blank"
-          className="text-blue-500 hover:text-blue-700"
-        >
-          albert
-        </Link>
-        {' | '}
-        <Link
-          href="https://github.com/skidoodle/erettsegi-browser"
-          target="_blank"
-          className="text-blue-500 hover:text-blue-700"
-        >
-          github
-        </Link>
-      </p>
+    <div className="fixed bottom-0 py-5 left-0 right-0 text-center space-x-5">
+      <Source />
+      <ThemeSwitcher />
     </div>
   )
 }
-
-export default Footer

src/components/Source.tsx

@@ -0,0 +1,16 @@
+import { RiOpenSourceFill } from 'react-icons/ri'
+import { Button } from '@nextui-org/button'
+
+export const Source = () => {
+  return (
+    <Button
+      aria-label="Source Code"
+      size="sm"
+      onClick={() =>
+        window.open('https://github.com/skidoodle/erettsegi-browser')
+      }
+    >
+      <RiOpenSourceFill size={20} />
+    </Button>
+  )
+}

src/components/ThemeSwitcher.tsx

@@ -0,0 +1,31 @@
+import { BsSunFill, BsMoonFill } from 'react-icons/bs'
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Button } from '@nextui-org/button'
+
+export const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  const toggle = () => {
+    if (theme === 'dark') {
+      setTheme('light')
+    } else {
+      setTheme('dark')
+    }
+  }
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
+  return (
+    <Button aria-label="Switch Theme" size="sm" onClick={() => toggle()}>
+      {theme === 'light' ? (
+        <BsMoonFill style={{ fill: 'black' }} size={20} />
+      ) : (
+        <BsSunFill size={20} />
+      )}
+    </Button>
+  )
+}

src/pages/index.tsx

@@ -1,10 +1,14 @@
 import { useState, useEffect } from 'react'
 import { useAvailableYears } from '@/utils/years'
 import { subjects } from '@/utils/subjects'
-import { Select, SelectItem } from '@nextui-org/select'
-import { Button, ButtonGroup } from '@nextui-org/button'
-import { Divider } from '@nextui-org/divider'
-import Footer from '@/components/Footer'
+import {
+  Select,
+  SelectItem,
+  Button,
+  ButtonGroup,
+  Divider,
+} from '@nextui-org/react'
+import { Footer } from '@/components/Footer'
 
 export default function Home() {
   const [flPdfLink, setflPdfLink] = useState<string>('')
@@ -62,11 +66,14 @@ export default function Home() {
   ])
 
   return (
-    <main className="dark:bg-[#121212] 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">
+    <main className="dark:bg-[#121212] text-foreground bg-background py-5">
+      <h1 className="text-4xl font-bold text-blue-400 text-center mt-16">
+        Érettségi kereső
+      </h1>
+      <div className="flex min-h-screen flex-col items-center justify-between">
+        <div className="container mx-auto">
           <div className="flex flex-col items-center justify-center">
-            <div className="mb-3">
+            <div className="mt-5 mb-3">
               <Select
                 selectionMode="single"
                 label="Tárgy"
@@ -180,9 +187,9 @@ export default function Home() {
               </ButtonGroup>
             </div>
           </div>
-          <Footer />
         </div>
       </div>
+      <Footer />
     </main>
   )
 }

src/styles/globals.css

@@ -2,8 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
 body {
+  background-color: #121212;
   margin: 0;
   height: 100%;
   overflow: hidden;