404
++ Az oldal nem található +
++ A keresett tartalom nem létezik, még nem jelent meg, vagy már nem + elérhető. +
+ + Vissza a főoldalra + +Kapcsolat
bss@sch.bme.hu
-
- ![{'instagram]()
- ![{'youtube]()
- ![{'facebook]()
+
+ {socialLinks.map((social) => (
+
+ 
+
+ ))}
-
- ![{'ac'}]()
- ![{'schonherz'}]()
- ![{'simonyi'}]()
- ![{'schdesign'}]()
- ![{'vik'}]()
+
+
+ )
+}
+
+export function ForbiddenContent() {
+ return (
+
+
+ )
+}
+
+/* --- Loading placeholders ------------------------------------------------- */
+
+/** Placeholder for a line of text; the caller supplies the height. */
+export function SkeletonLine({ className = '' }: { className?: string }) {
+ return
+}
+
+/**
+ * Placeholder for a video or event card: 16:9 thumbnail plus a heading. Its
+ * sizes match the real card's, so the layout doesn't jump when content
+ * appears.
+ */
+export function ThumbnailCardSkeleton({
+ lines = 1,
+ className = '',
+}: {
+ lines?: number
+ className?: string
+}) {
+ return (
+
+ )
+}
+
+/**
+ * Placeholder for a card grid. The `className` must carry the real grid's
+ * column settings so the placeholders render with the same number of columns.
+ */
+export function ThumbnailGridSkeleton({
+ count,
+ className = '',
+ lines = 1,
+ label = 'Betöltés…',
+}: {
+ count: number
+ className?: string
+ lines?: number
+ label?: string
+}) {
+ return (
+ (EMPTY_RESULTS)
+ const [activeIndex, setActiveIndex] = useState(-1)
+ const boxRef = useRef(null)
+ const abortRef = useRef(null)
+
+ useEffect(() => {
+ function onDocClick(event: MouseEvent) {
+ if (boxRef.current === null) return
+ if (
+ event.target instanceof Node &&
+ boxRef.current.contains(event.target)
+ ) {
+ return
+ }
+ setOpen(false)
+ }
+ document.addEventListener('click', onDocClick)
+ return () => document.removeEventListener('click', onDocClick)
+ }, [])
+
+ useEffect(() => {
+ const trimmed = query.trim()
+ if (trimmed.length < 2) {
+ setResults(EMPTY_RESULTS)
+ setActiveIndex(-1)
+ return
+ }
+ const timer = setTimeout(() => {
+ abortRef.current?.abort()
+ const controller = new AbortController()
+ abortRef.current = controller
+ void fetch(`/api/search?q=${encodeURIComponent(trimmed)}&limit=5`, {
+ signal: controller.signal,
+ })
+ .then((response) => (response.ok ? response.json() : EMPTY_RESULTS))
+ .then((data: SearchResults) => {
+ setResults(data)
+ setOpen(true)
+ })
+ .catch(() => {})
+ }, 250)
+ return () => clearTimeout(timer)
+ }, [query])
+
+ type Hit =
+ | { kind: 'video'; label: string; href: string }
+ | { kind: 'event'; label: string; href: string }
+ | { kind: 'member'; label: string; href: string }
+ | { kind: 'tag'; label: string; href: string }
+
+ const hits: Array = [
+ ...results.videos.map((video) => ({
+ kind: 'video' as const,
+ label: video.title,
+ href: `/videos/${video.slug}`,
+ })),
+ ...results.events.map((event) => ({
+ kind: 'event' as const,
+ label: event.title,
+ href: `/events/${event.slug}`,
+ })),
+ ...results.members.map((member) => ({
+ kind: 'member' as const,
+ label: `${member.fullName} (Tag)`,
+ href: `/members/${member.username}`,
+ })),
+ ...results.tags.map((tag) => ({
+ kind: 'tag' as const,
+ label: `${tag.name} (Címke)`,
+ href: `/videos?tags=${encodeURIComponent(tag.name)}`,
+ })),
+ ]
+
+ function openHit(hit: Hit) {
+ setOpen(false)
+ if (hit.href.startsWith('/videos?')) {
+ const tagName = decodeURIComponent(hit.href.replace('/videos?tags=', ''))
+ void navigate({
+ to: '/videos',
+ search: { tags: [tagName] },
+ })
+ return
+ }
+ window.location.assign(hit.href)
+ }
+
+ function onKeyDown(event: React.KeyboardEvent) {
+ if (event.key === 'Escape') {
+ setOpen(false)
+ setActiveIndex(-1)
+ return
+ }
+ if (!open || hits.length === 0) {
+ return
+ }
+ if (event.key === 'ArrowDown') {
+ event.preventDefault()
+ setActiveIndex((index) => (index + 1) % hits.length)
+ } else if (event.key === 'ArrowUp') {
+ event.preventDefault()
+ setActiveIndex((index) => (index <= 0 ? hits.length - 1 : index - 1))
+ } else if (event.key === 'Enter') {
+ const hit = hits.at(activeIndex)
+ if (hit === undefined) {
+ return
+ }
+ event.preventDefault()
+ openHit(hit)
+ }
+ }
+
+ const kindLabels: Record = {
+ video: 'Videó',
+ event: 'Esemény',
+ member: 'Tag',
+ tag: 'Címke',
+ }
+
+ return (
+ ('auto')
- const [resolvedTheme, setResolvedTheme] = useState(() =>
- resolveThemeMode('auto'),
- )
+ const [resolvedTheme, setResolvedTheme] = useState('light')
useEffect(() => {
- setMode('auto')
- setResolvedTheme(applyThemeMode('auto'))
+ const stored = readStoredMode()
+ setMode(stored)
+ setResolvedTheme(applyThemeMode(stored))
}, [])
useEffect(() => {
@@ -102,29 +117,19 @@ export default function ThemeToggle() {
}, [mode])
function toggleMode() {
- let nextMode: ThemeMode
- if (mode === 'light') {
- nextMode = 'dark'
- } else {
- nextMode = 'light'
- }
+ // From auto mode we switch to the opposite of the currently visible theme,
+ // so that every click produces a noticeable change.
+ const nextMode: ThemeMode = resolvedTheme === 'dark' ? 'light' : 'dark'
setMode(nextMode)
setResolvedTheme(applyThemeMode(nextMode))
window.localStorage.setItem('theme', nextMode)
}
- let modeLabel = 'Light'
- if (mode === 'dark') {
- modeLabel = 'Dark'
- } else if (mode === 'auto') {
- modeLabel = 'Auto'
- }
-
const label =
- mode === 'auto'
- ? 'Theme mode: auto (system). Click to switch to light mode.'
- : `Theme mode: ${mode}. Click to switch mode.`
+ resolvedTheme === 'dark'
+ ? 'Sötét téma aktív. Kattints a világos témára váltáshoz.'
+ : 'Világos téma aktív. Kattints a sötét témára váltáshoz.'
return (
diff --git a/src/components/Thumbnail.tsx b/src/components/Thumbnail.tsx
new file mode 100644
index 0000000..09d53d6
--- /dev/null
+++ b/src/components/Thumbnail.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+/** Every thumbnail is 16:9; a missing image also reserves that space. */
+export const THUMBNAIL_FALLBACK_SRC = '/video-thumbnail.png'
+
+export default function Thumbnail({
+ src,
+ alt,
+ className = '',
+ imgClassName = '',
+ loading = 'lazy',
+}: {
+ src: string | null | undefined
+ alt: string
+ /** Extra classes applied to the 16:9 frame. */
+ className?: string
+ /** Extra classes applied to the `![]()
` itself. */
+ imgClassName?: string
+ loading?: 'lazy' | 'eager'
+}) {
+ const resolvedSrc = src ?? THUMBNAIL_FALLBACK_SRC
+ // We store the loaded URL rather than a plain boolean flag: this way the
+ // placeholder resets automatically when `src` changes (e.g. on re-render
+ // after filtering).
+ const [settledSrc, setSettledSrc] = useState(null)
+ const loaded = settledSrc === resolvedSrc
+
+ // The `load` event of an image arriving from cache can fire before hydration
+ // completes, so we also check the `complete` flag via the ref — otherwise
+ // the image would stay invisible.
+ const measureRef = useCallback(
+ (node: HTMLImageElement | null) => {
+ if (node !== null && node.complete) {
+ setSettledSrc(resolvedSrc)
+ }
+ },
+ [resolvedSrc],
+ )
+
+ return (
+ = {
+ anonymous: 'Vendég',
+ schonherz: 'Schönherz',
+ member: 'Tag',
+ leadership: 'Vezetőség',
+}
+
+/** Monogram in place of the profile picture: initials of at most two name parts. */
+function initials(name: string): string {
+ const letters = name
+ .trim()
+ .split(/\s+/)
+ .filter((part) => part !== '')
+ .slice(0, 2)
+ .map((part) => part.slice(0, 1).toLocaleUpperCase('hu-HU'))
+ .join('')
+ return letters === '' ? '?' : letters
+}
+
+function Avatar({
+ name,
+ avatarUrl,
+}: {
+ name: string
+ avatarUrl: string | null
+}) {
+ const [failed, setFailed] = useState(false)
+
+ if (avatarUrl === null || failed) {
+ return (
+
+ )
+ }
+ return (
+ 
setFailed(true)}
+ className="h-8 w-8 shrink-0 rounded-full object-cover"
+ />
+ )
+}
+
+export default function UserMenu({ viewer }: { viewer: ViewerStateDto }) {
+ const [open, setOpen] = useState(false)
+ const containerRef = useRef(null)
+ const location = useLocation()
+ const name = viewer.displayName ?? viewer.username ?? 'Profil'
+
+ // Close the menu on route change.
+ useEffect(() => {
+ setOpen(false)
+ }, [location.href])
+
+ useEffect(() => {
+ if (!open) {
+ return
+ }
+ function onPointerDown(event: MouseEvent) {
+ if (
+ containerRef.current !== null &&
+ event.target instanceof Node &&
+ containerRef.current.contains(event.target)
+ ) {
+ return
+ }
+ setOpen(false)
+ }
+ function onKeyDown(event: KeyboardEvent) {
+ if (event.key === 'Escape') {
+ setOpen(false)
+ }
+ }
+ document.addEventListener('mousedown', onPointerDown)
+ document.addEventListener('keydown', onKeyDown)
+ return () => {
+ document.removeEventListener('mousedown', onPointerDown)
+ document.removeEventListener('keydown', onKeyDown)
+ }
+ }, [open])
+
+ const itemClass =
+ 'block w-full px-3 py-2 text-left text-sm font-bold text-(--bss-text-secondary) hover:bg-(--nav-search-bg) hover:text-(--orange)'
+
+ return (
+ (null)
+ const videoRef = useRef(null)
+ const countedRef = useRef(false)
+ const previousVolumeRef = useRef(1)
+ const hudTimerRef = useRef | null>(null)
+ const playbackTimerRef = useRef | null>(null)
+ const qualityMenuRef = useRef(null)
+ const pendingSourceChangeRef = useRef<{
+ currentTime: number
+ shouldResume: boolean
+ } | null>(null)
+ const [errorKey, setErrorKey] = useState(0)
+ const [failed, setFailed] = useState(false)
+ const [isPlaying, setIsPlaying] = useState(false)
+ const [currentTime, setCurrentTime] = useState(0)
+ const [duration, setDuration] = useState(0)
+ const [volume, setVolume] = useState(1)
+ const [isFullscreen, setIsFullscreen] = useState(false)
+ const [isHudVisible, setIsHudVisible] = useState(true)
+ const [quality, setQuality] = useState<'hq' | 'lq'>(hqUrl ? 'hq' : 'lq')
+ const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false)
+
+ const qualityOptions = [
+ ...(hqUrl ? [{ value: 'hq' as const, label: 'HQ' }] : []),
+ ...(lqUrl ? [{ value: 'lq' as const, label: 'LQ' }] : []),
+ ]
+ const activeVideoUrl =
+ quality === 'hq'
+ ? (hqUrl ?? lqUrl ?? videoUrl)
+ : (lqUrl ?? hqUrl ?? videoUrl)
+ const VolumeIcon = volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2
+
+ useEffect(() => {
+ const video = videoRef.current
+ if (!video) return
+
+ try {
+ const storedValue = window.localStorage.getItem(AUDIO_PREFERENCE_KEY)
+ if (storedValue === null) return
+
+ const preference: unknown = JSON.parse(storedValue)
+ if (
+ typeof preference !== 'object' ||
+ preference === null ||
+ !('volume' in preference) ||
+ !('muted' in preference) ||
+ typeof preference.volume !== 'number' ||
+ !Number.isFinite(preference.volume) ||
+ preference.volume < 0 ||
+ preference.volume > 1 ||
+ typeof preference.muted !== 'boolean'
+ ) {
+ return
+ }
+
+ video.volume = preference.volume
+ video.muted = preference.muted
+ if (preference.volume > 0) {
+ previousVolumeRef.current = preference.volume
+ }
+ setVolume(preference.muted ? 0 : preference.volume)
+ } catch {
+ // Playback still works when storage is unavailable or contains bad data.
+ }
+ }, [errorKey])
+
+ useEffect(() => {
+ setFailed(false)
+ setIsPlaying(false)
+ setCurrentTime(0)
+ setDuration(0)
+ pendingSourceChangeRef.current = null
+ setQuality(hqUrl ? 'hq' : 'lq')
+ setIsQualityMenuOpen(false)
+ countedRef.current = false
+ }, [videoId, videoUrl, hqUrl, lqUrl])
+
+ useEffect(() => {
+ if (!isQualityMenuOpen) return
+
+ const closeOnOutsideClick = (event: MouseEvent) => {
+ if (qualityMenuRef.current?.contains(event.target as Node)) return
+ setIsQualityMenuOpen(false)
+ }
+ const closeOnEscape = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') setIsQualityMenuOpen(false)
+ }
+
+ document.addEventListener('pointerdown', closeOnOutsideClick)
+ document.addEventListener('keydown', closeOnEscape)
+
+ return () => {
+ document.removeEventListener('pointerdown', closeOnOutsideClick)
+ document.removeEventListener('keydown', closeOnEscape)
+ }
+ }, [isQualityMenuOpen])
+
+ useEffect(() => {
+ const video = videoRef.current
+ if (!video) return
+
+ const syncDuration = () => {
+ if (Number.isFinite(video.duration) && video.duration > 0) {
+ setDuration(video.duration)
+ }
+ const pending = pendingSourceChangeRef.current
+ if (
+ pending === null ||
+ !Number.isFinite(video.duration) ||
+ video.duration <= 0
+ ) {
+ return
+ }
+
+ video.currentTime = Math.min(pending.currentTime, video.duration)
+ setCurrentTime(video.currentTime)
+ pendingSourceChangeRef.current = null
+ if (pending.shouldResume) {
+ void video.play().catch(() => setFailed(true))
+ }
+ }
+
+ // Metadata can finish loading before hydration attaches React's media
+ // event handlers, especially when the MP4 is already cached.
+ syncDuration()
+ video.addEventListener('loadedmetadata', syncDuration)
+ video.addEventListener('durationchange', syncDuration)
+ video.addEventListener('canplay', syncDuration)
+ return () => {
+ video.removeEventListener('loadedmetadata', syncDuration)
+ video.removeEventListener('durationchange', syncDuration)
+ video.removeEventListener('canplay', syncDuration)
+ }
+ }, [errorKey, activeVideoUrl])
+
+ useEffect(() => {
+ if (startTime === undefined) return
+
+ const video = videoRef.current
+ pendingSourceChangeRef.current = {
+ currentTime: startTime,
+ shouldResume: false,
+ }
+ if (!video || !Number.isFinite(video.duration) || video.duration <= 0) {
+ return
+ }
+
+ video.currentTime = Math.min(startTime, video.duration)
+ setCurrentTime(video.currentTime)
+ pendingSourceChangeRef.current = null
+ }, [videoId, startTime])
+
+ useEffect(() => {
+ const handleFullscreenChange = () =>
+ setIsFullscreen(document.fullscreenElement === playerRef.current)
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
+ return () =>
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
+ }, [])
+
+ useEffect(() => {
+ const video = videoRef.current
+ if (!video) return
+
+ const handleMobileFullscreenStart = () => setIsFullscreen(true)
+ const handleMobileFullscreenEnd = () => setIsFullscreen(false)
+ video.addEventListener('webkitbeginfullscreen', handleMobileFullscreenStart)
+ video.addEventListener('webkitendfullscreen', handleMobileFullscreenEnd)
+ return () => {
+ video.removeEventListener(
+ 'webkitbeginfullscreen',
+ handleMobileFullscreenStart,
+ )
+ video.removeEventListener(
+ 'webkitendfullscreen',
+ handleMobileFullscreenEnd,
+ )
+ }
+ }, [errorKey, activeVideoUrl])
+
+ useEffect(() => {
+ revealHud()
+ }, [isFullscreen])
+
+ useEffect(
+ () => () => {
+ if (hudTimerRef.current !== null) clearTimeout(hudTimerRef.current)
+ if (playbackTimerRef.current !== null) {
+ clearTimeout(playbackTimerRef.current)
+ }
+ },
+ [],
+ )
+
+ function handlePlay() {
+ setIsPlaying(true)
+ setIsHudVisible(false)
+ if (hudTimerRef.current !== null) {
+ clearTimeout(hudTimerRef.current)
+ hudTimerRef.current = null
+ }
+ if (countedRef.current) return
+
+ countedRef.current = true
+ void fetch(`/api/videos/${videoId}/view`, { method: 'POST' }).catch(
+ () => {},
+ )
+ }
+
+ function handlePause() {
+ setIsPlaying(false)
+ revealHud()
+ }
+
+ function togglePlayback() {
+ const video = videoRef.current
+ if (!video) return
+ if (video.paused) {
+ void video.play().catch(() => setFailed(true))
+ } else {
+ video.pause()
+ }
+ }
+
+ function handleVideoClick() {
+ playerRef.current?.focus()
+ if (playbackTimerRef.current !== null) {
+ clearTimeout(playbackTimerRef.current)
+ }
+ playbackTimerRef.current = setTimeout(() => {
+ togglePlayback()
+ playbackTimerRef.current = null
+ }, 250)
+ }
+
+ function handleVideoDoubleClick() {
+ playerRef.current?.focus()
+ if (playbackTimerRef.current !== null) {
+ clearTimeout(playbackTimerRef.current)
+ playbackTimerRef.current = null
+ }
+ void toggleFullscreen()
+ }
+
+ function skip(seconds: number) {
+ const video = videoRef.current
+ if (!video || !Number.isFinite(video.duration)) return
+ video.currentTime = Math.min(
+ Math.max(video.currentTime + seconds, 0),
+ video.duration,
+ )
+ setCurrentTime(video.currentTime)
+ }
+
+ function changeVolumeBy(amount: number) {
+ const video = videoRef.current
+ if (!video) return
+ const nextVolume = Math.min(Math.max(video.volume + amount, 0), 1)
+ video.volume = nextVolume
+ video.muted = nextVolume === 0
+ syncVolume(video)
+ }
+
+ function handlePlayerKeyDown(event: React.KeyboardEvent) {
+ revealHud()
+
+ const target = event.target as HTMLElement
+ const key = event.key.toLowerCase()
+ if (target !== event.currentTarget) {
+ if (
+ target.closest('input, a, textarea, select, [contenteditable=true]')
+ ) {
+ return
+ }
+ if (target.closest('button') && (key === ' ' || key === 'enter')) {
+ return
+ }
+ }
+
+ const video = videoRef.current
+ if (!video) return
+
+ if (event.repeat && [' ', 'k', 'm', 'f'].includes(key)) {
+ event.preventDefault()
+ return
+ }
+
+ switch (key) {
+ case ' ':
+ case 'k':
+ event.preventDefault()
+ togglePlayback()
+ break
+ case 'j':
+ event.preventDefault()
+ skip(-10)
+ break
+ case 'l':
+ event.preventDefault()
+ skip(10)
+ break
+ case 'arrowleft':
+ event.preventDefault()
+ skip(-5)
+ break
+ case 'arrowright':
+ event.preventDefault()
+ skip(5)
+ break
+ case 'arrowup':
+ event.preventDefault()
+ changeVolumeBy(0.05)
+ break
+ case 'arrowdown':
+ event.preventDefault()
+ changeVolumeBy(-0.05)
+ break
+ case 'm':
+ event.preventDefault()
+ toggleMute()
+ break
+ case 'f':
+ event.preventDefault()
+ void toggleFullscreen()
+ break
+ case 'home':
+ event.preventDefault()
+ video.currentTime = 0
+ setCurrentTime(0)
+ break
+ case 'end':
+ event.preventDefault()
+ if (Number.isFinite(video.duration)) {
+ video.currentTime = video.duration
+ setCurrentTime(video.duration)
+ }
+ break
+ default:
+ if (/^[0-9]$/.test(key) && Number.isFinite(video.duration)) {
+ event.preventDefault()
+ const nextTime = video.duration * (Number(key) / 10)
+ video.currentTime = nextTime
+ setCurrentTime(nextTime)
+ }
+ }
+ }
+
+ function seek(event: React.ChangeEvent) {
+ const video = videoRef.current
+ if (!video) return
+ video.currentTime = Number(event.target.value)
+ setCurrentTime(video.currentTime)
+ }
+
+ function changeVolume(event: React.ChangeEvent) {
+ const video = videoRef.current
+ if (!video) return
+ const nextVolume = Number(event.target.value)
+ video.volume = nextVolume
+ video.muted = nextVolume === 0
+ syncVolume(video)
+ }
+
+ function toggleMute() {
+ const video = videoRef.current
+ if (!video) return
+
+ if (video.muted || volume === 0) {
+ const restoredVolume = previousVolumeRef.current || 1
+ video.muted = false
+ video.volume = restoredVolume
+ } else {
+ previousVolumeRef.current = volume
+ video.muted = true
+ }
+ syncVolume(video)
+ }
+
+ function syncVolume(video: HTMLVideoElement) {
+ const effectiveVolume = video.muted ? 0 : video.volume
+ setVolume(effectiveVolume)
+ if (!video.muted && video.volume > 0) {
+ previousVolumeRef.current = video.volume
+ }
+
+ try {
+ window.localStorage.setItem(
+ AUDIO_PREFERENCE_KEY,
+ JSON.stringify({ volume: video.volume, muted: video.muted }),
+ )
+ } catch {
+ // Storage may be disabled; the in-page volume control still works.
+ }
+ }
+
+ async function toggleFullscreen() {
+ const player = playerRef.current
+ const video: WebkitFullscreenVideo | null = videoRef.current
+ if (!player || !video) return
+
+ if (document.fullscreenElement !== null) {
+ try {
+ await document.exitFullscreen()
+ } catch {
+ // The browser owns fullscreen state; leave the player unchanged if
+ // exiting is rejected.
+ }
+ return
+ }
+
+ if (video.webkitDisplayingFullscreen) {
+ video.webkitExitFullscreen?.()
+ return
+ }
+
+ // iOS Safari does not support fullscreen on arbitrary containers. Its
+ // video-specific API must be called directly from the user gesture.
+ if (!document.fullscreenEnabled && video.webkitEnterFullscreen) {
+ video.webkitEnterFullscreen()
+ return
+ }
+
+ try {
+ if (typeof player.requestFullscreen === 'function') {
+ await player.requestFullscreen()
+ return
+ }
+ if (typeof video.requestFullscreen === 'function') {
+ await video.requestFullscreen()
+ return
+ }
+ } catch {
+ // Fall through to the WebKit mobile-video API when the standard API is
+ // present but unavailable for this element.
+ }
+
+ video.webkitEnterFullscreen?.()
+ }
+
+ function revealHud() {
+ setIsHudVisible(true)
+ if (hudTimerRef.current !== null) clearTimeout(hudTimerRef.current)
+
+ if (videoRef.current !== null && !videoRef.current.paused) {
+ hudTimerRef.current = setTimeout(() => {
+ setIsHudVisible(false)
+ hudTimerRef.current = null
+ }, 2500)
+ }
+ }
+
+ function retry() {
+ setFailed(false)
+ setErrorKey((value) => value + 1)
+ }
+
+ function changeQuality(nextQuality: 'hq' | 'lq') {
+ if (nextQuality === quality) return
+ const video = videoRef.current
+ if (video !== null) {
+ pendingSourceChangeRef.current = {
+ currentTime: video.currentTime,
+ shouldResume: !video.paused,
+ }
+ }
+ setFailed(false)
+ setQuality(nextQuality)
+ }
+
+ if (failed) {
+ return (
+ (null)
- const lastVolumeRef = useRef(1)
- const [isPlaying, setIsPlaying] = useState(false)
- const [currentTime, setCurrentTime] = useState(0)
- const [duration, setDuration] = useState(0)
- const [bufferedTime, setBufferedTime] = useState(0)
- const [volume, setVolume] = useState(1)
- const [isMuted, setIsMuted] = useState(false)
- const [isFullscreen, setIsFullscreen] = useState(false)
-
- useEffect(() => {
- const video = videoRef.current
- if (!video) return
-
- const handleTimeUpdate = () => setCurrentTime(video.currentTime)
- const handleLoadedMetadata = () => setDuration(video.duration)
- const handleProgress = () => {
- if (!video.duration || Number.isNaN(video.duration)) {
- setBufferedTime(0)
- return
- }
-
- const bufferedRanges = video.buffered
- if (!bufferedRanges.length) {
- setBufferedTime(0)
- return
- }
-
- for (let index = bufferedRanges.length - 1; index >= 0; index -= 1) {
- const start = bufferedRanges.start(index)
- const end = bufferedRanges.end(index)
-
- if (start <= video.currentTime && end >= video.currentTime) {
- setBufferedTime(end)
- return
- }
- }
-
- setBufferedTime(bufferedRanges.end(bufferedRanges.length - 1))
- }
- const handlePlay = () => setIsPlaying(true)
- const handlePause = () => setIsPlaying(false)
-
- video.addEventListener('timeupdate', handleTimeUpdate)
- video.addEventListener('loadedmetadata', handleLoadedMetadata)
- video.addEventListener('progress', handleProgress)
- video.addEventListener('play', handlePlay)
- video.addEventListener('pause', handlePause)
-
- handleProgress()
-
- return () => {
- video.removeEventListener('timeupdate', handleTimeUpdate)
- video.removeEventListener('loadedmetadata', handleLoadedMetadata)
- video.removeEventListener('progress', handleProgress)
- video.removeEventListener('play', handlePlay)
- video.removeEventListener('pause', handlePause)
- }
- }, [])
-
- const togglePlayPause = () => {
- if (videoRef.current) {
- isPlaying ? videoRef.current.pause() : videoRef.current.play()
- }
- }
-
- const handleProgressChange = (e: React.ChangeEvent) => {
- const time = Number.parseFloat(e.target.value)
- setCurrentTime(time)
- if (videoRef.current) {
- videoRef.current.currentTime = time
- }
- }
-
- const handleVolumeChange = (e: React.ChangeEvent) => {
- const vol = Number.parseFloat(e.target.value)
- setVolume(vol)
- if (videoRef.current) {
- videoRef.current.volume = vol
- videoRef.current.muted = vol === 0
- }
-
- if (vol > 0) {
- lastVolumeRef.current = vol
- setIsMuted(false)
- } else {
- setIsMuted(true)
- }
- }
-
- const toggleMute = () => {
- const video = videoRef.current
- if (!video) return
-
- if (isMuted || volume === 0) {
- const restoredVolume = lastVolumeRef.current || 1
- setVolume(restoredVolume)
- video.volume = restoredVolume
- video.muted = false
- setIsMuted(false)
- return
- }
-
- lastVolumeRef.current = volume || 1
- setVolume(0)
- video.volume = 0
- video.muted = true
- setIsMuted(true)
- }
-
- const toggleFullscreen = () => {
- if (videoRef.current?.parentElement) {
- if (!isFullscreen) {
- videoRef.current.parentElement.requestFullscreen()
- } else {
- document.exitFullscreen()
- }
- setIsFullscreen(!isFullscreen)
- }
- }
-
- const formatTime = (time: number) => {
- if (!time) return '0:00'
- const minutes = Math.floor(time / 60)
- const seconds = Math.floor(time % 60)
- return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
- }
-
- const playedPercent = duration ? (currentTime / duration) * 100 : 0
- const bufferedPercent = duration ? (bufferedTime / duration) * 100 : 0
- const bufferedTrackPercent = Math.max(0, bufferedPercent - playedPercent)
-
- return (
- {
+ key: string
+ header: string
+ render: (row: TRow) => ReactNode
+ /** The primary (bold) row in card view. */
+ primary?: boolean
+}
+
+export function ResponsiveTable({
+ columns,
+ rows,
+ emptyTitle,
+ emptyDescription,
+}: {
+ columns: Array>
+ rows: readonly TRow[]
+ emptyTitle: string
+ emptyDescription?: string
+}) {
+ if (rows.length === 0) {
+ return
+ onChange: (value: string) => void
+ placeholder?: string
+ searchPlaceholder?: string
+ /** When set, a separate row is added at the top of the list to choose the empty value. */
+ emptyOptionLabel?: string
+ hint?: ReactNode
+ disabled?: boolean
+ triggerClassName?: string
+ /** In filter bars we use a subtler label style. */
+ labelClassName?: string
+ /** The search bar appears above this many items. */
+ searchThreshold?: number
+}) {
+ const [open, setOpen] = useState(false)
+ const [query, setQuery] = useState('')
+ const [activeIndex, setActiveIndex] = useState(0)
+ const containerRef = useRef(null)
+ const panelRef = useRef(null)
+ const listboxId = useId()
+ const labelId = useId()
+ const showSearch = options.length > searchThreshold
+
+ const visible = useMemo(() => {
+ const filtered = options.filter((option) =>
+ matchesSearch(`${option.label} ${option.meta ?? ''}`, query),
+ )
+ return emptyOptionLabel !== undefined
+ ? [{ value: '', label: emptyOptionLabel }, ...filtered]
+ : filtered
+ }, [options, query, emptyOptionLabel])
+
+ const selectedLabel =
+ options.find((option) => option.value === value)?.label ?? null
+
+ const SelectedIcon: LucideIcon | null =
+ options.find((option) => option.value === value)?.icon ?? null
+
+ useEffect(() => {
+ if (!open) {
+ return
+ }
+ function onPointerDown(event: MouseEvent) {
+ if (
+ containerRef.current !== null &&
+ event.target instanceof Node &&
+ containerRef.current.contains(event.target)
+ ) {
+ return
+ }
+ setOpen(false)
+ }
+ document.addEventListener('mousedown', onPointerDown)
+ return () => document.removeEventListener('mousedown', onPointerDown)
+ }, [open])
+
+ // Without a search bar, the panel gets focus so the arrow keys work.
+ useEffect(() => {
+ if (open && !showSearch) {
+ panelRef.current?.focus()
+ }
+ }, [open, showSearch])
+
+ function select(nextValue: string) {
+ onChange(nextValue)
+ setOpen(false)
+ setQuery('')
+ }
+
+ function onKeyDown(event: React.KeyboardEvent) {
+ if (event.key === 'Escape') {
+ event.preventDefault()
+ setOpen(false)
+ return
+ }
+ if (event.key === 'Enter') {
+ // Works inside filter forms too: Enter selects from the list instead of submitting the form.
+ event.preventDefault()
+ const option = visible.at(activeIndex)
+ if (option !== undefined) {
+ select(option.value)
+ }
+ return
+ }
+ if (visible.length === 0) {
+ return
+ }
+ if (event.key === 'ArrowDown') {
+ event.preventDefault()
+ setActiveIndex((index) => (index + 1) % visible.length)
+ } else if (event.key === 'ArrowUp') {
+ event.preventDefault()
+ setActiveIndex((index) => (index <= 0 ? visible.length - 1 : index - 1))
+ }
+ }
+
+ return (
+
+ {partners.map((partner) => (
+
+ 
+
+ ))}
)
diff --git a/src/components/MemberCard.tsx b/src/components/MemberCard.tsx
index e31b91e..fc7bf3c 100644
--- a/src/components/MemberCard.tsx
+++ b/src/components/MemberCard.tsx
@@ -1,8 +1,4 @@
-
-
-export default function MemberCard({
- memberId = 'unknown',
-}: Readonly<{ memberId?: string }>) {
+export default function MemberCard() {
return (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 633b2b8..060418f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,106 +1,160 @@
-"use client"
+'use client'
import { useEffect, useState } from 'react'
-import ThemeToggle from "#/components/ThemeToggle.tsx";
-import { Link } from '@tanstack/react-router'
+import ThemeToggle from '#/components/ThemeToggle.tsx'
+import SearchBox from '#/components/SearchBox.tsx'
+import UserMenu from '#/components/UserMenu.tsx'
+import { Link, useLocation } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { fetchViewerState } from '#/server/pages/viewer-fn.ts'
+
+const NAV_LINKS = [
+ { to: '/videos', label: 'Videók' },
+ { to: '/events', label: 'Események' },
+ { to: '/members', label: 'Tagok' },
+ { to: '/courses', label: 'Tanfolyamok' },
+ { to: '/about', label: 'Mivel foglalkozunk?' },
+] as const
export default function Navbar() {
- const [pathname, setPathname] = useState(() =>
- typeof window !== 'undefined' ? window.location.pathname : '/'
- )
+ const [menuOpen, setMenuOpen] = useState(false)
+ const location = useLocation()
+ const viewerQuery = useQuery({
+ queryKey: ['viewer'],
+ queryFn: fetchViewerState,
+ staleTime: 60_000,
+ })
+ const viewer = viewerQuery.data
+ // Close the mobile menu on route change.
useEffect(() => {
- const handleLocationChange = () => setPathname(window.location.pathname)
-
- // catch back/forward
- window.addEventListener('popstate', handleLocationChange)
-
- // also patch pushState to detect client-side navigations that don't trigger popstate
- const _pushState = history.pushState
- ;(history as any).pushState = function (...args: any[]) {
- _pushState.call(this, args[0], args[1], args[2])
- handleLocationChange()
- }
-
- return () => {
- window.removeEventListener('popstate', handleLocationChange)
- // restore
- ;(history as any).pushState = _pushState
- }
- }, [])
+ setMenuOpen(false)
+ }, [location.href])
return (
+
+ )
+}
+
+export function EmptyState({
+ title,
+ description,
+}: {
+ title: string
+ description?: string
+}) {
+ return (
+ {label}
+
+
+ )
+}
+
+export function ErrorState({
+ label = 'Hiba történt az adatok betöltése közben. Próbáld újra később.',
+}: {
+ label?: string
+}) {
+ return (
+ {title}
+ {description !== undefined && ( +{description}
+ )} +
+
+ )
+}
+
+export function NotFoundContent() {
+ return (
+ Hoppá!
++ {label} +
+403
++ Hozzáférés megtagadva +
++ Ehhez az oldalhoz nincs jogosultságod. +
+ + Vissza a főoldalra + +
+ {label}
+
+ )
+}
diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
new file mode 100644
index 0000000..a1720ae
--- /dev/null
+++ b/src/components/SearchBox.tsx
@@ -0,0 +1,225 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+
+interface SearchResults {
+ videos: Array<{ slug: string; title: string }>
+ events: Array<{ slug: string; title: string }>
+ members: Array<{ username: string; fullName: string }>
+ tags: Array<{ name: string }>
+}
+
+const EMPTY_RESULTS: SearchResults = {
+ videos: [],
+ events: [],
+ members: [],
+ tags: [],
+}
+
+export default function SearchBox() {
+ const navigate = useNavigate()
+ const [query, setQuery] = useState('')
+ const [open, setOpen] = useState(false)
+ const [results, setResults] = useState
+ {Array.from({ length: count }, (_, index) => (
+
+
+
+ )
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 5cdc9b3..01522f7 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -4,6 +4,20 @@ type ThemeMode = 'light' | 'dark' | 'auto'
type ResolvedTheme = 'light' | 'dark'
+function isThemeMode(value: unknown): value is ThemeMode {
+ return value === 'light' || value === 'dark' || value === 'auto'
+}
+
+/** The stored setting already applied by the inline script in `__root.tsx`. */
+function readStoredMode(): ThemeMode {
+ try {
+ const stored = window.localStorage.getItem('theme')
+ return isThemeMode(stored) ? stored : 'auto'
+ } catch {
+ return 'auto'
+ }
+}
+
function resolveThemeMode(mode: ThemeMode): ResolvedTheme {
if (typeof window === 'undefined') {
return 'light'
@@ -77,14 +91,15 @@ function MoonIcon() {
}
export default function ThemeToggle() {
+ // SSR always renders light; the real mode is picked up after hydration so
+ // that server and client output match.
const [mode, setMode] = useState
+ setQuery(event.target.value)}
+ onFocus={() => query.trim().length >= 2 && setOpen(true)}
+ onKeyDown={onKeyDown}
+ placeholder="Keresés..."
+ aria-label="Keresés"
+ aria-expanded={open}
+ role="combobox"
+ aria-controls="global-search-results"
+ className="w-40 border-0 text-(--nav-search-placeholder) outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 lg:w-56"
+ />
+
+
+
+ {open && (
+
+ {hits.length === 0 ? (
+
+ )}
+ + Nincs találat. +
+ ) : ( +-
+ {hits.map((hit, index) => (
+
- + + + ))} +
+ 
setSettledSrc(resolvedSrc)}
+ // On a broken URL, don't leave the skeleton flashing forever.
+ onError={() => setSettledSrc(resolvedSrc)}
+ className={`absolute inset-0 block h-full w-full object-cover transition-opacity duration-300 ${
+ loaded ? 'opacity-100' : 'opacity-0'
+ } ${imgClassName}`}
+ />
+
+ )
+}
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
new file mode 100644
index 0000000..3d05a20
--- /dev/null
+++ b/src/components/UserMenu.tsx
@@ -0,0 +1,164 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import type { ViewerStateDto } from '#/server/pages/viewer-fn.ts'
+
+const LEVEL_LABELS: Record
+
+
+ {open && (
+
+ )
+}
diff --git a/src/components/VideoDetailPlayer.tsx b/src/components/VideoDetailPlayer.tsx
new file mode 100644
index 0000000..cb60227
--- /dev/null
+++ b/src/components/VideoDetailPlayer.tsx
@@ -0,0 +1,727 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Volume1, Volume2, VolumeX } from 'lucide-react'
+
+type WebkitFullscreenVideo = HTMLVideoElement & {
+ webkitDisplayingFullscreen?: boolean
+ webkitEnterFullscreen?: () => void
+ webkitExitFullscreen?: () => void
+}
+
+const AUDIO_PREFERENCE_KEY = 'video-player-audio-v1'
+
+function formatTime(value: number) {
+ if (!Number.isFinite(value) || value < 0) return '0:00'
+
+ const hours = Math.floor(value / 3600)
+ const minutes = Math.floor((value % 3600) / 60)
+ const seconds = Math.floor(value % 60)
+ return hours > 0
+ ? `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+ : `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+/** Branded MP4 player. A view is counted on the first successful play event. */
+function PlayerIcon({
+ name,
+ className,
+}: Readonly<{ name: string; className: string }>) {
+ return (
+
+ )
+}
+
+export default function VideoDetailPlayer({
+ videoId,
+ videoUrl,
+ hqUrl,
+ lqUrl,
+ posterUrl,
+ title,
+ startTime,
+}: Readonly<{
+ videoId: string
+ videoUrl: string
+ hqUrl?: string | null
+ lqUrl?: string | null
+ posterUrl?: string | null
+ title: string
+ startTime?: number
+}>) {
+ const playerRef = useRef
+
+ )}
+
+
+
+ {viewer.canAccessAdmin && (
+ setOpen(false)}
+ className={itemClass}
+ >
+ Adminfelület
+
+ )}
+
+
+
+
+ {name}
++ {viewer.username !== null && `${viewer.username} · `} + {LEVEL_LABELS[viewer.level]} +
+
+
+ )
+ }
+
+ const playedPercent = duration > 0 ? (currentTime / duration) * 100 : 0
+
+ return (
+ + A videó lejátszása most nem sikerült. Ellenőrizd a kapcsolatot, majd + próbáld újra. +
+ +
+
+ )
+}
diff --git a/src/components/Videoplayer.tsx b/src/components/Videoplayer.tsx
deleted file mode 100644
index bbceabb..0000000
--- a/src/components/Videoplayer.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-'use client'
-
-import { useRef, useState, useEffect } from 'react'
-
-export default function Videoplayer({
- videoId = '',
- videoUrl = '/test_video.mp4',
-}: Readonly<{
- videoId?: string
- videoUrl?: string
-}>) {
- const videoRef = useRef
-
-
- {/* Controls Container */}
-
- )
-}
diff --git a/src/components/admin/AdminSidebar.tsx b/src/components/admin/AdminSidebar.tsx
new file mode 100644
index 0000000..90544a6
--- /dev/null
+++ b/src/components/admin/AdminSidebar.tsx
@@ -0,0 +1,54 @@
+import { Link, useMatchRoute } from '@tanstack/react-router'
+
+export interface SidebarItem {
+ to: string
+ label: string
+ leadershipOnly?: boolean
+}
+
+export const ADMIN_SIDEBAR_ITEMS: SidebarItem[] = [
+ { to: '/admin/videos', label: 'Videók' },
+ { to: '/admin/events', label: 'Események' },
+ { to: '/admin/homepage', label: 'Live és kiemelés', leadershipOnly: true },
+ { to: '/admin/catalog/tags', label: 'Címkekatalógus', leadershipOnly: true },
+ {
+ to: '/admin/catalog/staff-roles',
+ label: 'Stábszerepek',
+ leadershipOnly: true,
+ },
+ { to: '/admin/members', label: 'Tagok', leadershipOnly: true },
+ { to: '/admin/trash', label: 'Lomtár' },
+ { to: '/admin/audit', label: 'Auditnapló', leadershipOnly: true },
+]
+
+export function AdminSidebar({ level }: { level: string }) {
+ const matchRoute = useMatchRoute()
+ const items = ADMIN_SIDEBAR_ITEMS.filter(
+ (item) => !item.leadershipOnly || level === 'leadership',
+ )
+
+ return (
+
+ )
+}
diff --git a/src/components/admin/Alerts.tsx b/src/components/admin/Alerts.tsx
new file mode 100644
index 0000000..dab2612
--- /dev/null
+++ b/src/components/admin/Alerts.tsx
@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react'
+
+export function LoginRequiredBanner({ loginUrl }: { loginUrl: string }) {
+ return (
+
- {/* Progress Bar */}
-
-
-
-
- {/* Controls Bar */}
-
-
-
-
-
-
-
- {/* Left Section */}
-
-
- {/* Play/Pause */}
-
-
- {/* Volume */}
-
-
- {/* Right Section */}
-
-
-
-
-
- {/* Time Display */}
-
- {formatTime(currentTime)} / {formatTime(duration)}
-
-
- {/* Settings */}
-
-
- {/* Fullscreen */}
-
-
-
+
+ )
+}
+
+export function ConflictBanner({
+ message,
+ onReload,
+}: {
+ message: string
+ onReload: () => void
+}) {
+ return (
+ A bejelentkezésed lejárt.
++ A kitöltött adatok nem vesznek el ezen az oldalon.{' '} + + Jelentkezz be újra + {' '} + egy új fülön, majd próbáld meg itt újra menteni. +
+
+
+ )
+}
+
+export function ValidationProblems({ problems }: { problems: string[] }) {
+ return (
+ Ütközés: más módosította közben a rekordot.
+{message}
+ +-
+ {problems.map((problem, index) => (
+
- {problem} + ))} +
+ {children} +
+ ) +} + +/** + * Non-blocking warning (e.g. disallowed media host): the draft can still be + * saved with it, but it cannot be published. + */ +export function WarningList({ warnings }: { warnings: string[] }) { + if (warnings.length === 0) { + return null + } + return ( +
+
+ )
+}
diff --git a/src/components/admin/ResponsiveTable.tsx b/src/components/admin/ResponsiveTable.tsx
new file mode 100644
index 0000000..f2f8663
--- /dev/null
+++ b/src/components/admin/ResponsiveTable.tsx
@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react'
+import { EmptyState } from '#/components/PageStates.tsx'
+
+export interface AdminColumnFigyelem
+-
+ {warnings.map((warning, index) => (
+
- {warning} + ))} +
+
+
+
+
+ {/* Mobile card view */}
+ | + {column.header} + | + ))} +
|---|
| + {column.render(row)} + | + ))} +
+ {rows.map((row, index) => (
+
+
+ )
+}
diff --git a/src/components/admin/SearchSelect.tsx b/src/components/admin/SearchSelect.tsx
new file mode 100644
index 0000000..aec8845
--- /dev/null
+++ b/src/components/admin/SearchSelect.tsx
@@ -0,0 +1,251 @@
+'use client'
+
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { matchesSearch } from '#/lib/text-search.ts'
+import type { LucideIcon } from 'lucide-react'
+
+export interface SearchSelectOption {
+ value: string
+ label: string
+ /** Secondary info shown at the end of the row (e.g. event date). */
+ meta?: string
+ icon?: LucideIcon
+}
+
+/** Subtler label style for filter bars. */
+export const FILTER_LABEL_CLASS = 'text-xs text-(--bss-text-secondary)'
+
+/** The search bar in the dropdown appears above this many items. */
+export const SEARCH_SELECT_THRESHOLD = 8
+
+export function AdminSearchSelect({
+ label,
+ value,
+ options,
+ onChange,
+ placeholder = 'Válassz…',
+ searchPlaceholder = 'Keresés…',
+ emptyOptionLabel,
+ hint,
+ disabled = false,
+ triggerClassName = '',
+ labelClassName = 'font-bold text-(--bss-text)',
+ searchThreshold = SEARCH_SELECT_THRESHOLD,
+}: {
+ label?: string
+ /** Selected value; empty text = no selection. */
+ value: string
+ options: ReadonlyArray
+ {columns.map((column) => (
+
+ ))}
+
+
+ {column.header}:
+
+
+ {column.render(row)}
+
+
+ ))}
+
+ {label !== undefined && (
+
+ {label}
+
+ )}
+
+ )
+}
diff --git a/src/components/admin/VideoVisibility.tsx b/src/components/admin/VideoVisibility.tsx
new file mode 100644
index 0000000..bcf2f3e
--- /dev/null
+++ b/src/components/admin/VideoVisibility.tsx
@@ -0,0 +1,13 @@
+import { visibilityIcon, visibilityLabel } from '#/lib/admin-labels.ts'
+
+export function VideoVisibility({ visibility }: { visibility: string }) {
+ const label = visibilityLabel(visibility)
+ const Icon = visibilityIcon(visibility)
+
+ return (
+
+
+ {label}
+
+ )
+}
diff --git a/src/components/admin/form.tsx b/src/components/admin/form.tsx
new file mode 100644
index 0000000..b642554
--- /dev/null
+++ b/src/components/admin/form.tsx
@@ -0,0 +1,132 @@
+import type { ReactNode } from 'react'
+
+export function AdminTextField({
+ label,
+ value,
+ onChange,
+ type = 'text',
+ required = false,
+ maxLength,
+ hint,
+}: {
+ label: string
+ value: string
+ onChange: (value: string) => void
+ type?: string
+ required?: boolean
+
+ maxLength?: number
+ hint?: ReactNode
+}) {
+ return (
+
+ )
+}
+
+export function AdminTextArea({
+ label,
+ value,
+ onChange,
+ rows = 4,
+ maxLength,
+ hint,
+}: {
+ label: string
+ value: string
+ onChange: (value: string) => void
+ rows?: number
+ maxLength?: number
+ hint?: ReactNode
+}) {
+ return (
+
+
+
+ {open && (
+
+ {hint !== undefined && (
+ {hint}
+ )}
+
+ {showSearch && (
+ {
+ setQuery(event.target.value)
+ setActiveIndex(0)
+ }}
+ placeholder={searchPlaceholder}
+ aria-label={searchPlaceholder}
+ className="h-10 w-full border-b border-(--nav-border-b) bg-(--nav-search-bg) px-2 outline-none focus:border-(--orange)"
+ />
+ )}
+ {visible.length === 0 ? (
+
+ )}
+ + Nincs találat. +
+ ) : ( +-
+ {visible.map((option, index) => (
+
- + + + ))} +