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

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

@ -1,6 +1,7 @@
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 (
@ -8,6 +9,7 @@ const ContactInfo = ({ email, telephone, name, avatar } : {email: string, teleph
<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">
@ -16,6 +18,7 @@ const ContactInfo = ({ email, telephone, name, avatar } : {email: string, teleph
</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>
@ -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 */}