refactor: composable info element

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;

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;