Add News page content from Contentful

src/app/news/page.tsx

@@ -1,15 +1,21 @@
 import Container from "@/components/layout/container";
 import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
+import NewsList from "@/components/news/list";
 import PageHeader from "@/components/page-header";
 
 export default function Homepage() {
   return (
     <div className="">
       <Header />
       <MainWrapper>
-        <PageHeader title="News and Events" description="Something here" />
-        <Container>asdf</Container>
+        <PageHeader
+          title="News and Events"
+          description="Keep up with the latest news and events in the Hyku ecosystem"
+        />
+        <Container>
+          <NewsList />
+        </Container>
       </MainWrapper>
     </div>
   );

src/components/features/implementations.tsx

@@ -6,7 +6,7 @@ import useGetContentfulData from "@/hooks/use-get-contentful-data";
 
 export default function Implementations() {
   const data = useGetContentfulData("integration");
-  console.log("data", data);
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
       {data &&

src/components/news/list.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import RichTextContent from "../rich-text-content";
+import { UserGroupIcon } from "@heroicons/react/20/solid";
+import { formatDate } from "@/lib/format-date";
+import useGetContentfulData from "@/hooks/use-get-contentful-data";
+
+export default function NewsList() {
+  const data = useGetContentfulData("newsItem");
+  console.log("data", data);
+
+  return (
+    <div className="">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl">
+          <div className="space-y-16 border-t border-gray-200 pt-10 sm:pt-16">
+            {data.map(({ fields, sys }: { fields: any; sys: any }) => (
+              <article
+                key={sys.id}
+                className="flex max-w-xl flex-col items-start justify-between"
+              >
+                <div className="flex items-center gap-x-4 text-xs">
+                  <time
+                    dateTime={fields.publishDate}
+                    className="text-foreground-muted"
+                  >
+                    {formatDate(fields.publishDate)}
+                  </time>
+                  <span className="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">
+                    {fields.title}
+                  </span>
+                </div>
+                <div className="group relative">
+                  <h3 className="mt-3 text-lg font-semibold leading-6 text-foreground group-hover:text-gray-600">
+                    {/* <span className="absolute inset-0" /> */}
+                    {fields.title}
+                  </h3>
+                  <RichTextContent content={fields.content} />
+                </div>
+                <div className="relative mt-8 flex items-center gap-x-4">
+                  <UserGroupIcon className="h-10 w-auto rounded-full bg-gray-50 text-gray-400" />
+                  <div className="text-sm leading-6">
+                    <p className="font-semibold ">
+                      <span>
+                        <span className="absolute inset-0" />
+                        {fields.author}
+                      </span>
+                    </p>
+                    <p className="text-foreground-muted">Hyku Administrator</p>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/format-date.ts

@@ -0,0 +1,7 @@
+export function formatDate(date: string) {
+  return new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}