make blog snippet component/UI

src/app/orgs/[orgId]/page.tsx

@@ -4,6 +4,7 @@ import { getOrgLandingpage } from '@/controllers/controllers';
 import { CardRow } from '@/components/Card/CardRow';
 import { Card } from '@/components/Card/Card';
 import { RoleObj } from '@/api/cf/cloudfoundry-types';
+import { BlogSnippet } from '@/components/BlogSnippet/BlogSnippet';
 import peopleIcon from '@/../public/img/uswds/usa-icons/people.svg';
 
 export default async function OrgLandingPage() {
@@ -25,10 +26,15 @@ export default async function OrgLandingPage() {
 
   return (
     <div className="margin-bottom-5">
-      <h1>Welcome to the Dashboard. Let’s get started.</h1>
+      <h1 className="margin-bottom-4 font-sans-lg mobile-lg:font-sans-xl">
+        Welcome to the Dashboard. Let’s get started.
+      </h1>
       <CardRow>
         {showManageUsers && (
-          <Card className="display-flex flex-column flex-justify">
+          <Card
+            className="display-flex flex-column flex-justify"
+            containerClassname="tablet-lg:grid-col-8"
+          >
             <div>
               <h2 className="margin-top-0">
                 <Image
@@ -39,7 +45,7 @@ export default async function OrgLandingPage() {
                 />
                 Users
               </h2>
-              <p>
+              <p className="font-sans-md">
                 View the <strong>{usersText()}</strong> in your organization,
                 manage their permissions, and control their access to Spaces.
               </p>
@@ -52,9 +58,7 @@ export default async function OrgLandingPage() {
           </Card>
         )}
         <li className="tablet:grid-col-6 tablet-lg:grid-col-4 margin-bottom-3">
-          <h2 className="margin-top-0 text-light">
-            Here’s the latest from <strong>the Cloud.gov blog</strong>:
-          </h2>
+          <BlogSnippet />
         </li>
       </CardRow>
     </div>

src/app/prototype/blog/page.tsx

@@ -0,0 +1,9 @@
+import { BlogSnippet } from '@/components/BlogSnippet/BlogSnippet';
+
+export default async function PrototypeBlogPage() {
+  return (
+    <>
+      <BlogSnippet />
+    </>
+  );
+}

src/components/BlogSnippet/BlogSnippet.tsx

@@ -0,0 +1,45 @@
+import { getBlogFeed, BlogObj } from '@/api/blog/blog';
+import { formatDate } from '@/helpers/dates';
+import Link from 'next/link';
+import Image from 'next/image';
+
+export async function BlogSnippet() {
+  try {
+    const blog = (await getBlogFeed()) as BlogObj;
+    const post = blog.feed.entry[0];
+    const title = post.title._text;
+    const pubDate = formatDate(post.published._text).toUpperCase();
+    const link = post.id._text;
+    const summary = post.summary._cdata;
+
+    return (
+      <div>
+        <h2 className="margin-top-0 text-light">
+          Here’s the latest from <strong>the Cloud.gov blog</strong>:
+        </h2>
+        <div className="display-flex">
+          <Image
+            src="/img/blog_img.png"
+            width={120}
+            height={80}
+            alt=""
+            className="margin-right-2"
+          />
+          <h3 className="margin-top-1">
+            <Link href={link} target="_blank">
+              {title}
+            </Link>
+          </h3>
+        </div>
+        <p>
+          {pubDate} — {summary}{' '}
+          <Link href={link} target="_blank">
+            Read more »
+          </Link>
+        </p>
+      </div>
+    );
+  } catch (error: any) {
+    return <div>Blog not available</div>;
+  }
+}

src/components/Card/Card.tsx

@@ -3,17 +3,23 @@ import classNames from 'classnames';
 
 export function Card({
   children,
+  containerClassname,
   className,
 }: {
   children: React.ReactNode;
   className?: string;
+  containerClassname?: string;
 }) {
+  const containerClasses = classNames(
+    'tablet:grid-col-6 tablet-lg:grid-col-4 margin-bottom-3',
+    containerClassname
+  );
   const cardClasses = classNames(
     'bg-white border border-gray-cool-20 radius-md padding-2 tablet-lg:padding-3 minh-card-lg',
     className
   );
   return (
-    <li className="tablet:grid-col-6 tablet-lg:grid-col-4 margin-bottom-3">
+    <li className={containerClasses}>
       <div className={cardClasses}>{children}</div>
     </li>
   );