91 lines
4.2 KiB
TypeScript
91 lines
4.2 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { LinkType } from "../_lib/data/linkType";
|
|
import { Link as _Link } from "../_lib/data/link";
|
|
import { useEffect, useMemo } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faClock, faFire, faTimeline, faTimesCircle, faTimesRectangle, faVolumeTimes } from "@fortawesome/free-solid-svg-icons";
|
|
import { useAtom } from "jotai";
|
|
import { linkTypeAtom } from "../_lib/atom";
|
|
import Image from "next/image";
|
|
|
|
const LinkBlock = ({ val }: { val: _Link }) => {
|
|
return <Link className="flex gap-x-2 bg-white rounded-lg py-4 pl-2 cursor-pointer duration-150 hover:-translate-y-1 shadow-sm"
|
|
href={val.articleId ? `/article/${val.articleId}` : val.link || ''} target="_blank">
|
|
<img src={val.logoLink} className="w-[40px] h-[40px]"></img>
|
|
<div className="flex-1 w-0 flex flex-col justify-between">
|
|
<span className=" font-bold text-ellipsis overflow-hidden whitespace-nowrap">{val.name}</span>
|
|
<span className=" text-ellipsis overflow-hidden whitespace-nowrap text-[#666] text-xs" title={val.description}>{val.description}</span>
|
|
</div>
|
|
</Link>
|
|
}
|
|
export default function LinkListBox({ linkTypeList, linkList, showHot, showRecent }: { linkTypeList: LinkType[]; linkList: _Link[]; showHot: boolean; showRecent: boolean }) {
|
|
const hotList = useMemo(() => linkList.filter((val, index) => val.isHot && index < 12), [])
|
|
const recentList = useMemo(() => linkList.map(val => val).sort((a, b) => b.addTime - a.addTime).filter((_, idx) => idx < 12), [])
|
|
const [currentId] = useAtom(linkTypeAtom)
|
|
useEffect(() => {
|
|
console.log(currentId);
|
|
|
|
if (currentId) {
|
|
// 根据 targetId 查找对应的元素
|
|
const element = document.getElementById(currentId);
|
|
if (element) {
|
|
// 滚动到找到的元素位置
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
}, [currentId])
|
|
return <div className="flex w-full flex-col gap-y-4">
|
|
{
|
|
showHot && <div className="flex flex-col gap-y-2" >
|
|
<div className="flex items-center text-[#555555] gap-x-2 text-xl">
|
|
<FontAwesomeIcon icon={faFire} className="text-red-500"></FontAwesomeIcon>
|
|
<span className="text-white bg-red-500/90 rounded-2xl px-3 text-[14px] font-bold">热门网站</span>
|
|
</div>
|
|
<div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
|
|
{
|
|
hotList.map(val => (
|
|
<LinkBlock val={val} key={val._id} />
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
{
|
|
showRecent && <div className="flex flex-col gap-y-2" >
|
|
<div className="flex items-center text-[#555555] gap-x-2 text-xl">
|
|
<FontAwesomeIcon icon={faClock} className="text-blue-500"></FontAwesomeIcon>
|
|
<span className="text-white bg-blue-500/90 rounded-2xl px-3 text-[14px] font-bold">最新收录</span>
|
|
|
|
</div>
|
|
<div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
|
|
{
|
|
recentList.map(val => (
|
|
<LinkBlock val={val} key={val._id} />
|
|
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
{
|
|
linkTypeList.map(item => (
|
|
<div className="flex flex-col gap-y-2" key={item._id} id={item._id}>
|
|
<div className="flex items-center text-[#555555] gap-x-2 text-xl">
|
|
<img src={item.icon as string} className="w-[30px] h-[30px] object-cover"></img>
|
|
|
|
<span>{item.label}</span>
|
|
</div>
|
|
<div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
|
|
{
|
|
linkList.filter(val => val.type === item._id).map(val => (
|
|
<LinkBlock val={val} key={val._id} />
|
|
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
} |