Styled Card - Copy this React, Mui Component to your project

Import useBreakPoints from '@/hooks/useBreakPoints' import Button from '@components/common/button/Button' import SeeMore from '@components/ui/seeMore/SeeMore' import PersonAddIcon from '@mui/icons material/PersonAdd' import { Box, IconButton, Skeleton } from '@mui/material' import { useMemo, useState } from 'react' import { useTranslation } from 'react i18next' import Card from '../../../../components/ui/card/Card' import CompanyMemberAvatar from './CompanyMemberAvatar' import EditCompanyMember from './editCompanyMembers' import { useSnackbar } from 'notistack' import './companyMembers.css' export default function CompanyMembers({ company_members: companyMembers, loading: profileLoading, currentProfile, }: any) { const { t } = useTranslation() const [pageIndex, setPageIndex] = useState(1) const { isHeaderWidth } = useBreakPoints() const [openModal, setOpenModal] = useState(false) const [selectedMember, setSelectedMember] = useState(null) const [inviteMember, setInviteMember] = useState(false) const { enqueueSnackbar } = useSnackbar() const fetchMembers = useMemo(() => { if (profileLoading) { return new Array(2).fill({ loading: true, }) } return companyMembers }, [companyMembers, profileLoading]) const handleEditMember = (member: any) => { setSelectedMember(member) setOpenModal(true) setInviteMember(false) } return ( <Box> <Card className="see more container container width"> <Box className="card heading "> {t('company members')} {currentProfile && ( <IconButton className="personAddIcon button base" onClick={() => { setOpenModal(true) setInviteMember(true) }} > <PersonAddIcon className="edit icon" /> </IconButton> )} </Box> {fetchMembers?.length > 0 && ( <> <Box> {fetchMembers?.map((member: any, index: number) => ( <Box key={index} className="member list container"> {openModal && ( <EditCompanyMember member={selectedMember} openModal={openModal} setOpenModal={setOpenModal} inviteMember={inviteMember} /> )} <Box className="member box"> <Box sx={{ display: 'flex', alignItems: 'center' }}> <Box className="member owner avatar"> {profileLoading ? ( <Skeleton variant="circular" width="48px" height="48px" /> ) : ( <CompanyMemberAvatar avatar_file_name={ member.avatar_file_name ? member.avatar_file_name : '' } /> )} </Box> <Box sx={{ width: '100%' }}> {profileLoading ? ( <Skeleton variant="text" width={isHeaderWidth ? '100px' : '200px'} height="24px" /> ) : ( <Box className="member name">{member.name}</Box> )} {profileLoading ? ( <Skeleton variant="text" width={isHeaderWidth ? '100px' : '200px'} height="24px" sx={{ marginTop: '2px !important' }} /> ) : ( <> <Box className="member position name"> {member.position_name} {currentProfile && <> <Box sx={{ marginX: '4px' }}>•</Box> <Box>{t(`visibility ranges.${member.visibility_range}`)}</Box> </> } </Box> </> )} </Box> </Box> <Box> {profileLoading ? ( <Skeleton variant="rounded" width={80} height={30} sx={{ borderRadius: '20px' }} /> ) : ( <> {currentProfile ? ( <Button variant="outlined" color="inherit" sx={{ borderColor: 'var( border color gray)', color: 'var( color primary)', fontWeight: 400, textTransform: 'capitalize', }} onClick={() => handleEditMember(member)} > {t('edit member')} </Button> ) : ( <Button variant="outlined" color="inherit" sx={{ borderColor: 'var( border color gray)', color: 'var( color primary)', fontWeight: 400, textTransform: 'capitalize', }} onClick={() => { enqueueSnackbar(t('invite to work')) }} > {t('invite to work')} </Button> )} </> )} </Box> </Box> </Box> ))} </Box> </> )} </Card> <SeeMore loading={profileLoading} currentLength={fetchMembers?.length} totalSize={fetchMembers?.total_size} limit={5} onClick={() => { setPageIndex(pageIndex + 1) }} showEmpltyOnLast={fetchMembers?.length === fetchMembers?.total_size} /> </Box> ) }in this {member.name} i want to applye scrolle