44 lines
1.2 KiB
TypeScript
Executable File
44 lines
1.2 KiB
TypeScript
Executable File
import {UserLink} from '@app/profile/user-link';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {RemoteFavicon} from '@common/ui/remote-favicon';
|
|
import clsx from 'clsx';
|
|
import {ButtonBase} from '@common/ui/buttons/button-base';
|
|
import {OpenInNewIcon} from '@common/icons/material/OpenInNew';
|
|
|
|
interface Props {
|
|
links?: UserLink[];
|
|
className?: string;
|
|
}
|
|
export function ProfileLinks({links, className}: Props) {
|
|
if (!links?.length) return null;
|
|
|
|
if (links.length === 1) {
|
|
return (
|
|
<a
|
|
className="flex items-center max-md:justify-center gap-6 mt-24 md:mt-12 hover:text-primary transition-colors"
|
|
href={links[0].url}
|
|
>
|
|
<OpenInNewIcon className="text-muted" size="sm" />
|
|
<span className="capitalize">{links[0].title}</span>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={clsx('flex items-center', className)}>
|
|
{links.map(link => (
|
|
<Tooltip label={link.title} key={link.url}>
|
|
<ButtonBase
|
|
elementType="a"
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<RemoteFavicon url={link.url} alt={link.title} size="w-20 h-20" />
|
|
</ButtonBase>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|