diff --git a/src/images/profile-icon.svg b/src/images/profile-icon.svg
new file mode 100644
index 0000000..e9bfe8a
--- /dev/null
+++ b/src/images/profile-icon.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index bd1f75a..1155f1b 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -2,10 +2,20 @@ import React, { useState } from 'react';
import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header';
+import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';
function Profile () {
const [sidebarOpen, setSidebarOpen] = useState(false);
+ const data = {
+ id: '0',
+ image: ProfileIcon,
+ value: 'Passport',
+ property: 'Document type',
+ status: 'Stored'
+ };
+
return (
{/* Sidebar */}
@@ -24,6 +34,19 @@ function Profile () {
{/* Title */}
Profile ✨
+ {/* Table */}
+
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
new file mode 100644
index 0000000..c94749a
--- /dev/null
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import Avatar01 from '../../images/avatar-01.jpg';
+import Avatar02 from '../../images/avatar-02.jpg';
+import Avatar03 from '../../images/avatar-03.jpg';
+
+function ProfileTableItem(props) {
+ const [descriptionOpen, setDescriptionOpen] = useState(false);
+
+ return (
+
+ |
+
+
+
+ |
+
+
+
+ 
+
+
+ {props.value}
+ {props.property}
+
+
+ |
+
+ {(props.status === 'Progress') ? (
+ ) :
+ (props.status === 'Stored') ? (
+ ) :
+ (props.status === 'Completed') ? (
+ ) : (
+ )
+ }
+ |
+
+
+
+ 
+ 
+ 
+
+
+
+ |
+
+ {/* Menu button */}
+
+ |
+
+
+
+
+ |
+
+ );
+}
+
+export default ProfileTableItem;