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

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>
+  )
+}