mirror of
https://github.com/LalleSX/4chan-XZ.git
synced 2025-10-07 07:22:37 +02:00
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React, { useState } from "react"
|
|
import SettingsPopup from "./SettingsPopup"
|
|
import $ from "jquery"
|
|
|
|
|
|
|
|
const Header = () => {
|
|
// Get the board name from the URL (e.g. /g/ or /pol/)
|
|
const board = window.location.pathname.split("/")[1]
|
|
// Get the URL for the index page of the board
|
|
const indexUrl = `https://boards.4chan.org/${board}/`
|
|
// Get the URL for the catalog page of the board
|
|
const catalogUrl = `https://boards.4chan.org/${board}/catalog`
|
|
const [settingsVisible, setSettingsVisible] = useState<boolean>(false)
|
|
// Remove the default header
|
|
$("#boardNavDesktop").remove()
|
|
$(".danbo-slot").remove()
|
|
$("h4").remove()
|
|
$(".abovePostForm").remove()
|
|
$(".boardList").remove()
|
|
$("#boardNavMobile").remove()
|
|
|
|
const toggleSettingsPopup = () => {
|
|
setSettingsVisible(!settingsVisible)
|
|
}
|
|
|
|
return (
|
|
<div className=" bg-indigo-50 text-gray-900 py-2 px-4 flex justify-between items-center fixed top-0 left-0 w-full">
|
|
<div className="flex">
|
|
<a href={indexUrl} className="mx-2 hover:text-red-500">
|
|
Index
|
|
</a>
|
|
<a href={catalogUrl} className="mx-2 hover:text-red-500">
|
|
Catalog
|
|
</a>
|
|
</div>
|
|
<button
|
|
onClick={toggleSettingsPopup}
|
|
className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1.5 rounded"
|
|
>
|
|
Settings
|
|
</button>
|
|
{settingsVisible && (
|
|
<div className="absolute right-0 mt-2">
|
|
<SettingsPopup onClose={toggleSettingsPopup} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header
|