From 97cb41dc5ad134c96758c14b307e317e984e94d6 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Mon, 30 Mar 2026 21:59:13 +0200
Subject: [PATCH] refactor: composable info element

---
 .../common/components/info/Info.module.scss   | 27 ++++++++++++++++++
 .../src/common/components/info/Info.tsx       | 28 +++++++++++++++++--
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/common/components/info/Info.module.scss b/apps/client/src/common/components/info/Info.module.scss
index 3939cbb54..68cf69f7e 100644
--- a/apps/client/src/common/components/info/Info.module.scss
+++ b/apps/client/src/common/components/info/Info.module.scss
@@ -16,6 +16,33 @@
   }
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.title,
+.body {
+  margin: 0;
+}
+
+.title {
+  color: $ui-white;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.body {
+  color: $gray-400;
+  line-height: 1.5;
+}
+
+.footer {
+  width: fit-content;
+}
+
 .info {
   svg {
     color: $info-blue;
diff --git a/apps/client/src/common/components/info/Info.tsx b/apps/client/src/common/components/info/Info.tsx
index 8153da6cc..bfeb66823 100644
--- a/apps/client/src/common/components/info/Info.tsx
+++ b/apps/client/src/common/components/info/Info.tsx
@@ -10,13 +10,37 @@ interface InfoProps {
   type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
+interface InfoSectionProps {
+  className?: string;
+}
+
+function InfoTitle({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <p className={cx([style.title, className])}>{children}</p>;
+}
+
+function InfoBody({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <p className={cx([style.body, className])}>{children}</p>;
+}
+
+function InfoFooter({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <div className={cx([style.footer, className])}>{children}</div>;
+}
+
+function InfoRoot({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
   return (
     <div className={cx([style.infoLabel, style[type], className])}>
       {type === 'info' && <IoAlertCircle />}
       {type === 'warning' && <IoWarning />}
       {type === 'error' && <IoWarning />}
-      <div>{children}</div>
+      <div className={style.content}>{children}</div>
     </div>
   );
 }
+
+const Info = Object.assign(InfoRoot, {
+  Title: InfoTitle,
+  Body: InfoBody,
+  Footer: InfoFooter,
+});
+
+export default Info;