ai-bot/app/_ui/LinkListBox.tsx

"use client";
import Link from "next/link";
import { Link as _Link } from "../api/link/route";
import { LinkType } from "../api/linkType/route";

export default function LinkListBox({ linkTypeList, linkList }: { linkTypeList: LinkType[]; linkList: _Link[] }) {
    return <div className="flex w-full flex-col gap-y-4">
        {
            linkTypeList.map(item => (
                <div className="flex flex-col gap-y-2" key={item._id}>
                    <div className="flex items-center text-[#555555]  gap-x-1 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 => (
                                <Link key={val._id} 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.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>
                            ))
                        }
                    </div>
                </div>
            ))
        }
    </div>
}