39 lines
1.7 KiB
JavaScript
39 lines
1.7 KiB
JavaScript
'use client'
|
|
import { useState } from "react";
|
|
|
|
export default function ClinicalAreasGrid() {
|
|
const areas = [
|
|
{ name: "Cardiovascular", icon: "/images/icons/cardio.png" },
|
|
{ name: "Dermatology", icon: "/images/icons/dermatology.png" },
|
|
{ name: "Dysmorphology", icon: "/images/icons/dysmorphology.png" },
|
|
{ name: "Ear, Nose, and Throat", icon: "/images/icons/ent.png" },
|
|
{ name: "Endocrinology", icon: "/images/icons/endocrinology.png" },
|
|
{ name: "Hematology", icon: "/images/icons/hematology.png" },
|
|
{ name: "Immunology", icon: "/images/icons/immunology.png" },
|
|
{ name: "Metabolic Disorders", icon: "/images/icons/metabolic.png" },
|
|
{ name: "Nephrology", icon: "/images/icons/nephrology.png" },
|
|
{ name: "Neurology", icon: "/images/icons/neurology.png" },
|
|
{ name: "Ophthalmology", icon: "/images/icons/ophthalmology.png" },
|
|
{ name: "Osteology", icon: "/images/icons/osteology.png" },
|
|
{ name: "Pneumology", icon: "/images/icons/pneumology.png" },
|
|
{ name: "Reproductive Health", icon: "/images/icons/reproductive.png" },
|
|
];
|
|
|
|
return (
|
|
<section className="mx-auto px-8 py-8">
|
|
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
|
|
<div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{areas.map((area, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center gap-3 rounded-lg p-4 shadow-sm"
|
|
style={{ backgroundColor: '#f2fcfc' }}
|
|
>
|
|
<img src={area.icon} alt={area.name} className="w-6 h-6" />
|
|
<span className="text-gray-600 leading-relaxed text-base">{area.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |