From c87decae22a1d74f198999339383ad9284766075 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 19 Oct 2024 06:07:56 +0530
Subject: [PATCH] feat: action description

---
 .../molecules/ActionDescriptionBox.tsx        | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/molecules/ActionDescriptionBox.tsx

diff --git a/src/components/molecules/ActionDescriptionBox.tsx b/src/components/molecules/ActionDescriptionBox.tsx
new file mode 100644
index 00000000..9778e315
--- /dev/null
+++ b/src/components/molecules/ActionDescriptionBox.tsx
@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+
+const CustomBoxContainer = styled.div`
+  position: relative;
+  width: 200px; /* Adjust width as needed */
+  height: 200px; /* Adjust height as needed */
+  border: 2px solid black;
+  background-color: white;
+  margin: 50px auto;
+`;
+
+const Triangle = styled.div`
+  position: absolute;
+  top: -20px; /* Adjust this value to control the height of the triangle */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  border-bottom: 20px solid black;
+`;
+
+const Content = styled.div`
+  padding: 20px;
+  text-align: center;
+`;
+
+const ActionDescriptionBox = ({ children }: { children: ReactNode }) => {
+    return (
+        <CustomBoxContainer>
+            <Triangle />
+            <Content>{children}</Content>
+        </CustomBoxContainer>
+    );
+};
+
+export default ActionDescriptionBox;