image card component

CDCgov · Nov 26, 2024 · 0a1fa6c · 0a1fa6c
1 parent 51bc3e7
commit 0a1fa6c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 27 deletions.
diff --git a/public/images/homepage-1.jpeg b/public/images/homepage-1.jpeg
diff --git a/src/app/components/ImageCard/ImageCard.tsx b/src/app/components/ImageCard/ImageCard.tsx
@@ -0,0 +1,42 @@
+import Image from 'next/image';
+
+interface ImageCardProps {
+  imageUrl: string;
+  imageAlt: string;
+  children: React.ReactNode;
+  imageFirst?: boolean;
+  imageWidth?: number;
+  imageHeight?: number;
+}
+
+export function ImageCard({
+  imageUrl,
+  imageAlt,
+  children,
+  imageFirst = true,
+  imageWidth = 0,
+  imageHeight = 0,
+}: ImageCardProps) {
+  return (
+    <div className="image-card grid grid-cols-1 justify-items-center gap-4 xl:grid-cols-[1fr_2fr] xl:justify-items-start xl:gap-14">
+      <div
+        className={`image-box h-[100%] w-[30rem] overflow-hidden ${
+          imageFirst ? 'order-1' : 'order-1 xl:order-2'
+        }`}
+      >
+        <Image
+          className="h-full w-full object-cover"
+          src={imageUrl}
+          width={imageWidth}
+          height={imageHeight}
+          alt={imageAlt}
+        />
+      </div>
+      <div
+        className={`text-box order-2 flex flex-col gap-5 ${imageFirst ? '' : 'xl:order-1'}`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,6 +7,7 @@ import { ContentContainer } from './components/ContentContainer/ContentContainer
 import { LinkButton } from './components/LinkButton/LinkButton';
 import { useHeroInit } from './hooks/useHeroInit';
 import { homePageHero, homeContent } from './data/home';
+import { ImageCard } from './components/ImageCard/ImageCard';
 
 export default function Home() {
   useHeroInit(homePageHero);
@@ -23,34 +24,28 @@ export default function Home() {
 function DibbsSection() {
   return (
     <ContentContainer align>
-      <div className="image-card grid grid-cols-1 justify-items-center gap-4 xl:grid-cols-[1fr_2fr] xl:justify-items-start xl:gap-14">
-        <div className="image-box order-1">
-          <Image
-            className="xl:max-h-[20rem] xl:max-w-[30rem]"
-            src={`${basePath}/images/placeholder.png`}
-            width={480}
-            height={410}
-            alt="Placeholder"
-          />
-        </div>
-        <div className="text-box order-2 flex flex-col gap-5">
-          <h2 className="min-w-full text-center text-[1.5rem] font-bold text-[#224a58] xl:text-left xl:text-[2rem]">
-            Introducing Data Integration Building Blocks
-          </h2>
-          <div className="flex flex-col gap-2">
-            <p className="m-0 max-w-[39.7rem] p-0 text-base font-normal leading-relaxed text-[#224a58]">
-              {homeContent.dibbs.description}
-            </p>
-            <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
-              {homeContent.dibbs.benefits.map((benefit, index) => (
-                <li className="min-w-full" key={`benefit-${index}`}>
-                  {benefit}
-                </li>
-              ))}
-            </ul>
-          </div>
+      <ImageCard
+        imageUrl={`${basePath}/images/homepage-1.jpeg`}
+        imageAlt=""
+        imageHeight={1047}
+        imageWidth={2000}
+      >
+        <h2 className="min-w-full text-center text-[1.5rem] font-bold text-[#224a58] xl:text-left xl:text-[2rem]">
+          Introducing Data Integration Building Blocks
+        </h2>
+        <div className="flex flex-col gap-2">
+          <p className="m-0 max-w-[39.7rem] p-0 text-base font-normal leading-relaxed text-[#224a58]">
+            {homeContent.dibbs.description}
+          </p>
+          <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
+            {homeContent.dibbs.benefits.map((benefit, index) => (
+              <li className="min-w-full" key={`benefit-${index}`}>
+                {benefit}
+              </li>
+            ))}
+          </ul>
         </div>
-      </div>
+      </ImageCard>
     </ContentContainer>
   );
 }