Migrate NavigationButton, DocsHelp, and Card components to ShadCN (#1727)

* imlement shadcn in NavigationButtons

* create test file for navigation button

* adapt DocHelp to shadcn

* adapting card component to shadcn

* add 2 tests for the card test file

* format adjustments

* fixing test format

* adding proptype for the shadcn elemnts

* adjusting the card test for better structer

* adjusting the colors and hover effects for dark mode

* adjust configuration

Author: idanidan29

components/Card.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import Link from 'next/link';
 import TextTruncate from 'react-text-truncate';
 import Image from 'next/image';
+import { Card as ShadcnCard } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+
 export interface CardProps {
   title: string;
   body: string;
@@ -20,23 +24,25 @@ const CardBody = ({
   link,
   image,
   extended,
-  headerSize,
-  bodyTextSize,
+  headerSize = 'medium',
+  bodyTextSize = 'medium',
 }: CardProps) => {
-  const headerSizeClasses: Record<string, string> = {
+  const headerSizeClasses = {
     small: 'text-[0.9rem]',
     medium: 'text-[1.3rem]',
     large: 'text-[2rem]',
   };
-  const bodyTextSizeClasses: Record<string, string> = {
+
+  const bodyTextSizeClasses = {
     small: 'text-[0.85rem]',
     medium: 'text-[1rem]',
     large: 'text-[1.5rem]',
   };
+
   return (
-    <div className='group relative h-full w-full rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
-      <div className='flex justify-center '>
-        {image && (
+    <ShadcnCard className='group relative h-full w-full rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
+      {image && (
+        <div className='flex justify-center '>
           <Image
             src={image}
             alt={title}
@@ -45,9 +51,10 @@ const CardBody = ({
             className='h-32 p-2 object-contain'
             data-test='card-image'
           />
-        )}
-      </div>
-      <div className='flex flex-row items-start mb-6'>
+        </div>
+      )}
+
+      <div className='flex flex-row items-start '>
         {icon && (
           <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
             <Image
@@ -61,20 +68,32 @@ const CardBody = ({
           </span>
         )}
         <p
-          className={`mb-1 mt-1 items-center font-bold text-gray-900 dark:text-white ${headerSizeClasses[headerSize || 'medium']}`}
+          className={cn(
+            'mb-1 mt-1 items-center font-bold text-gray-900 dark:text-white',
+            headerSizeClasses[headerSize],
+          )}
           data-test='card-title'
         >
           {title}
         </p>
       </div>
-      <hr className='mb-4 mt-3.5 h-px border-0 bg-gray-400' />
+
+      <Separator className='bg-gray-400' />
+
       <p
-        className={`mb-8 text-black mt-5 dark:text-white  ${bodyTextSizeClasses[bodyTextSize || 'medium']} `}
+        className={cn(
+          'mb-8 text-black mt-5 dark:text-white ',
+          bodyTextSizeClasses[bodyTextSize],
+        )}
         data-test='card-body'
       >
-        {extended && <span dangerouslySetInnerHTML={{ __html: body }} />}
-        {!extended && <TextTruncate element='span' line={3} text={body} />}
+        {extended ? (
+          <span dangerouslySetInnerHTML={{ __html: body }} />
+        ) : (
+          <TextTruncate element='span' line={3} text={body} />
+        )}
       </p>
+
       {link && (
         <p
           className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100 text-black dark:text-white'
@@ -83,52 +102,17 @@ const CardBody = ({
           Read More
         </p>
       )}
-    </div>
+    </ShadcnCard>
   );
 };
 
-const Card: React.FC<CardProps> = ({
-  title,
-  body,
-  icon,
-  link,
-  image,
-  extended,
-  headerSize,
-  bodyTextSize,
-}) => {
-  return (
-    <>
-      {link ? (
-        <Link href={link} data-test='card-link'>
-          <CardBody
-            {...{
-              title,
-              body,
-              icon,
-              link,
-              image,
-              extended,
-              headerSize,
-              bodyTextSize,
-            }}
-          />
-        </Link>
-      ) : (
-        <CardBody
-          {...{
-            title,
-            body,
-            icon,
-            link,
-            image,
-            extended,
-            headerSize,
-            bodyTextSize,
-          }}
-        />
-      )}
-    </>
+const Card: React.FC<CardProps> = ({ link, ...props }) => {
+  return link ? (
+    <Link href={link} data-test='card-link'>
+      <CardBody link={link} {...props} />
+    </Link>
+  ) : (
+    <CardBody {...props} />
   );
 };