2022-08-28 20:12:09 +02:00
|
|
|
import { SpockHandGesture } from 'iconoir-react';
|
|
|
|
import styled from 'styled-components';
|
2023-01-11 19:08:14 +01:00
|
|
|
import { SUGGEST_ICON_LINK } from '../lib/constants';
|
2022-08-28 20:12:09 +02:00
|
|
|
import { Text18 } from './Typography';
|
|
|
|
|
|
|
|
export interface IconListEmptyProps {
|
|
|
|
searchTerm: string;
|
|
|
|
}
|
|
|
|
export function IconListEmpty({ searchTerm }: IconListEmptyProps) {
|
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
<IconContainer>
|
|
|
|
<SpockHandGesture />
|
|
|
|
</IconContainer>
|
|
|
|
<Title>
|
|
|
|
Unfortunately there are no icons for '{searchTerm}'
|
|
|
|
</Title>
|
|
|
|
<Text18 style={{ color: 'var(--black-60)' }}>
|
|
|
|
{"If you can't find the icon, you can make a"}
|
|
|
|
<br />
|
2023-01-11 19:08:14 +01:00
|
|
|
<a href={SUGGEST_ICON_LINK} target={'_blank'} rel={'noreferrer'}>
|
2022-08-28 20:12:09 +02:00
|
|
|
suggestion on GitHub.
|
|
|
|
</a>
|
|
|
|
</Text18>
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const Container = styled.div`
|
|
|
|
margin-top: 90px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
text-align: center;
|
|
|
|
`;
|
|
|
|
const IconContainer = styled.div`
|
|
|
|
svg {
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
}
|
|
|
|
margin-bottom: 65px;
|
|
|
|
color: var(--black);
|
|
|
|
`;
|
|
|
|
const Title = styled(Text18)`
|
2023-09-25 04:43:10 +02:00
|
|
|
&&& {
|
|
|
|
font-weight: 700;
|
|
|
|
margin-bottom: 30px;
|
|
|
|
color: var(--black);
|
|
|
|
}
|
2022-08-28 20:12:09 +02:00
|
|
|
`;
|