src/components/postsPanel/postsPanel.tsx

import { useApi } from '@/hooks/request';
import React, { useCallback } from  'react';
import request from '@/utils/request'
import style from './postsPanel.module.css'


interface panelProps{
    name:string,
    url:string,
    limit:number
}

const PostsPanel:React.FC<panelProps> = (props) => {
    const fenchData = useCallback(() => request.get(props.url), [props.url])
    const {data} = useApi(fenchData, true);



    return (
        <div className={style.panel}>
            <div className={style.header}>
                <span className={style.title}>{props.name}</span>
                <span className={style.more}>更多</span>
            </div>
            <div className={style.content}>
                {data && data.length > 0 ?
                data?.map((item: { title: string; date: string }, index: number) => (
                    <div key={index} className={style.item}>
                        <span className={style.text}>{item.title}</span>
                        <span>{item.date}</span>
                    </div>
                ))  :(
                    <div>未查询到相关记录</div>
                )}
            </div>
        </div>
    )
}

export default PostsPanel;