/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { ArtComponent } from "../../components/art";
import { Rule } from "../../components/rule";
import { Art } from "../../config/Art";
import type { JSX } from "react";

/**
 * Renders the /art page.
 * @returns A React Component.
 */
const Arts = (): JSX.Element => {
  return (
    <main
      className="w-[95%] text-center
      max-w-4xl mx-auto mt-16 rounded-lg"
    >
      <h1 className="text-5xl">{`Art`}</h1>
      <section>
        <p className="mb-2">{`See various art depicting Naomi.`}</p>
        <Rule />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
          {Art.toSorted((a, b) => {
            return a.name.localeCompare(b.name);
          }).map((art) => {
            return (
              <ArtComponent
                alt={art.alt}
                artist={art.artist}
                img={art.img}
                key={art.name}
                name={art.name}
                url={art.url}
              />
            );
          })}
        </div>
      </section>
    </main>
  );
};

export default Arts;