drfeely.com/website/app/views/components/AcademicAppts.tsx

"use client";
import Button from "@/components/Button";
import Card from "@/components/Card";
import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
import midwesternLogo from "@/public/content/midwestern_college.png";
import tuoroLogo from "@/public/content/tuoro_university.png";
import atStillLogo from "@/public/content/at_still.svg";
import westernULogo from "@/public/content/western_university.png";
import cranialLogo from "@/public/content/osteopathic_cranial_academy.png";
import aaoLogo from "@/public/content/aao.webp";
import Image from "next/image";

interface Props {
  className?: string;
}

const AcademicAppts = ({ className }: Props) => {
  const cardYearsStyle = "italic my-2";
  const cardPositionStyle = "font-bold my-2";
  const logoStyle = "h-32 w-auto";

  const [showAll, setShowAll] = useState(false);

  return (
    <div className={className}>
      <h2>Academic Appointments</h2>
      <div className="flex flex-col-reverse md:flex-row">
        <div className="flex flex-col gap-4 md:basis-1/2">
          <Card>
            <h2>
              Midwestern University
              <br />
              Chicago College of Osteopathic Medicine
            </h2>
            <div className={cardYearsStyle}>1998-Present</div>
            <div className={cardPositionStyle}>
              Clinical Associate Professor of Osteopathic Manipulative Medicine
            </div>
          </Card>

          <Card>
            <h2>
              Tuoro University
              <br />
              College of Osteopathic Medicine
            </h2>
            <div className={cardYearsStyle}>2018-2020</div>
            <div className={cardPositionStyle}>Adjunct Associate Professor</div>
          </Card>

          <Card>
            <h2>A.T. Still University</h2>
            <div className={cardYearsStyle}>2010-2018</div>
            <div className={cardPositionStyle}>Adjunct Associate Professor</div>
          </Card>
          {showAll ? (
            <>
              <Card>
                <h2>
                  Western University
                  <br />
                  College Osteopathic Medicine
                </h2>
                <div className={cardYearsStyle}>2007-2017</div>
                <div className={cardPositionStyle}>
                  Adjunct Associate Professor of Osteopathic Manipulative
                  Acupuncture
                </div>
              </Card>

              <Card>
                <h2>The Osteopathic Cranial Academy</h2>
                <div className={cardYearsStyle}>1992-1994</div>
                <div className={cardPositionStyle}>33rd President</div>
              </Card>

              <Card>
                <h2>American Academy of Osteopathy</h2>
                <div className={cardYearsStyle}>2010-2011</div>
                <div className={cardPositionStyle}>63rd President</div>
              </Card>
            </>
          ) : (
            <></>
          )}
        </div>
        <div className="hidden flex-col items-center justify-center gap-32 md:flex md:basis-1/2">
          <Image
            className={logoStyle + " !h-40"}
            src={midwesternLogo}
            alt="Midwestern university logo"
          />
          <Image
            className={logoStyle}
            src={tuoroLogo}
            alt="Tuoro university logo"
          />
          <Image
            className={logoStyle + " !h-20"}
            src={atStillLogo}
            alt="AT Still Univeristy logo"
          />
          {showAll ? (
            <>
              <Image
                className={logoStyle}
                src={westernULogo}
                alt="Western university logo"
              />
              <Image
                className={logoStyle + " !h-20"}
                src={cranialLogo}
                alt="Osteopathic Cranial academy logo"
              />
              <Image
                className={logoStyle}
                src={aaoLogo}
                alt="American Academy of osteopathy logo"
              />
            </>
          ) : (
            <></>
          )}
        </div>
      </div>
      <div className="mt-12 flex justify-center">
        {showAll ? (
          <Button onClick={() => setShowAll((e) => !e)}>
            Show Less <ArrowUpIcon className="inline w-[24px]" />
          </Button>
        ) : (
          <Button onClick={() => setShowAll((e) => !e)}>
            Show More <ArrowDownIcon className="inline w-[24px]" />
          </Button>
        )}
      </div>
    </div>
  );
};

export default AcademicAppts;