2021-07-30 22:40:49 +01:00
|
|
|
import { Attachment } from "revolt-api/types/Autumn";
|
2021-06-19 12:34:53 +01:00
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
|
|
|
|
export interface IconBaseProps<T> {
|
2021-07-05 11:25:20 +01:00
|
|
|
target?: T;
|
|
|
|
attachment?: Attachment;
|
2021-06-19 12:34:53 +01:00
|
|
|
|
2021-07-05 11:25:20 +01:00
|
|
|
size: number;
|
2021-08-03 15:37:19 +01:00
|
|
|
hover?: boolean;
|
2021-07-05 11:25:20 +01:00
|
|
|
animate?: boolean;
|
2021-06-19 12:34:53 +01:00
|
|
|
}
|
|
|
|
|
2021-06-19 15:29:04 +01:00
|
|
|
interface IconModifiers {
|
2021-08-30 23:39:02 +02:00
|
|
|
/**
|
|
|
|
* If this is undefined or null then the icon defaults to square, else uses the CSS variable given.
|
|
|
|
*/
|
|
|
|
borderRadius?: string;
|
2021-08-03 15:37:19 +01:00
|
|
|
hover?: boolean;
|
2021-06-19 15:29:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export default styled.svg<IconModifiers>`
|
2021-07-05 11:25:20 +01:00
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
|
|
${(props) =>
|
2021-08-30 23:39:02 +02:00
|
|
|
props.borderRadius &&
|
2021-07-05 11:25:20 +01:00
|
|
|
css`
|
2021-08-30 23:39:02 +02:00
|
|
|
border-radius: var(${props.borderRadius});
|
2021-07-05 11:25:20 +01:00
|
|
|
`}
|
|
|
|
}
|
2021-08-03 15:37:19 +01:00
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.hover &&
|
|
|
|
css`
|
|
|
|
&:hover .icon {
|
|
|
|
filter: brightness(0.8);
|
|
|
|
}
|
|
|
|
`}
|
2021-06-19 12:34:53 +01:00
|
|
|
`;
|
2021-06-19 15:29:04 +01:00
|
|
|
|
|
|
|
export const ImageIconBase = styled.img<IconModifiers>`
|
2021-07-05 11:25:20 +01:00
|
|
|
flex-shrink: 0;
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
|
|
${(props) =>
|
2021-08-30 23:39:02 +02:00
|
|
|
props.borderRadius &&
|
2021-07-05 11:25:20 +01:00
|
|
|
css`
|
2021-08-30 23:39:02 +02:00
|
|
|
border-radius: var(${props.borderRadius});
|
2021-07-05 11:25:20 +01:00
|
|
|
`}
|
2021-08-03 15:37:19 +01:00
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.hover &&
|
|
|
|
css`
|
|
|
|
&:hover img {
|
|
|
|
filter: brightness(0.8);
|
|
|
|
}
|
|
|
|
`}
|
2021-06-19 15:29:04 +01:00
|
|
|
`;
|