feat: detail componet.

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>
+  );
+}