109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { isNonEmptyString } from '@sniptt/guards';
|
|
import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
|
|
import { Avatar } from 'twenty-ui/display';
|
|
import { UndecoratedLink } from 'twenty-ui/navigation';
|
|
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
|
import { useRedirectToDefaultDomain } from '~/modules/domain-manager/hooks/useRedirectToDefaultDomain';
|
|
import { useReadDefaultDomainFromConfiguration } from '~/modules/domain-manager/hooks/useReadDefaultDomainFromConfiguration';
|
|
|
|
type LogoProps = {
|
|
primaryLogo?: string | null;
|
|
secondaryLogo?: string | null;
|
|
placeholder?: string | null;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
const StyledContainer = styled.div`
|
|
height: ${({ theme }) => theme.spacing(12)};
|
|
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
|
margin-top: ${({ theme }) => theme.spacing(4)};
|
|
|
|
position: relative;
|
|
width: ${({ theme }) => theme.spacing(12)};
|
|
`;
|
|
|
|
const StyledSecondaryLogo = styled.img`
|
|
border-radius: ${({ theme }) => theme.border.radius.xs};
|
|
height: ${({ theme }) => theme.spacing(6)};
|
|
width: ${({ theme }) => theme.spacing(6)};
|
|
`;
|
|
|
|
const StyledSecondaryLogoContainer = styled.div`
|
|
align-items: center;
|
|
background-color: ${({ theme }) => theme.background.primary};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
bottom: ${({ theme }) => `-${theme.spacing(3)}`};
|
|
display: flex;
|
|
height: ${({ theme }) => theme.spacing(7)};
|
|
justify-content: center;
|
|
|
|
position: absolute;
|
|
right: ${({ theme }) => `-${theme.spacing(3)}`};
|
|
width: ${({ theme }) => theme.spacing(7)};
|
|
`;
|
|
|
|
const StyledPrimaryLogo = styled.div<{ src: string }>`
|
|
background: url(${(props) => props.src});
|
|
background-size: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
`;
|
|
|
|
export const Logo = ({
|
|
primaryLogo,
|
|
secondaryLogo,
|
|
placeholder,
|
|
onClick,
|
|
}: LogoProps) => {
|
|
const { redirectToDefaultDomain } = useRedirectToDefaultDomain();
|
|
const defaultPrimaryLogoUrl = `${window.location.origin}/images/icons/android/android-launchericon-192-192.png`;
|
|
|
|
const { defaultUrl } = useReadDefaultDomainFromConfiguration();
|
|
|
|
const primaryLogoUrl = getImageAbsoluteURI({
|
|
imageUrl: primaryLogo ?? defaultPrimaryLogoUrl,
|
|
baseUrl: REACT_APP_SERVER_BASE_URL,
|
|
});
|
|
|
|
const secondaryLogoUrl = isNonEmptyString(secondaryLogo)
|
|
? getImageAbsoluteURI({
|
|
imageUrl: secondaryLogo,
|
|
baseUrl: REACT_APP_SERVER_BASE_URL,
|
|
})
|
|
: null;
|
|
|
|
const isUsingDefaultLogo = !isDefined(primaryLogo);
|
|
|
|
return (
|
|
<StyledContainer onClick={() => onClick?.()}>
|
|
{isUsingDefaultLogo ? (
|
|
<UndecoratedLink
|
|
to={defaultUrl.toString()}
|
|
onClick={redirectToDefaultDomain}
|
|
>
|
|
<StyledPrimaryLogo src={primaryLogoUrl} />
|
|
</UndecoratedLink>
|
|
) : (
|
|
<StyledPrimaryLogo src={primaryLogoUrl} />
|
|
)}
|
|
{isDefined(secondaryLogoUrl) ? (
|
|
<StyledSecondaryLogoContainer>
|
|
<StyledSecondaryLogo src={secondaryLogoUrl} />
|
|
</StyledSecondaryLogoContainer>
|
|
) : (
|
|
isDefined(placeholder) && (
|
|
<StyledSecondaryLogoContainer>
|
|
<Avatar
|
|
size="lg"
|
|
placeholder={placeholder}
|
|
type="squared"
|
|
placeholderColorSeed={placeholder}
|
|
/>
|
|
</StyledSecondaryLogoContainer>
|
|
)
|
|
)}
|
|
</StyledContainer>
|
|
);
|
|
};
|