'use client'; import React, { useEffect, useRef, useState } from 'react'; const downloadLinks = { ios: 'https://testflight.apple.com/join/mBAvwWH1', jar: 'https://www.mediafire.com/file/4twjiwuxm32sjq2/kpahnokia_e63_fix.jar/file', apk: 'https://www.mediafire.com/file/qc99oyw3968d9n4/KPAH_275_grinding-signed.apk/file', pc: 'https://www.mediafire.com/file/7yi14du9zqoj2sq/PC.zip/file' }; type TabKey = 'new' | 'feature' | 'guide'; type HomePost = { id: number; category: TabKey; title: string; content: string; }; type HomePostMap = Record; const EMPTY_HOME_POSTS: HomePostMap = { new: [], feature: [], guide: [] }; const DESKTOP_DESIGN_WIDTH = 2000; const DESKTOP_DESIGN_HEIGHT = 2692; const MOBILE_DESIGN_WIDTH = 960; const MOBILE_DESIGN_HEIGHT = 3380; export default function HomePage() { const [activeTab, setActiveTab] = useState('new'); const [wrapperHeight, setWrapperHeight] = useState(DESKTOP_DESIGN_HEIGHT); const [homePosts, setHomePosts] = useState(EMPTY_HOME_POSTS); const wrapperRef = useRef(null); useEffect(() => { const updateScale = () => { if (!wrapperRef.current) return; const vw = window.innerWidth; const isMobile = vw <= MOBILE_DESIGN_WIDTH; const baseWidth = isMobile ? MOBILE_DESIGN_WIDTH : DESKTOP_DESIGN_WIDTH; const baseHeight = isMobile ? MOBILE_DESIGN_HEIGHT : DESKTOP_DESIGN_HEIGHT; const scale = Math.min(vw / baseWidth, 1); wrapperRef.current.style.transform = `scale(${scale})`; setWrapperHeight(baseHeight * scale); }; updateScale(); window.addEventListener('resize', updateScale); return () => window.removeEventListener('resize', updateScale); }, []); useEffect(() => { let cancelled = false; fetch('/api/home-posts', { cache: 'no-store' }) .then(async (response) => { if (!response.ok) { throw new Error('Khong the tai bai viet'); } return response.json() as Promise; }) .then((data) => { if (!cancelled) { setHomePosts({ new: Array.isArray(data.new) ? data.new : [], feature: Array.isArray(data.feature) ? data.feature : [], guide: Array.isArray(data.guide) ? data.guide : [] }); } }) .catch(() => { if (!cancelled) { setHomePosts(EMPTY_HOME_POSTS); } }); return () => { cancelled = true; }; }, []); const getActivePosts = () => homePosts[activeTab] ?? []; return (