Merge pull request #25 from taraldefi/fix/entityCard

Fix/entity card
taraldefi · Jul 24, 2023 · d648110 · d648110
2 parents fc68c69 + edec500
commit d648110
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/src/Entity/Entity.scss b/src/Entity/Entity.scss
@@ -2,14 +2,7 @@
   :hover {
     box-shadow: initial;
   }
-  #icon {
-    padding: 10px;
-    position: absolute;
-    right: -5px;
-    top: 2px;
-  }
   display: flex;
-  position: relative;
   flex-direction: column;
   padding: 20px 0px 20px 16px;
   width: fit-content;
@@ -53,9 +46,63 @@
       }
     }
 
-    div:last-of-type {
+    .optionsContainer {
       margin-left: auto;
     }
+    .modalContainer {
+      position: absolute;
+
+      &.active {
+        width: 148px;
+        height: 192px;
+        background-color: #fff;
+        position: absolute;
+        z-index: 99;
+        border-radius: 16px;
+        box-shadow: 3px 18px 36px 1px rgba(100, 116, 139, 0.13);
+        -webkit-box-shadow: 3px 18px 36px 1px rgba(100, 116, 139, 0.13);
+        -moz-box-shadow: 3px 18px 36px 1px rgba(100, 116, 139, 0.13);
+      }
+    }
+    .modal {
+      .iconEntityOption {
+        opacity: 0.7;
+        &.active {
+          opacity: 1;
+        }
+      }
+      .modalMenue {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 24px;
+        gap: 20px;
+
+        :nth-child(1) {
+          display: flex;
+          gap: 13px;
+          align-items: center;
+        }
+
+        :nth-child(2) {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+        }
+
+        :nth-child(4) {
+          display: flex;
+          gap: 15px;
+          align-items: center;
+        }
+
+        :nth-child(3) {
+          width: 100%;
+          height: 1px;
+          background-color: rgba(13, 132, 137, 0.3);
+        }
+      }
+    }
   }
 
   .bottomContent {

diff --git a/src/Entity/Entity.stories.tsx b/src/Entity/Entity.stories.tsx
@@ -22,5 +22,4 @@ const data = {
 
 EntityCard.args = {
   entityData: data,
-  onClick: () => {},
 };
diff --git a/src/Entity/Entity.tsx b/src/Entity/Entity.tsx
@@ -1,20 +1,11 @@
 // Generated with util/create-component.js
 import React from 'react';
-import { MoreVertical } from 'react-feather';
 import { EntityType } from './Entity.types';
 import './Entity.scss';
 
-export function Entity({ entityData, onClick }: EntityType) {
+export function Entity({ entityData, modal }: EntityType) {
   return (
-    <div className="entityWrapper">
-      <div
-        onClick={() => {
-          onClick();
-        }}
-        id="icon"
-      >
-        <MoreVertical></MoreVertical>
-      </div>
+    <div className={'entityWrapper'}>
       <div className="entityTopContent">
         <div className="entityImageContainer">
           <img
@@ -29,6 +20,7 @@ export function Entity({ entityData, onClick }: EntityType) {
           <span>{entityData.title}</span>
           <span>55-NB</span>
         </div>
+        <div className="optionsContainer">{modal}</div>
       </div>
       <div className="bottomContent">
         <div className="registrationContainer">

diff --git a/src/Entity/Entity.types.ts b/src/Entity/Entity.types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export interface EntityDataType {
   id: number;
@@ -10,5 +10,19 @@ export interface EntityDataType {
 }
 export interface EntityType {
   entityData: EntityDataType;
-  onClick?: () => void;
+  modal?: React.ReactNode;
+}
+export interface EntityViewType {
+  infoData: InfoDataType[];
+}
+
+export interface InfoDataType {
+  BeneficialOwner: string;
+  CodeAbbreviation: string;
+  Nationality: string;
+  HeadquartersLocation: string;
+  IndustryType: string;
+  CoreBusiness: string;
+  IncorporationDate: string;
+  LegalForm: string;
 }