victorAnumudu
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import clsx from "clsx";
|
|
import { FC } from "react";
|
|
import { toAbsoluteUrl } from "../../../../../../_digifi/helpers";
|
|
import { User } from "../../../core/_models";
|
|
|
|
type Props = {
|
|
user: User;
|
|
};
|
|
|
|
const UserInfoCell: FC<Props> = ({ user }) => (
|
|
<div className="d-flex align-items-center">
|
|
{/* begin:: Avatar */}
|
|
<div className="symbol symbol-circle symbol-50px overflow-hidden me-3">
|
|
<a href="#">
|
|
{user.avatar ? (
|
|
<div className="symbol-label">
|
|
<img
|
|
src={toAbsoluteUrl(`media/${user.avatar}`)}
|
|
alt={user.name}
|
|
className="w-100"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={clsx(
|
|
"symbol-label fs-3",
|
|
`bg-light-${user.initials?.state}`,
|
|
`text-${user.initials?.state}`
|
|
)}
|
|
>
|
|
{user.firstname?.substring(0, 1).toUpperCase()}{" "}
|
|
{user.lastname?.substring(0, 1).toUpperCase()}
|
|
</div>
|
|
)}
|
|
</a>
|
|
</div>
|
|
<div className="d-flex flex-column">
|
|
<a href="#" className="text-gray-800 text-hover-primary mb-1">
|
|
{user.firstname} {user.lastname}
|
|
</a>
|
|
<span>{user.email}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export { UserInfoCell };
|