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

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

@ -1,31 +1,34 @@
import { Link } from "react-router-dom";
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();
return(
return (
<div className="tw-bg-gray-100 tw-my-10 tw-p-6">
<h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2>
<div className="tw-mt-4 tw-flex tw-items-center">
{avatar && (
<div className="tw-mr-5 tw-flex tw-items-center tw-justify-center">
<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">
<img src={assetsApi.url + avatar} alt={name}
className="tw-w-full tw-h-full tw-object-cover"/>
<ConditionalLink url={link}>
<div className="tw-mr-5 tw-flex tw-items-center tw-justify-center">
<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">
<img src={assetsApi.url + avatar} alt={name}
className="tw-w-full tw-h-full tw-object-cover" />
</div>
</div>
</div>
</div>
</ConditionalLink>
)}
<div className="tw-text-sm tw-flex-grow">
<p className="tw-font-semibold">{name}</p>
{email && (
<p>
<a href={`mailto:${email}`}
className="tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center">
className="tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
className="tw-w-4 tw-h-4 tw-mr-1">
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
className="tw-w-4 tw-h-4 tw-mr-1">
<path
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
@ -37,12 +40,12 @@ const ContactInfo = ({ email, telephone, name, avatar } : {email: string, teleph
{telephone && (
<p>
<a href={`tel:${telephone}`}
className="tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center tw-whitespace-nowrap">
className="tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center tw-whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
className="tw-w-4 tw-h-4 tw-mr-1">
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
className="tw-w-4 tw-h-4 tw-mr-1">
<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>
{telephone}
</a>
@ -55,3 +58,14 @@ const ContactInfo = ({ email, telephone, name, avatar } : {email: string, teleph
}
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" &&
<>
{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 */}