mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unsafe-return */
|
|
/* eslint-disable @typescript-eslint/restrict-plus-operands */
|
|
import { Link } from 'react-router-dom'
|
|
import { useAssetApi } from '../../AppShell/hooks/useAssets'
|
|
|
|
const ContactInfo = ({
|
|
email,
|
|
telephone,
|
|
name,
|
|
avatar,
|
|
link,
|
|
}: {
|
|
email: string
|
|
telephone: string
|
|
name: string
|
|
avatar: string
|
|
link?: string
|
|
}) => {
|
|
const assetsApi = useAssetApi()
|
|
|
|
return (
|
|
<div className='tw-bg-base-200 tw-mb-6 tw-mt-6 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 && (
|
|
<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>
|
|
</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'
|
|
>
|
|
<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'
|
|
>
|
|
<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>
|
|
</svg>
|
|
{email}
|
|
</a>
|
|
</p>
|
|
)}
|
|
{telephone && (
|
|
<p>
|
|
<a
|
|
href={`tel:${telephone}`}
|
|
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'
|
|
>
|
|
<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' />
|
|
</svg>
|
|
{telephone}
|
|
</a>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContactInfo
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
const ConditionalLink = ({ url, children }) => {
|
|
const params = new URLSearchParams(window.location.search)
|
|
|
|
if (url) {
|
|
return <Link to={url + '?' + params}>{children}</Link>
|
|
}
|
|
return children
|
|
}
|