Function SideBar

src/Components/ProgramPage/SideBar/SideBar.jsx:21–63

({loaderData})

}, {});

export default function SideBar({loaderData}) {
    const univProgramList = loaderData.programs;
    return (
        <MetadataContext.Provider value={loaderData.metadata}>
            <CollapseSideBar
                sx={{
                    '& .MuiDrawer-paper': {
                        bgcolor: (theme) => theme.palette.surface,
                        width: '250px',
                        height: 'calc(100vh - 120px)',
                        p: '20px',
                        mt: '10px',
                        gap: '10px',
                    }
                }}
            >
                <SearchBar query={getQuery(loaderData)} pageName='program'/>
                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: '2px'}}>
                    <Typography variant='caption' sx={{color: 'text.secondary', fontWeight: 600, letterSpacing: '0.04em'}}>
                        学校列表
                    </Typography>
                    <Box sx={{display: 'flex', gap: '2px'}}>
                        <Form action='/programs/new'>
                            <Tooltip title='添加新项目' arrow>
                                <IconButton type='submit' size='small' sx={{color: 'text.secondary'}}>
                                    <Add fontSize='small'/>
                                </IconButton>
                            </Tooltip>
                        </Form>
                        <Form method='post'>
                            <Tooltip title='刷新项目列表' arrow>
                                <IconButton type='submit' size='small' sx={{color: 'text.secondary'}}>
                                    <Refresh fontSize='small'/>
                                </IconButton>
                            </Tooltip>
                        </Form>
                    </Box>
                </Box>
                <UnivProgramList univProgramList={univProgramList}/>
            </CollapseSideBar>
        </MetadataContext.Provider>
    );
}

export function UnivProgramList({univProgramList, ButtonComponent = ProgramButton}) {
    const [selectProgram, setSelectProgram] = React.useState(null);