portfolio/src/app/legacy/page.tsx

/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
/* eslint-disable react/no-multi-comp */
"use client";
import Image from "next/image";
import { useState, type JSX } from "react";
import { CharacterComponent } from "../../components/character";
import { Characters } from "../../config/Legacy";

const HorizontalConnector = ({
  colour,
}: {
  readonly colour: string;
}): JSX.Element => {
  return (
    <div className="w-full h-1 m-auto" style={{ background: colour }}></div>
  );
};

const TopToRightConnector = ({
  colour,
}: {
  readonly colour: string;
}): JSX.Element => {
  return (
    <div className="w-full h-full grid grid-cols-2">
      <div
        className="w-full h-full m-auto"
        style={{ borderRight: `2px solid ${colour}` }}
      ></div>
      <div
        className="w-full h-full m-auto"
        style={{
          borderBottom: `2px solid ${colour}`,
          borderLeft:   `2px solid ${colour}`,
        }}
      ></div>
      <div className="w-full h-full m-auto"></div>
      <div
        className="w-full h-full m-auto"
        style={{ borderTop: `2px solid ${colour}` }}
      ></div>
    </div>
  );
};

const TopToLeftConnector = ({
  colour,
}: {
  readonly colour: string;
}): JSX.Element => {
  return (
    <div className="w-full h-full grid grid-cols-2">
      <div
        className="w-full h-full m-auto"
        style={{
          borderBottom: `2px solid ${colour}`,
          borderRight:  `2px solid ${colour}`,
        }}
      ></div>
      <div
        className="w-full h-full m-auto"
        style={{ borderLeft: `2px solid ${colour}` }}
      ></div>
      <div
        className="w-full h-full m-auto"
        style={{ borderTop: `2px solid ${colour}` }}
      ></div>
      <div className="w-full h-full m-auto"></div>
    </div>
  );
};

const TopToRightToBottomConnector = ({
  colour,
}: {
  readonly colour: string;
}): JSX.Element => {
  return (
    <div className="w-full h-full grid grid-cols-2">
      <div
        className="w-full h-full m-auto"
        style={{ borderRight: `2px solid ${colour}` }}
      ></div>
      <div
        className="w-full h-full m-auto"
        style={{
          borderBottom: `2px solid ${colour}`,
          borderLeft:   `2px solid ${colour}`,
        }}
      ></div>
      <div
        className="w-full h-full m-auto"
        style={{ borderRight: `2px solid ${colour}` }}
      ></div>
      <div
        className="w-full h-full m-auto"
        style={{
          borderLeft: `2px solid ${colour}`,
          borderTop:  `2px solid ${colour}`,
        }}
      ></div>
    </div>
  );
};

/**
 * Renders the /legacy page.
 * @returns A React Component.
 */
const Legacy = (): JSX.Element => {
  const [ focused, setFocused ] = useState("naomi-carrigan");

  const handleClick = (id: string) => {
    return (): void => {
      setFocused(id);
    };
  };

  return (
    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <h1 className="text-5xl">{`The Carrigan Legacy`}</h1>
      <section>
        <Image alt="Nine anime-style female characters with diverse colorful outfits including dresses, crop tops, skirts, and pants, posing together against a light background, some making peace signs or pointing at the viewer" height="1080" src={`https://cdn.nhcarrigan.com/characters/landscape/legacy.png`} width="1920"></Image>
        <p className="mt-2">
          {`This page serves to show off all of our characters, who are all part of the same family (and thus, the same legacy).`}
        </p>
        <p>{`Click on a character to learn more about them!`}</p>
        <div className="grid grid-cols-6">
          <CharacterComponent
            focused={focused === "naomi-carrigan"}
            id={"naomi-carrigan"}
            onClick={handleClick("naomi-carrigan")}
          />
          <HorizontalConnector colour="pink" />
          <CharacterComponent
            focused={focused === "melody-iuvo"}
            id={"melody-iuvo"}
            onClick={handleClick("melody-iuvo")}
          />
          <HorizontalConnector colour="green" />
          <CharacterComponent
            focused={focused === "aria-iuvo"}
            id={"aria-iuvo"}
            onClick={handleClick("aria-iuvo")}
          />
          <div></div>
          <TopToRightToBottomConnector colour="blue" />
          <CharacterComponent
            focused={focused === "becca-lyria"}
            id={"becca-lyria"}
            onClick={handleClick("becca-lyria")}
          />
          <HorizontalConnector colour="pink" />
          <CharacterComponent
            focused={focused === "rosalia-nightsong"}
            id={"rosalia-nightsong"}
            onClick={handleClick("rosalia-nightsong")}
          />
          <TopToRightConnector colour="blue" />
          <CharacterComponent
            focused={focused === "cordelia-taryne"}
            id={"cordelia-taryne"}
            onClick={handleClick("cordelia-taryne")}
          />
          <CharacterComponent
            focused={focused === "gwen-carrigan"}
            id={"gwen-carrigan"}
            onClick={handleClick("gwen-carrigan")}
          />
          <div></div>
          <div></div>
          <CharacterComponent
            focused={focused === "maylin-taryne"}
            id={"maylin-taryne"}
            onClick={handleClick("maylin-taryne")}
          />
          <HorizontalConnector colour="blue" />
          <TopToLeftConnector colour="blue" />
        </div>
      </section>
      <section>
        <h2 className="text-2xl">{Characters[focused]?.name}</h2>
        <Image alt={Characters[focused]?.alt ?? "Image"} height="1080" src={`https://cdn.nhcarrigan.com/characters/landscape/${focused}.png`} width="1920"></Image>
        <p><strong>{Characters[focused]?.class}</strong>{" - "}<span className="italic">{`${Characters[focused]?.age.toString() ?? "unknown"} years old`}</span> </p>
        <h3 className="text-xl">{`Biography`}</h3>
        <div className="text-justify">
          <p>{Characters[focused]?.bio.join(" ")}</p>
        </div>
        <h3 className="text-xl">{`Combat Profile`}</h3>
        <div className="text-justify">
          <p>{Characters[focused]?.combat.join(" ")}</p>
        </div>
      </section>
    </main>
  );
};

export default Legacy;