Update pagination styling

fix padding issue
This commit is contained in:
DefectingCat
2022-08-25 10:17:09 +08:00
parent e6dac29861
commit 820c961586
5 changed files with 34 additions and 32 deletions

View File

@ -1,4 +1,4 @@
import { AnchorHTMLAttributes } from 'react';
import { AnchorHTMLAttributes, forwardRef } from 'react';
import cn from 'classnames';
import { FiExternalLink } from 'react-icons/fi';
@ -6,29 +6,33 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
external?: boolean;
}
const Anchor = ({ children, external = true, ...rest }: Props) => {
return (
<>
<a
{...rest}
className="inline-block"
target={external ? '_blank' : undefined}
>
<span
className={cn(
'mx-[2px] text-teal-500 relative',
'before:left-0 before:top-[1px] before:block before:absolute',
'before:w-full before:h-full before:transition-all before:shadow-underline',
'hover:before:shadow-throughline',
'dark:text-teal-600'
)}
const Anchor = forwardRef<HTMLAnchorElement, Props>(
({ children, external = true, ...rest }, ref) => {
return (
<>
<a
ref={ref}
{...rest}
className="inline-block"
target={external ? '_blank' : undefined}
>
{children}
{external && <FiExternalLink className="inline ml-1 mb-[0.2rem]" />}
</span>
</a>
</>
);
};
<span
className={cn(
'mx-[2px] text-teal-500 relative',
'before:left-0 before:top-[1px] before:block before:absolute',
'before:w-full before:h-full before:transition-all before:shadow-underline',
'hover:before:shadow-throughline',
'dark:text-teal-600'
)}
>
{children}
{external && <FiExternalLink className="inline ml-1 mb-[0.2rem]" />}
</span>
</a>
</>
);
}
);
Anchor.displayName = 'Anchor';
export default Anchor;