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

change this component import React, { useEffect, useState } from "react"; import { collection, getDocs, query, limit, startAfter, QueryDocumentSnapshot, getDoc, doc, updateDoc, } from "firebase/firestore"; import { UserModel } from "../models/UserModel"; import { db } from "../firebase/firebase"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableCell, { tableCellClasses } from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Paper from "@mui/material/Paper"; import Button from "@mui/material/Button"; import CircularProgress from "@mui/material/CircularProgress"; import Avatar from "@mui/material/Avatar"; import Badge from "@mui/material/Badge"; import { t } from "i18next"; import { fetchUsers } from "../services/userService"; import { Box } from "@mui/material"; // Stylowanie komórek tabeli const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.common.black, color: theme.palette.common.white, }, [`&.${tableCellClasses.body}`]: { fontSize: 14, }, })); const StyledTableRow = styled(TableRow)(({ theme }) => ({ "&:nth-of-type(odd)": { backgroundColor: theme.palette.action.hover, }, "&:last-child td, &:last-child th": { border: 0, }, })); // Komponent Tabeli Użytkowników export default function UsersTables() { const [users, setUsers] = useState<UserModel[]>([]); const [lastVisible, setLastVisible] = useState<QueryDocumentSnapshot | null>( null ); const [loading, setLoading] = useState<boolean>(false); const loadUsers = async (startAfterDoc?: QueryDocumentSnapshot) => { setLoading(true); try { const { users: newUsers, lastVisible: newLastVisible } = await fetchUsers(startAfterDoc); const uniqueUsers = new Set([ ...users, ...newUsers.map((user) => user.uid), ]); const filteredUsers = [...users, ...newUsers].filter( (user, index, self) => uniqueUsers.has(user.uid) && self.findIndex((u) => u.uid === user.uid) === index ); setUsers(filteredUsers); setLastVisible(newLastVisible); } catch (error) { console.error("Failed to load users", error); } finally { setLoading(false); } }; const displayGender = (gender: UserModel["gender"]) => { console.log(gender); return " "; }; useEffect(() => { loadUsers(); }, []); const loadMoreUsers = () => { if (lastVisible && !loading) { loadUsers(lastVisible); } }; return ( <TableContainer component={Paper}> <Table sx={{ minWidth: 700 }} aria-label="customized table"> <TableHead> <TableRow> <StyledTableCell align="center"> {t("profile.image")} </StyledTableCell> <StyledTableCell align="left">{t("profile.nick")}</StyledTableCell> <StyledTableCell align="right"> {t("profile.gender")} </StyledTableCell> <StyledTableCell align="right"> {t("profile.weight")} </StyledTableCell> <StyledTableCell align="right">{t("profile.age")}</StyledTableCell> <StyledTableCell align="right"> {t("profile.height")} </StyledTableCell> </TableRow> </TableHead> <TableBody> {users.map((user) => ( <StyledTableRow key={user.uid}> <StyledTableCell align="center"> <Badge overlap="circular" anchorOrigin={{ vertical: "bottom", horizontal: "right" }} variant="dot" // Lub `variant="standard"` jeśli chcesz inny styl color="success" // Kolor "success" dla aktywnego użytkownika > <Avatar alt={user.displayName} src={user.photoURL || "/static/images/avatar/default.jpg"} sx={{ width: 36, height: 36 }} /> </Badge> </StyledTableCell> <StyledTableCell component="th" scope="row"> <Box sx={{ display: "flex", flexDirection: "column", }} > <span>{user.displayName}</span> <span>{user.slogan ? `"${user.slogan}"` : ""}</span> </Box> </StyledTableCell> <StyledTableCell align="right"> {displayGender(user.gender)} </StyledTableCell> <StyledTableCell align="right">{user.weight}</StyledTableCell> <StyledTableCell align="right">{user.age}</StyledTableCell> <StyledTableCell align="right">{user.height}</StyledTableCell> </StyledTableRow> ))} </TableBody> </Table> {loading && <CircularProgress />} </TableContainer> ); } for yours withc you prepared