update prop type from text to children

Author: LEARN Academy

src/components/NextLink/NextLink.jsx

@@ -2,24 +2,27 @@ import React from 'react'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 
-const NextLink = ({ addClass, text, path }) => (
+const NextLink = ({ addClass, children, path }) => (
   <Link href={path} passHref>
     <NextLinkWrapper
       addClass={addClass}
       href={path}
-      text={text}
+      children={children}
     />
   </Link>
 )
 
-const NextLinkWrapper = React.forwardRef(({ addClass, text, href }, ref) => (
+const NextLinkWrapper = React.forwardRef(({ addClass, children, href }, ref) => (
   <a href={href} ref={ref} className={addClass}>
-    {text}
+    {children}
   </a>
 ))
 
 NextLink.propTypes = {
-  // text: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.elementType,
+  ]).isRequired,
   addClass: PropTypes.string,
   path: PropTypes.exact({
     pathname: PropTypes.string.isRequired,

src/components/NextLink/NextLink.stories.jsx

@@ -10,7 +10,7 @@ const Template = (args) => <NextLink {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  text: 'Text Here',
+  children: 'Text Here',
   addClass: '',
   path: {
     pathname: '/test',

src/compounds/Item/CardBody.jsx

@@ -15,7 +15,7 @@ const CardBody = ({ buttonLink, buttonProps, item,
           <Card.Title>
             {(withTitleLink) && (
               <NextLink
-                text={name}
+                children={name}
                 path={{ pathname: titleLink, query: { id } }}
                 addClass='text-decoration-none link-hover'
               />

src/compounds/Item/Item.jsx

@@ -54,26 +54,26 @@ const Item = ({ buttonLink, buttonProps, href, isLoading, item, orientation, tit
         </div>
       ) : (
         <NextLink
-        text={(
-          <>
-            <Image
-            className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
-            src={src}
-            alt={alt}
-          />
-          <CardBody
-            buttonLink={link}
-            buttonProps={buttonProps}
-            item={item}
-            orientation={orientation}
-            titleLink={link}
-            withButtonLink={withButtonLink}
-            // withTitleLink={withTitleLink}
-          />
-          </>
-        )}
-        path={{ pathname: item.href, query: { id }}}
-        addClass="text-decoration-none link-hover"
+          children={(
+            <>
+              <Image
+              className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
+              src={src}
+              alt={alt}
+              />
+              <CardBody
+                buttonLink={link}
+                buttonProps={buttonProps}
+                item={item}
+                orientation={orientation}
+                titleLink={link}
+                withButtonLink={withButtonLink}
+                withTitleLink={withTitleLink}
+              />
+            </>
+          )}
+          path={{ pathname: item.href, query: { id }}}
+          addClass="text-decoration-none link-hover"
         />
       )}
     </Card>