Description List 2

type ListItem = {
  title: string;
  value: string;
};

type Props = {
  title: string;
  description: string;
  listItems: ListItem[][];
};

export type DescriptionList2Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const DescriptionList2 = (props: DescriptionList2Props) => {
  const { title, description, listItems } = {
    ...DescriptionList2Defaults,
    ...props,
  };

  return (
    <section className="border border-scheme-border p-8">
      <div className="pb-5 md:pb-6">
        <h1 className="text-h5 font-bold">{title}</h1>
        <p className="mt-2">{description}</p>
      </div>
      <div className="grid grid-cols-1 border-t border-scheme-border">
        {listItems.map((itemPair, index) => (
          <div
            key={index}
            className="grid auto-cols-fr grid-cols-1 gap-6 border-b border-scheme-border py-6 sm:grid-flow-col"
          >
            {itemPair.map((item, subIndex) => (
              <div key={subIndex}>
                <p className="mb-2 font-semibold">{item.title}</p>
                <p className="w-full max-w-lg">{item.value}</p>
              </div>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
};

export const DescriptionList2Defaults: Props = {
  title: "Account",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
  listItems: [
    [
      { title: "Full name", value: "Name Surname" },
      { title: "Website", value: "www.relume.io" },
    ],
    [
      {
        title: "About",
        value:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
      },
    ],
    [
      { title: "Email address", value: "hello@relume.io" },
      { title: "Password", value: "*******" },
    ],
    [{ title: "Language", value: "English" }],
  ],
};