make rounded background its own component, use it in engage with us

CDCgov · Dec 9, 2024 · d135526 · d135526
1 parent b8b87f2
commit d135526
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/src/app/components/RoundedBackground/RoundedBackground.tsx b/src/app/components/RoundedBackground/RoundedBackground.tsx
@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+
+interface RoundedBackgroundProps extends React.ComponentProps<'div'> {
+  children: React.ReactNode;
+}
+
+export const RoundedBackground = ({
+  children,
+  className,
+  ...props
+}: RoundedBackgroundProps) => {
+  return (
+    <div
+      {...props}
+      className={classNames(
+        'rounded-br-[2.5rem] rounded-tl-[2.5rem] border-2 border-[#82b4c9] bg-white/50',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
@@ -9,7 +9,7 @@ import {
 } from '@trussworks/react-uswds';
 import { ContentContainer } from '../components/ContentContainer/ContentContainer';
 import { useHeroInit } from '../hooks/useHeroInit';
-import classNames from 'classnames';
+import { RoundedBackground } from '../components/RoundedBackground/RoundedBackground';
 
 const EngageWithUs = () => {
   useHeroInit({
@@ -39,7 +39,7 @@ const EngageWithUs = () => {
       </div>
     </ContentContainer>
   );
-}
+};
 
 const Left = () => {
   return (
@@ -121,28 +121,6 @@ const Left = () => {
       </Button>
     </div>
   );
-}
-
-interface RoundedBackgroundProps extends React.ComponentProps<'div'> {
-  children: React.ReactNode;
-}
-
-const RoundedBackground = ({
-  children,
-  className,
-  ...props
-}: RoundedBackgroundProps) => {
-  return (
-    <div
-      {...props}
-      className={classNames(
-        'rounded-br-[2.5rem] rounded-tl-[2.5rem] border-2 border-[#82b4c9] bg-white/50',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
 };
 
 const Right = () => {