refactor

CDCgov · Nov 27, 2024 · 709ee07 · 709ee07
1 parent f0ccfd1
commit 709ee07
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 61 deletions.
diff --git a/src/app/components/ImageCard/ImageCard.tsx b/src/app/components/ImageCard/ImageCard.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { type CSSProperties, memo } from 'react';
+import { type CSSProperties } from 'react';
 import { Container, ImageContainer, TextContainer } from './_ui';
 
 interface ImageCardProps {
@@ -10,27 +10,25 @@ interface ImageCardProps {
   imageStyle?: CSSProperties;
 }
 
-export const ImageCard = memo(function ImageCard({
+export const ImageCard = ({
   imageUrl,
   imageAlt,
   children,
   imageFirst = true,
   imageStyle = {},
-}: ImageCardProps) {
-  return (
-    <Container imageFirst={imageFirst}>
-      <ImageContainer imageFirst={imageFirst}>
-        <Image
-          className="h-full w-full object-cover"
-          src={imageUrl}
-          width={0}
-          height={0}
-          alt={imageAlt}
-          style={imageStyle}
-          priority={true}
-        />
-      </ImageContainer>
-      <TextContainer imageFirst={imageFirst}>{children}</TextContainer>
-    </Container>
-  );
-});
+}: ImageCardProps) => (
+  <Container imageFirst={imageFirst}>
+    <ImageContainer imageFirst={imageFirst}>
+      <Image
+        className="h-full w-full object-cover"
+        src={imageUrl}
+        width={0}
+        height={0}
+        alt={imageAlt}
+        style={imageStyle}
+        priority={true}
+      />
+    </ImageContainer>
+    <TextContainer imageFirst={imageFirst}>{children}</TextContainer>
+  </Container>
+);
diff --git a/src/app/components/ImageCard/_ui/index.tsx b/src/app/components/ImageCard/_ui/index.tsx
@@ -6,11 +6,10 @@ interface ContainerProps {
   imageFirst?: boolean;
 }
 
-function Container({ children, imageFirst = true }: ContainerProps) {
-  let imageFirstClass = 'xl:grid-cols-[1fr_2fr]';
-  if (!imageFirst) {
-    imageFirstClass = 'xl:grid-cols-[2fr_1fr]';
-  }
+export const Container = ({ children, imageFirst = true }: ContainerProps) => {
+  const imageFirstClass = imageFirst
+    ? 'xl:grid-cols-[1fr_2fr]'
+    : 'xl:grid-cols-[2fr_1fr]';
 
   return (
     <div
@@ -23,45 +22,32 @@ function Container({ children, imageFirst = true }: ContainerProps) {
       {children}
     </div>
   );
-}
+};
 
-function ImageContainer({
-  children,
-  imageFirst = true,
-}: {
+interface ChildrenProps {
   children: React.ReactNode;
   imageFirst: boolean;
-}) {
-  return (
-    <div
-      className={classNames(
-        imageFirst ? styles.imageContainer : styles['image-box-reverse'],
-        'image-box h-full w-[30rem] overflow-hidden',
-        imageFirst ? 'order-1' : 'order-1 xl:order-2',
-      )}
-    >
-      {children}
-    </div>
-  );
 }
 
-function TextContainer({
-  children,
-  imageFirst = true,
-}: {
-  children: React.ReactNode;
-  imageFirst: boolean;
-}) {
-  return (
-    <div
-      className={classNames(
-        'text-box order-2 flex flex-col gap-5 pb-10 pt-10',
-        imageFirst ? '' : 'xl:order-1 xl:pl-10',
-      )}
-    >
-      {children}
-    </div>
-  );
-}
+export const ImageContainer = ({ children, imageFirst }: ChildrenProps) => (
+  <div
+    className={classNames(
+      imageFirst ? styles.imageContainer : styles['image-box-reverse'],
+      'image-box h-full w-[30rem] overflow-hidden',
+      imageFirst ? 'order-1' : 'order-1 xl:order-2',
+    )}
+  >
+    {children}
+  </div>
+);
 
-export { Container, ImageContainer, TextContainer };
+export const TextContainer = ({ children, imageFirst }: ChildrenProps) => (
+  <div
+    className={classNames(
+      'text-box order-2 flex flex-col gap-5 pb-10 pt-10',
+      imageFirst ? '' : 'xl:order-1 xl:pl-10',
+    )}
+  >
+    {children}
+  </div>
+);