andrea.morten/web-check-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update homepage and about page

Browse Source
This commit is contained in:
Alicia Sykes
2023-07-29 19:42:20 +01:00
parent d6da8e123e
commit db3322856b
5 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Form/Heading.tsx
View File

@@ -10,6 +10,7 @@ interface HeadingProps {
inline?: boolean;
children: React.ReactNode;
id?: string;
className?: string;
};
const StyledHeading = styled.h1<HeadingProps>`
@@ -47,10 +48,14 @@ const StyledHeading = styled.h1<HeadingProps>`
${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 } = props;
const { children, as, size, align, color, inline, id, className } = props;
return (
<StyledHeading as={as} size={size} align={align} color={color} inline={inline} id={id}>
<StyledHeading as={as} size={size} align={align} color={color} inline={inline} className={className} id={id || makeAnchor((children || '')?.toString())}>
{children}
</StyledHeading>
);