From 48edcd52ec80126d8fa70bba3e30c9307338c39f Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Mon, 23 Aug 2021 16:45:09 +0200
Subject: [PATCH] feat: detail componet.

---
 client/src/components/Details/index.js   | 25 ++++++++++--
 client/src/style/components/Details.scss | 49 +++++++++++++++++-------
 2 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Details/index.js b/client/src/components/Details/index.js
index ac6cc0d8e..c96252136 100644
--- a/client/src/components/Details/index.js
+++ b/client/src/components/Details/index.js
@@ -1,5 +1,8 @@
 import React from 'react';
-import className from 'classname';
+import classNames from 'classnames';
+import { Col, Row } from 'components';
+
+import 'style/components/Details.scss';
 
 /**
  * Details menu.
@@ -7,7 +10,7 @@ import className from 'classname';
 export function DetailsMenu({ children, vertical = false }) {
   return (
     <div
-      className={className('details-menu', {
+      className={classNames('details-menu', {
         'is-vertical': vertical,
       })}
     >
@@ -17,9 +20,9 @@ export function DetailsMenu({ children, vertical = false }) {
 }
 
 /**
- * Detail item.
+ * Detail item vertical .
  */
-export function DetailItem({ label, children }) {
+export function DetailItemVER({ label, children }) {
   return (
     <div class="detail-item">
       <div class="detail-item__label">{label}</div>
@@ -27,3 +30,17 @@ export function DetailItem({ label, children }) {
     </div>
   );
 }
+
+/**
+ * Detail item horizontal .
+ */
+export function DetailItemHOR({ label, children }) {
+  return (
+    <Row>
+      <Col className="label" xs={3}>
+        {label}
+      </Col>
+      <Col xs={3}>{children}</Col>
+    </Row>
+  );
+}
diff --git a/client/src/style/components/Details.scss b/client/src/style/components/Details.scss
index d9a2134a1..bd91be366 100644
--- a/client/src/style/components/Details.scss
+++ b/client/src/style/components/Details.scss
@@ -1,21 +1,42 @@
 .details-menu {
+  margin: 15px;
+  border: 1px solid #d2dce2;
+
+  &--vertical {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
+    padding: 10px;
+    margin-bottom: 15px;
+    // border-bottom: 1px solid #d2dce2;
+  }
 
-    &.is-vertical {}
+  &--horizontal {
+    display: flex;
+    flex-direction: column;
+    line-height: 30px;
+    padding: 10px;
 
-    .detail-item {
-
-
-        &__label {
-            color: #666666;
-            font-weight: 500;
-        }
-
-        &__content {
-            text-transform: capitalize;
-            margin: 5px 0;
-        }
+    .label {
+      color: #666666;
+      font-weight: 500;
     }
-}
\ No newline at end of file
+  }
+
+  &.is-vertical {
+  }
+
+  .detail-item {
+    flex: 1;
+    line-height: 1.3rem;
+    &__label {
+      color: #666666;
+      font-weight: 500;
+    }
+
+    &__content {
+      text-transform: capitalize;
+      margin: 5px 0;
+    }
+  }
+}