niisse-net-js/src/components/home/Changelog.tsx

import ContentCard from "@/components/ContentCard";
import NewsItem from "@/components/home/NewsItem";
import Link from "next/link";
import { LogItem } from "../../../lib/log-item";


export default function Changelog(props: { changelogData: LogItem[] }) {
  return (
    <ContentCard outerClass={"col-span-1"} innerClass={"!shadow-red-500"}>
      <div className="h-full grid grid-rows-[auto_1fr_auto] content-start whitespace-nowrap ">

        <div>
          <h2> {'< What\'s new? >'} </h2>
          <hr />
        </div>
        <div>
          <ul className="list-disc list-inside mr-7 marker:font-ibm marker:text-red-400 ">

            {
              props.changelogData.map((log, index) => {
                let mostRecent = index == 0 ? true : false;

                return (
                  <li key={log.id}>
                    <NewsItem
                      date={log.date}
                      title={log.title}
                      color={mostRecent ? 'text-white' : 'text-red-300'}
                      link={[log.link, log.linkName]}
                      mostRecent={mostRecent} />
                  </li>
                )
              })
            }

            {/* <li><NewsItem date={"'23-06-30"} title={"Test Title"} color={"text-white"} */}
            {/*   link={["", "link"]} mostRecent /></li> */}
            {/* <li><NewsItem date={"'23-06-27"} title={"Test Title Something"} color={"text-red-300"} */}
            {/*   link={["", "link"]} /></li> */}
            {/* <li><NewsItem date={"'23-06-25"} title={"Test Title Lorum"} color={"text-red-400"} */}
            {/*   link={["", "link"]} /></li> */}
            {/* <li><NewsItem date={"'23-06-23"} title={"Test Title Ipsum"} color={"text-red-500"} */}
            {/*   link={["", "link"]} /></li> */}
            {/* <li><NewsItem date={"'23-06-21"} title={"Test Title Weird, really"} color={"text-red-600"} */}
            {/*   link={["", "link"]} /></li> */}
          </ul>
        </div>

        <div>
          <hr />
          <div>
            {'//'} For more, head over to the <Link href="">changelog</Link>
          </div>
        </div>
      </div>

    </ContentCard>
  )
}