feat(ui): refactor SkipToContentButton to use children prop instead of label

Author: malav2110

apps/site/components/withNavBar.tsx

@@ -56,7 +56,9 @@ const WithNavBar: FC = () => {
     <div>
       <WithBanner section="index" />
 
-      <SkipToContentButton label={t('components.common.skipToContent')} />
+      <SkipToContentButton>
+        {t('components.common.skipToContent')}
+      </SkipToContentButton>
 
       <NavBar
         navItems={navigationItems.map(([, { label, link, target }]) => ({

packages/ui-components/src/Common/SkipToContentButton/index.stories.tsx

@@ -7,7 +7,7 @@ type Meta = MetaObj<typeof SkipToContentButton>;
 
 export const Default: Story = {
   args: {
-    label: 'Skip to content',
+    children: 'Skip to content',
   },
 };
 

packages/ui-components/src/Common/SkipToContentButton/index.tsx

@@ -1,19 +1,19 @@
-import type { FC, AnchorHTMLAttributes } from 'react';
+import type { FC, AnchorHTMLAttributes, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
 
-type SkipToContentButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  label: string;
-};
+type SkipToContentButtonProps = PropsWithChildren<
+  AnchorHTMLAttributes<HTMLAnchorElement>
+>;
 
 const SkipToContentButton: FC<SkipToContentButtonProps> = ({
-  label,
+  children,
   href = '#main',
   ...props
 }) => {
   return (
     <a href={href} className={styles.skipToContent} {...props}>
-      {label}
+      {children}
     </a>
   );
 };