drfeely.com/app/views/components/Edu.tsx
2023-10-20 14:25:25 -05:00

66 lines
2.2 KiB
TypeScript

import ImageCard from "@/components/ImageCard";
import atStillU from "@/public/content/at_still_university.jpg";
import davenportHospital from "@/public/content/davenport_hospital.png";
import trumanState from "@/public/content/truman-state.jpeg";
import { default as Image } from "next-image-export-optimizer";
interface Props {
className?: string;
}
const Edu = ({ className }: Props) => {
const eduImgDims = "h-full w-full object-cover";
const eduImgWrapperStyle = "h-32 md:h-56 overflow-hidden";
const eduTextWrapperStyle = "m-10 mt-7";
return (
<div className={className}>
<h2>Schooling</h2>
<div className="">
<div className="flex flex-col gap-4 md:flex-row">
<ImageCard className="basis-1/3">
<div className={eduImgWrapperStyle}>
<Image
src={trumanState}
alt="Truman state university"
className={eduImgDims}
/>
</div>
<div className={eduTextWrapperStyle}>
<h2>Truman State University</h2>
<div>B.S. - Zoology/Chemistry</div>
</div>
</ImageCard>
<ImageCard className="basis-1/3">
<div className={eduImgWrapperStyle}>
<Image
src={atStillU}
alt="A.T. Still university"
className={eduImgDims}
/>
</div>
<div className={eduTextWrapperStyle}>
<h2>A.T. Still University</h2>
<strong>Kirksville College of Osteopathic Medicine</strong>
<div>Doctor of Osteopathy</div>
</div>
</ImageCard>
<ImageCard className="basis-1/3">
<div className={eduImgWrapperStyle}>
<Image
src={davenportHospital}
alt="Davenport osteopathic hospital"
className={eduImgDims}
/>
</div>
<div className={eduTextWrapperStyle}>
<h2>Davenport Osteopathic Hospital</h2>
<div>Rotating Internship Training Program</div>
</div>
</ImageCard>
</div>
</div>
</div>
);
};
export default Edu;