fenghuo/apps/web/components/content/navbar/page.tsx

import { log } from 'console';
import React, { useState, useRef, useEffect } from 'react';
import './scroll.css';

const Navbar: React.FC = () => {
	const [activeIndex, setActiveIndex] = useState(1); // 当前选中的导航项索引
	const [parallelogramStyle, setParallelogramStyle] = useState({ left: 0, width: 0 });
	const navRef = useRef<HTMLElement>(null);
	const list = ['首页', '烽火动态', '烽火铸魂', '练兵备战', '兵情热线', '综合服务'];

	// 文章数据
	const articles = [
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: true,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: true,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: true,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
		{
			date: { month: '11', day: '2025-02' },
			title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
			isHighlighted: false,
		},
	];

	const handleNavClick = (index: number) => {
		setActiveIndex(index + 1); // 更新当前选中的索引
	};

	// 计算平行四边形的位置和宽度
	useEffect(() => {
		if (navRef.current) {
			const navItems = navRef.current.children;
			if (navItems[activeIndex]) {
				const activeItem = navItems[activeIndex] as HTMLElement;
				const navRect = navRef.current.getBoundingClientRect();
				const itemRect = activeItem.getBoundingClientRect();

				setParallelogramStyle({
					left: itemRect.left - navRect.left,
					width: itemRect.width,
				});
			}
		}
	}, [activeIndex]);

	return (
		<div className=" w-[1514px] h-[956px] relative " style={{ backgroundColor: '#1f79bf' }}>
			{/* 顶部导航栏区域 */}
			<div className="h-[80px] bg-white flex items-center px-6 relative overflow-hidden border-t-16 border-b-16 border-[#1f79bf]">
				{/* 左侧搜索框区域 */}
				<div className="flex items-center mr-3 ml-5">
					<input
						type="text"
						placeholder="请输入关键字"
						className="w-[200px] h-[40px] px-4 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
					/>
					<button className="w-[55px] h-[40px]">
						<img src="/search.png" alt="搜索" className="w-full h-full" />
					</button>
				</div>

				{/* 右侧导航菜单 */}
				<nav ref={navRef} className="flex items-center relative ">
					{/* 平行四边形背景 */}
					<div
						className="absolute top-0 h-full bg-gradient-to-b from-[#053E69] to-[#257BB6] z-0"
						style={{
							left: `${parallelogramStyle.left}px`,
							width: `${parallelogramStyle.width}px`,
							clipPath: 'polygon(0% 0%, 85% 0%, 100% 100%, 15% 100%)',
							transition: 'left 0.3s ease, width 0.3s ease',
						}}
					/>

					{list.map((item, index) => (
						<a
							key={index}
							href="#"
							className={`mr-15 ml-1 px-4 py-2 hover:font-bold transition-colors text-2xl relative z-10 ${
								activeIndex === index + 1 ? 'font-bold text-white' : 'text-black'
							}`}
							onClick={(e) => {
								e.preventDefault();
								handleNavClick(index);
							}}
						>
							{item}
						</a>
					))}
				</nav>
			</div>

			{/* 主要内容区域 */}
			<div className="flex h-[870px] bg-cover bg-center " style={{ backgroundImage: 'url(/lanmu.png)' }}>
				{/* 左侧内容 */}
				<div className="flex-1 p-8 text-white">
					<p></p>
				</div>

				{/* 右侧烽火要闻容器 */}
				<div className="w-[460px] h-[870px] bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1">
					{/* 标题栏 */}
					<div className="flex justify-between items-center mb-6  border-b-3 border-white" >
						<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
						<button className="">
							<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
								查看更多
								<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
							</a>
						</button>
					</div>

					{/* 文章列表 */}
					<div className="space-y-2  max-h-[780px] overflow-hidden hover:overflow-auto scroll-container">
						{articles.map((article, index) => (
							<div key={index} className="flex items-center space-x-3 pb-4">
								{/* 左侧竖线和日期 */}
								<div className="flex items-center space-x-3">
									<div className="w-[0.7px] h-13 bg-white ml-3"></div>
									<div className="text-center">
										<div className="text-white text-3xl font-bold">{article.date.month}</div>
										<div className="text-gray-300 text-sm">{article.date.day}</div>
									</div>
								</div>
								{/* 右侧文章内容 */}
								<div className="flex-1">
									<p className="text-[13px]  text-white ">{article.title}<a href="#" className="text-red-600 text-sm hover:font-bold">【MORE】</a></p>
									
								</div>
							</div>
						))}
						
					</div>
				</div>
			</div>
			{/* <div className="flex justify-center space-x-2 absolute bottom-4 left-4">
        <div className="w-3 h-3 bg-blue-500 rounded-full cursor-pointer"></div>
        <div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
        <div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
        <div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
        <div className="w-3 h-3 bg-white rounded-full cursor-pointer"></div>
    </div> */}
		</div>
	);
};

export default Navbar;