drfeely.com/website/app/views/components/ProExp.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 feelyCenterLogo from "@/public/content/feelycenter.png";
import ommTestsLogo from "@/public/content/omm_logo.png";
import tcmmTestsLogo from "@/public/content/tcm_tests.png";
import womack from "@/public/content/womack.png";
import tivity from "@/public/content/tivity.png";
import Image from "next/image";

interface Props {
  className?: string;
}

const ProExp = ({ 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>Professional Experience</h2>
      <div className="flex flex-col-reverse md:flex-row">
        <div className="hidden flex-col items-center justify-center gap-32 md:flex md:basis-1/2">
          <Image
            className={logoStyle}
            src={feelyCenterLogo}
            alt="Feely center logo"
          />
          <Image
            className={logoStyle + " !h-20"}
            src={ommTestsLogo}
            alt="OMM tests logo"
          />
          <Image
            className={logoStyle}
            src={tcmmTestsLogo}
            alt="TCM tests logo"
          />
          {showAll ? (
            <>
              <Image
                className={logoStyle + " !h-24"}
                src={tivity}
                alt="Tivity health logo"
              />
              <Image
                className={logoStyle + " !h-48"}
                src={womack}
                alt="Womack logo logo"
              />
            </>
          ) : (
            <></>
          )}
        </div>
        <div className="flex flex-col gap-4 md:basis-1/2">
          <Card>
            <h2>Feely Center for Optimal Health</h2>
            <div className={cardYearsStyle}>2000-Present</div>
            <div className={cardPositionStyle}>President</div>
            <div>
              A private osteopathic integrative medical practice with locations
              in Chicago and Olympia Fields, IL
            </div>
          </Card>
          <Card>
            <h2>OMM, LLC</h2>
            <div className={cardYearsStyle}>2010-Present</div>
            <div className={cardPositionStyle}>President</div>
            <div>
              Created{" "}
              <a href="https://www.ommtests.com" className="underline">
                ommtests.com
              </a>
              , the most complete web-based OMM/OMT test prep program.
            </div>
          </Card>
          <Card>
            <h2>TCMtests, LLC</h2>
            <div className={cardYearsStyle}>2003-Present</div>
            <div className={cardPositionStyle}>Founder and President</div>
            <div>
              Created{" "}
              <a href="https://www.tcmtests.com" className="underline">
                tcmtests.com
              </a>
              , the leading online board certification test prep site for
              Acupuncturist and Oriental Medical Doctors
            </div>
          </Card>
          {showAll ? (
            <>
              <Card>
                <h2>Tivity Health</h2>
                <div className={cardYearsStyle}>2019-Present</div>
                <div className={cardPositionStyle}>MD/DO Peer Reviewer</div>
                <div>
                  Peer Reviewer in Utilization Review Management at a large
                  provider of health improvement at fitness solutions, based in
                  Franlin, TN
                </div>
              </Card>
              <Card>
                <h2>Womack Investment Advisers</h2>
                <div className={cardYearsStyle}>2009-Present</div>
                <div className={cardPositionStyle}>
                  Registered Investment Adviser
                </div>
                <div>
                  Investment adviser at a prominent finacial planning and wealth
                  management firm in Edmond, Oklahoma.
                </div>
              </Card>
              <Card>
                <h2>American WholeHealth</h2>
                <div className={cardYearsStyle}>1999-2000</div>
                <div className={cardPositionStyle}>
                  National Director of Quality Management
                </div>
                <div></div>
              </Card>
            </>
          ) : (
            <></>
          )}
        </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 ProExp;