Skip to content
Permalink
a99ba37e0b
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
64 lines (54 sloc) 1.56 KB
/* eslint-disable-next-line */
import React from 'react';
import { w } from 'windstitch';
export const SkipToMainContent = w.button(
`
mr-4 absolute translate-x-[-200%] transition-transform duration-300
focus:static focus:translate-x-0
bg-violet-500
hover:bg-violet-400
dark:bg-violet-700
dark:hover:bg-violet-600
text-white
dark:text-white
ring-violet-400
px-4 py-2
`,
);
SkipToMainContent.displayName = 'Button';
interface SkipToMainProps{
className?: string;
children: React.ReactElement;
/**
* The css query aiding the selection of the
* container (main, section etc) we want to scroll to;
*/
skipTo: string;
}
export interface SkipToMainContentLinkProps extends Omit<SkipToMainProps, 'children'>{
children?: React.ReactElement;
}
const SkipToMain = (props: SkipToMainProps) => {
const onClick = (event: React.SyntheticEvent) => {
event.preventDefault();
const container: (HTMLElement | null) = document.querySelector(props.skipTo);
if (container) {
container.tabIndex = -1;
container.focus();
setTimeout(() => container.removeAttribute("tabindex"), 1000);
}
};
return React.cloneElement(props.children, { onClick, className: props.className });
}
export const SkipToMainContentLink = (props: SkipToMainContentLinkProps) => {
return (
<SkipToMain {...props}>
{props.children || <SkipToMainContent>Skip to content</SkipToMainContent>}
</SkipToMain>
)
}
SkipToMainContentLink.defaultProps = {
className: "skip-link",
skipTo: "main:first-of-type",
};
export default SkipToMainContentLink;