Merge pull request #14 from gabrielduete/feat/add-section-articles

pages/index.tsx

@@ -3,6 +3,7 @@ import Header from '~/src/components/Header'
 import SectionServices from '~/src/components/SectionServices'
 import SectionProviders from '~/src/components/SectionProviders'
 import SectionApps from '~/src/components/SectionApps'
+import Articles from '~/src/components/Articles'
 
 const Home = () => {
   return (
@@ -12,6 +13,7 @@ const Home = () => {
       <SectionServices />
       <SectionProviders />
       <SectionApps />
+      <Articles />
     </main>
   )
 }

src/components/Articles/Articles.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+
+import { infosCards } from './Cards/Cards.data'
+
+import Articles from '.'
+
+describe('<Articles />', () => {
+  beforeEach(() => {
+    render(<Articles />)
+  })
+
+  const items = infosCards.map(card => card.title)
+
+  it('should render title, subtitle and button correctly', () => {
+    expect(
+      screen.getByText(/Check out our latest article/i)
+    ).toBeInTheDocument()
+    expect(screen.getByText(/View all/i)).toBeInTheDocument()
+  })
+
+  it.each(items)('shold render %s title card correctly', title => {
+    expect(screen.getByText(title)).toBeInTheDocument()
+  })
+})

src/components/Articles/Cards/Cards.data.ts

@@ -0,0 +1,25 @@
+const buttonText = 'Read more'
+
+export const infosCards = [
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1149875946233528400/image_2.png',
+    title: 'Disease detection, check up in the laboratory',
+    text: 'In this case, the role of the health laboratory is very important to do a disease detection...',
+    buttonText,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1149875945977683978/image_2_1.png',
+    title: 'Herbal medicines that are safe for consumption',
+    text: 'Herbal medicine is very widely used at this time because of its very good for your health...',
+    buttonText,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1149875945679884379/image_3.png',
+    title: 'Natural care for healthy facial skin',
+    text: 'A healthy lifestyle should start from now and also for your skin health. There are some...',
+    buttonText,
+  },
+]

src/components/Articles/Cards/index.tsx

@@ -0,0 +1,30 @@
+import Title from '../../Title'
+
+import { infosCards } from './Cards.data'
+import TrendingFlatIcon from '@mui/icons-material/TrendingFlat'
+
+const Cards = () => {
+  return (
+    <div className='flex flex-wrap items-center justify-center gap-9 mt-20'>
+      {infosCards.map(({ image, buttonText, text, title }) => {
+        return (
+          <div
+            className='max-w-[320px] h-[480px] flex flex-col rounded-2xl bg-white drop-shadow-xl'
+            key={text}
+          >
+            <img src={image} alt='a' className='rounded-t-2xl' />
+            <div className='px-8 mt-6'>
+              <Title fontSize='text-xl'>{title}</Title>
+              <p className='text-gray-500 text-base mt-3'>{text}</p>
+              <button className='mt-6 text-blue-500 hover:opacity-75 delay-75 duration-300'>
+                {buttonText} <TrendingFlatIcon />
+              </button>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Cards

src/components/Articles/index.tsx

@@ -0,0 +1,26 @@
+import Cards from './Cards'
+import Button from '../Button'
+import Title from '../Title'
+
+const Articles = () => {
+  return (
+    <>
+      <section className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'>
+        <Title fontSize='text-3xl' hasLine={true} linePositionCenter={true}>
+          Check out our latest article
+        </Title>
+        <Cards />
+        <div className='mt-16'>
+          <Button
+            content='View all'
+            padding='px-16'
+            textColor='text-blue-500'
+            style='outlined'
+          />
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Articles

src/components/Button/index.tsx

@@ -7,7 +7,7 @@ type ButtonProps = {
   style: 'filled' | 'outlined'
   bgColor?: 'bg-blue-500'
   textColor: 'text-white' | 'text-blue-500'
-  padding: 'px-9' | 'px-11'
+  padding: 'px-9' | 'px-11' | 'px-16'
 }
 
 const Button = ({

src/components/SectionServices/Cards/Cards.tsx

@@ -0,0 +1,34 @@
+import { CARDS } from './Cards.data'
+import Image from 'next/image'
+import Title from '../../Title'
+
+const Cards = () => {
+  return (
+    <div className='flex flex-wrap items-center justify-center gap-9 mt-20'>
+      {CARDS.map(({ title, subtitle, image }) => {
+        return (
+          <div
+            key={title}
+            className='flex flex-col justify-center p-10 pr-16 max-w-full rounded-2xl bg-white drop-shadow-xl h-[350px]'
+          >
+            <div className='mb-6'>
+              <Image
+                src={image}
+                alt={image}
+                width={
+                  title === CARDS[0].title || title === CARDS[4].title ? 85 : 70
+                }
+                height={title === CARDS[4].title ? 70 : 93}
+                quality={100}
+              />
+            </div>
+            <Title fontSize='text-2xl'>{title}</Title>
+            <p className='w-64 mt-3 text-gray-500'>{subtitle}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Cards

src/components/SectionServices/SectionServices.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 
-import { CARDS } from './SectionServices.data'
+import { CARDS } from './Cards/Cards.data'
 
 import SectionServices from '.'
 

src/components/SectionServices/index.tsx

@@ -1,7 +1,6 @@
 import Title from '../Title'
-import { CARDS } from './SectionServices.data'
-import Image from 'next/image'
 import Button from '../Button'
+import Cards from './Cards/Cards'
 
 const SectionServices = () => {
   return (
@@ -15,32 +14,7 @@ const SectionServices = () => {
         doctors you can consult with us which type of service is suitable for
         your health
       </p>
-      <div className='flex flex-wrap items-center justify-center gap-9 mt-20'>
-        {CARDS.map(({ title, subtitle, image }) => {
-          return (
-            <div
-              key={title}
-              className='flex flex-col justify-center p-10 pr-16 max-w-full rounded-2xl bg-white drop-shadow-xl h-[350px]'
-            >
-              <div className='mb-6'>
-                <Image
-                  src={image}
-                  alt={image}
-                  width={
-                    title === CARDS[0].title || title === CARDS[4].title
-                      ? 85
-                      : 70
-                  }
-                  height={title === CARDS[4].title ? 70 : 93}
-                  quality={100}
-                />
-              </div>
-              <Title fontSize='text-2xl'>{title}</Title>
-              <p className='w-64 mt-3 text-gray-500'>{subtitle}</p>
-            </div>
-          )
-        })}
-      </div>
+      <Cards />
       <div className='mt-20'>
         <Button
           style='outlined'

tsconfig.json

@@ -17,6 +17,11 @@
     "baseUrl": ".",
     "paths": { "~/*": ["./*"] }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/components/SectionServices/Cards/Cards.data.ts"
+  ],
   "exclude": ["node_modules"]
 }