65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import styled from 'styled-components';
|
|
import colors from 'styles/colors';
|
|
import { TextSizes } from 'styles/typography';
|
|
|
|
interface HeadingProps {
|
|
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
|
|
align?: 'left' | 'center' | 'right';
|
|
color?: string;
|
|
size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
|
|
inline?: boolean;
|
|
children: React.ReactNode;
|
|
id?: string;
|
|
className?: string;
|
|
};
|
|
|
|
const StyledHeading = styled.h1<HeadingProps>`
|
|
margin: 0.5rem 0;
|
|
text-shadow: 2px 2px 0px ${colors.bgShadowColor};
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
font-size: ${TextSizes.medium};
|
|
img { // Some titles have an icon
|
|
width: 2.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
a { // If a title is a link, keep title styles
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
${props => {
|
|
switch (props.size) {
|
|
case 'xSmall': return `font-size: ${TextSizes.xSmall};`;
|
|
case 'small': return `font-size: ${TextSizes.small};`;
|
|
case 'medium': return `font-size: ${TextSizes.large};`;
|
|
case 'large': return `font-size: ${TextSizes.xLarge};`;
|
|
case 'xLarge': return `font-size: ${TextSizes.xLarge};`;
|
|
}
|
|
}};
|
|
${props => {
|
|
switch (props.align) {
|
|
case 'left': return 'text-align: left;';
|
|
case 'right': return 'text-align: right;';
|
|
case 'center': return 'text-align: center; justify-content: center;';
|
|
}
|
|
}};
|
|
${props => props.color ? `color: ${props.color};` : '' }
|
|
${props => props.inline ? 'display: inline;' : '' }
|
|
`;
|
|
|
|
const makeAnchor = (title: string): string => {
|
|
return title.toLowerCase().replace(/[^\w\s]|_/g, "").replace(/\s+/g, "-");
|
|
};
|
|
|
|
const Heading = (props: HeadingProps): JSX.Element => {
|
|
const { children, as, size, align, color, inline, id, className } = props;
|
|
return (
|
|
<StyledHeading as={as} size={size} align={align} color={color} inline={inline} className={className} id={id || makeAnchor((children || '')?.toString())}>
|
|
{children}
|
|
</StyledHeading>
|
|
);
|
|
}
|
|
|
|
export default Heading;
|