Skip to content

Commit

Permalink
Merge pull request #540 from RanjanaShenoy/feature#492
Browse files Browse the repository at this point in the history 
Feature#492: Enhance LabTest Cards to include more details. Add redirection for 'Read More'.
  • Loading branch information
@Luson045
Luson045 authored Oct 25, 2024
2 parents 87c7ad9 + f7afed5 commit a13c146
Showing 1 changed file with 48 additions and 26 deletions.
74 changes: 48 additions & 26 deletions client/src/pages/LabTest.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,17 @@ import usgImage from '../assets/usg.png';
import Navbar from '../components/Navbar';
import { mode } from '../store/atom'; // Importing the atom for mode
import Footer from '../components/Footer';
import { Rating } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const LabTestMedipedia = () => {
const [currentItem, setCurrentItem] = useState(3);
const [isVisible, setIsVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const dark = useRecoilValue(mode); // Using Recoil state for dark mode

const navigate = useNavigate();

useEffect(() => {
setTimeout(() => {
setIsVisible(true);
Expand All @@ -37,18 +41,18 @@ const LabTestMedipedia = () => {
title: 'Complete Blood Count (CBC)',
reportTime: '2-days',
cost: '$25',
rating: 4.5,
rating: 4,
testType: 'Blood Test',
description:
'A Complete Blood Count (CBC) is a common blood test that measures the levels of different types of cells in your blood, including red blood cells, white blood cells, hemoglobin, hematocrit, and platelets. This test is essential for diagnosing various conditions like infections, anemia, and other blood disorders.',
'A Complete Blood Count (CBC) is a common blood test that measures the levels of different types of cells in your blood. This test Measures count of red blood cells, white blood cells, hemoglobin, hematocrit, and platelets.',
},
{
id: 2,
imgSrc: lipidProfileImage,
title: 'Lipid Profile',
reportTime: '3-days',
cost: '$35',
rating: 4.7,
rating: 3,
testType: 'Blood Test',
description:
'A Lipid Profile measures the levels of cholesterol and triglycerides in your blood. It includes total cholesterol, HDL (good cholesterol), LDL (bad cholesterol), and triglycerides. This test helps assess your risk of developing cardiovascular disease.',
Expand All @@ -59,7 +63,7 @@ const LabTestMedipedia = () => {
title: 'Blood Glucose Test',
reportTime: '1-day',
cost: '$20',
rating: 4.6,
rating: 5,
testType: 'Blood Test',
description:
'The Blood Glucose Test measures the level of glucose (sugar) in your blood. It is vital for diagnosing and managing diabetes or prediabetes. Regular monitoring of blood glucose levels can prevent severe complications from diabetes.',
Expand All @@ -70,18 +74,18 @@ const LabTestMedipedia = () => {
title: 'Thyroid Test',
reportTime: '2-days',
cost: '$30',
rating: 4.8,
rating: 5,
testType: 'Blood Test',
description:
'The Thyroid Test checks your thyroid function by measuring levels of T3, T4, and TSH hormones in your blood. Thyroid hormones regulate your metabolism, energy levels, and mood. This test can detect conditions such as hyperthyroidism or hypothyroidism.',
'The Thyroid Test checks your thyroid function by measuring levels of T3, T4, and TSH hormones in your blood. This test can detect conditions such as hyperthyroidism or hypothyroidism.',
},
{
id: 5,
imgSrc: hemoglobinImage,
title: 'Hemoglobin Blood Test',
reportTime: '2-days',
cost: '$18',
rating: 4.4,
rating: 4,
testType: 'Blood Test',
description:
'The Hemoglobin Test measures the amount of hemoglobin, a protein in red blood cells that carries oxygen to tissues. It is often used to diagnose anemia and assess the overall health of your red blood cells.',
Expand All @@ -92,7 +96,7 @@ const LabTestMedipedia = () => {
title: 'Urine Test',
reportTime: '3-days',
cost: '$15',
rating: 4.3,
rating: 3,
testType: 'Urine Test',
description:
'A Urine Test analyzes various components of your urine, such as glucose, proteins, and ketones, to detect abnormalities that may indicate conditions like kidney disease, diabetes, or urinary tract infections.',
Expand All @@ -103,18 +107,18 @@ const LabTestMedipedia = () => {
title: 'Sodium Test',
reportTime: '1-day',
cost: '$22',
rating: 4.5,
rating: 3,
testType: 'Blood Test',
description:
'The Sodium Test measures the sodium level in your blood, which is crucial for maintaining fluid balance, nerve function, and muscle activity. Abnormal levels can indicate dehydration, kidney problems, or adrenal issues.',
'The Sodium Test measures the sodium level in your blood, which is crucial for maintaining fluid balance, nerve function, and muscle activity. Abnormal levels can indicate dehydration or kidney problems.',
},
{
id: 8,
imgSrc: hepatitisBImage,
title: 'Hepatitis-B Test',
reportTime: '2-days',
cost: '$40',
rating: 4.7,
rating: 5,
testType: 'Blood Test',
description:
'The Hepatitis B Test detects the presence of Hepatitis B virus (HBV) in the blood. This test is important for diagnosing acute or chronic Hepatitis B infections, which can lead to liver damage.',
Expand All @@ -125,7 +129,7 @@ const LabTestMedipedia = () => {
title: 'Potassium Test',
reportTime: '2-days',
cost: '$25',
rating: 4.4,
rating: 4,
testType: 'Blood Test',
description:
'The Potassium Test measures the potassium level in your blood, which is essential for heart function and muscle contraction. Abnormal levels can cause irregular heartbeats or muscle weakness.',
Expand All @@ -136,29 +140,29 @@ const LabTestMedipedia = () => {
title: 'Rheumatoid Arthritis (RA) Test',
reportTime: '2-days',
cost: '$45',
rating: 4.6,
rating: 4,
testType: 'Blood Test',
description:
'The Rheumatoid Arthritis Test detects rheumatoid factor (RF) or anti-cyclic citrullinated peptide (anti-CCP) antibodies in the blood. These are commonly present in people with rheumatoid arthritis, an autoimmune condition affecting joints.',
'The Rheumatoid Arthritis Test detects rheumatoid factor (RF) or anti-cyclic citrullinated peptide (anti-CCP) antibodies in the blood. Rheumatoid arthritis is a long-term autoimmune disease that causes inflammation of joints and tissues.',
},
{
id: 11,
imgSrc: ecgImage,
title: 'Electrocardiogram (ECG)',
reportTime: '2-days',
cost: '$50',
rating: 4.8,
rating: 5,
testType: 'Non-invasive',
description:
'An Electrocardiogram (ECG) records the electrical activity of the heart over time. It helps detect arrhythmias, heart attacks, and other heart conditions.',
"An Electrocardiogram (ECG) records the electrical activity of the heart over time. It is one of the first heart tests you 'll have. It helps detect arrhythmias, heart attacks, and other heart conditions. ECG results can help diagnose an unusually fast heart rate, called tachycardia, or an unusually slow heart rate,",
},
{
id: 12,
imgSrc: usgImage,
title: 'Ultrasonography (USG)',
reportTime: '2-days',
cost: '$60',
rating: 4.7,
rating: 3,
testType: 'Imaging',
description:
'Ultrasonography (USG) uses high-frequency sound waves to create images of internal organs, muscles, and other soft tissues. It is commonly used for diagnosing a wide range of medical conditions, including those affecting the abdomen, pelvis, and heart.',
Expand Down Expand Up @@ -213,17 +217,29 @@ const LabTestMedipedia = () => {
>
{test.description}
</p>
<button
className={`inline-block px-6 py-2 border ${dark === 'dark' ? 'border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-gray-900' : 'border-gray-700 text-gray-700 hover:bg-blue-600 hover:text-white'} transition-all duration-300 text-base rounded-[5px]`}
>
Read more
</button>
<div className="flex justify-between items-center mt-5 pt-4 border-t border-gray-700">
<span

<div className="flex justify-between items-center">
<p>{test.cost}</p>
<p>{test.reportTime}</p>
</div>
<div className="flex justify-between items-center mt-3 pt-2 border-t border-gray-700">
{/* <span
className={`text-sm ${dark === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}
>
<i className="fas fa-calendar text-blue-600 pr-2"></i> get
report within {test.reportTime}
</span> */}
<span
className={`text-sm ${dark === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}
>
<Rating
name="read-only"
value={test.rating}
sx={{
'& .MuiRating-iconFilled': { color: '#FFD700' },
'& .MuiRating-iconEmpty': { color: '#FFD700' },
}}
/>
</span>
<span
className={`text-sm ${dark === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}
Expand All @@ -232,18 +248,24 @@ const LabTestMedipedia = () => {
Med-Space
</span>
</div>
<button
onClick={() => navigate('/hospitals-around')}
className={`inline-block px-6 py-2 border ${dark === 'dark' ? 'border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-gray-900' : 'border-gray-700 mt-3 pt-2 text-gray-700 hover:bg-blue-600 hover:text-white'} transition-all duration-300 text-base rounded-[5px]`}
>
Read more
</button>
</div>
</div>
))}
</div>

{currentItem < tests.length && (
<div
<button
className={`inline-block mt-8 px-8 py-4 border ${dark === 'dark' ? 'border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-gray-900' : 'border-gray-700 text-gray-700 hover:bg-blue-600 hover:text-white'} cursor-pointer rounded-[5px] transition-all duration-300 text-base`}
onClick={loadMore}
>
Load more
</div>
</button>
)}
</div>
<Footer />
Expand Down

0 comments on commit a13c146

Please sign in to comment.