antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

make contact avatar clickable

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-16 11:32:50 +02:00
parent 559d34e58b
commit 271a968c61
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/Components/Profile/ContactInfo.tsx
View File

@ -1,21 +1,24 @@
import { Link } from "react-router-dom";
import { useAssetApi } from "../AppShell/hooks/useAssets"; import { useAssetApi } from "../AppShell/hooks/useAssets";
const ContactInfo = ({ email, telephone, name, avatar } : {email: string, telephone: string, name: string, avatar: string}) => { const ContactInfo = ({ email, telephone, name, avatar, link }: { email: string, telephone: string, name: string, avatar: string, link?: string }) => {
const assetsApi = useAssetApi(); const assetsApi = useAssetApi();
return( return (
<div className="tw-bg-gray-100 tw-my-10 tw-p-6"> <div className="tw-bg-gray-100 tw-my-10 tw-p-6">
<h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2> <h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2>
<div className="tw-mt-4 tw-flex tw-items-center"> <div className="tw-mt-4 tw-flex tw-items-center">
{avatar && ( {avatar && (
<ConditionalLink url={link}>
<div className="tw-mr-5 tw-flex tw-items-center tw-justify-center"> <div className="tw-mr-5 tw-flex tw-items-center tw-justify-center">
<div className="tw-avatar"> <div className="tw-avatar">
<div className="tw-w-20 tw-h-20 tw-bg-gray-200 rounded-full tw-flex tw-items-center tw-justify-center overflow-hidden"> <div className="tw-w-20 tw-h-20 tw-bg-gray-200 rounded-full tw-flex tw-items-center tw-justify-center overflow-hidden">
<img src={assetsApi.url + avatar} alt={name} <img src={assetsApi.url + avatar} alt={name}
className="tw-w-full tw-h-full tw-object-cover"/> className="tw-w-full tw-h-full tw-object-cover" />
</div> </div>
</div> </div>
</div> </div>
</ConditionalLink>
)} )}
<div className="tw-text-sm tw-flex-grow"> <div className="tw-text-sm tw-flex-grow">
<p className="tw-font-semibold">{name}</p> <p className="tw-font-semibold">{name}</p>
@ -42,7 +45,7 @@ const ContactInfo = ({ email, telephone, name, avatar } : {email: string, teleph
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
className="tw-w-4 tw-h-4 tw-mr-1"> className="tw-w-4 tw-h-4 tw-mr-1">
<path <path
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/> d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
</svg> </svg>
{telephone} {telephone}
</a> </a>
@ -55,3 +58,14 @@ const ContactInfo = ({ email, telephone, name, avatar } : {email: string, teleph
} }
export default ContactInfo; export default ContactInfo;
const ConditionalLink = ({ url, children }) => {
if (url) {
return (
<Link to={url}>
{children}
</Link>
);
}
return children;
};

2
src/Components/Profile/OverlayItemProfile.tsx
View File

@ -325,7 +325,7 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
{template == "onepager" && {template == "onepager" &&
<> <>
{item.user_created.first_name && ( {item.user_created.first_name && (
<ContactInfo name={profile?.name ? profile.name : item.user_created.first_name} avatar={profile?.image ? profile.image : item.user_created.avatar} email={item.contact} telephone={item.telephone} /> <ContactInfo link={`/item/${profile?.id}`} name={profile?.name ? profile.name : item.user_created.first_name} avatar={profile?.image ? profile.image : item.user_created.avatar} email={item.contact} telephone={item.telephone} />
)} )}
{/* Description Section */} {/* Description Section */}