Merge pull request #43 from ahmadtaimoor-deriv/f_contract_details

Ahmad/Card Wrapper
akmal-deriv · May 21, 2024 · 5587368 · 5587368
2 parents 98b38b4 + 0d02466
commit 5587368
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
@@ -0,0 +1,10 @@
+.card-wrapper {
+    background-color: var(--core-color-solid-slate-50);
+    margin-top: 0.5rem;
+    padding: 1rem;
+    border-radius: 0.625rem;
+
+    .title {
+        margin-bottom: 1rem;
+    }
+}
diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.tsx b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.tsx
@@ -0,0 +1,17 @@
+import { Text } from '@deriv-com/quill-ui';
+import React from 'react';
+
+const CardWrapper = ({ title, children }: { title?: string; children: React.ReactNode }) => {
+    return (
+        <div className='card-wrapper'>
+            {title && (
+                <Text size='sm' bold className='title'>
+                    {title}
+                </Text>
+            )}
+            {children}
+        </div>
+    );
+};
+
+export default CardWrapper;
diff --git a/packages/trader/src/AppV2/Components/CardWrapper/index.ts b/packages/trader/src/AppV2/Components/CardWrapper/index.ts
@@ -0,0 +1,4 @@
+import CardWrapper from './card-wrapper';
+import './card-wrapper.scss';
+
+export default CardWrapper;