system-copyright-react/src/components/list/ListProj.tsx

import './list-proj.css'
import CardProj from "../card/CardProj.tsx";
import {useRef, MutableRefObject} from "react";
import {Input, Pagination} from 'antd';
import type {SearchProps} from 'antd/es/input/Search';

const {Search} = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
    console.log(info?.source, value)
};

export default function ListProj() {

    const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);

    const domHeight = window.innerHeight - 301;

    return (
        <div className="list-proj" ref={listProjRef}>
            <div className="top">
                <Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
            </div>
            <div className="body">
                <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
                    <CardProj/>
                    <CardProj/>
                    <CardProj/>
                    <CardProj/>
                    <CardProj/>
                    <CardProj/>
                </div>
                <div className="page">
                    <Pagination defaultCurrent={1} total={50}/>
                </div>
            </div>
        </div>
    )
}