From 6ea3057b236f9bbdb35f601494d1bdb29d9b2961 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Fri, 16 Aug 2024 10:59:09 +0200
Subject: [PATCH] feat: create CustomBox component

---
 components/ui/custom/CustomBox.tsx | 34 ++++++++++++++++++++++++++++++
 components/ui/custom/index.ts      |  1 +
 2 files changed, 35 insertions(+)
 create mode 100644 components/ui/custom/CustomBox.tsx
 create mode 100644 components/ui/custom/index.ts

diff --git a/components/ui/custom/CustomBox.tsx b/components/ui/custom/CustomBox.tsx
new file mode 100644
index 0000000000..acc4b3d1c8
--- /dev/null
+++ b/components/ui/custom/CustomBox.tsx
@@ -0,0 +1,34 @@
+import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+import React from "react";
+
+interface CustomBoxProps {
+  children: React.ReactNode;
+  preTitle?: string;
+  subTitle?: string;
+  title?: string;
+}
+
+export const CustomBox = ({
+  children,
+  preTitle,
+  subTitle,
+  title,
+}: CustomBoxProps) => {
+  return (
+    <Card fullWidth>
+      {(preTitle || subTitle || title) && (
+        <>
+          <CardHeader className="pt-4 pb-3 px-3 flex-col items-start">
+            {preTitle && (
+              <p className="text-tiny uppercase font-bold">{preTitle}</p>
+            )}
+            {subTitle && <small className="text-default-500">{subTitle}</small>}
+            {title && <h4 className="font-bold text-large">{title}</h4>}
+          </CardHeader>
+          <Divider />
+        </>
+      )}
+      <CardBody className="px-3 pt-3 pb-4">{children}</CardBody>
+    </Card>
+  );
+};
diff --git a/components/ui/custom/index.ts b/components/ui/custom/index.ts
new file mode 100644
index 0000000000..00732c48c8
--- /dev/null
+++ b/components/ui/custom/index.ts
@@ -0,0 +1 @@
+export * from "./CustomBox";