diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js index 4d79d5f..4f35c23 100644 --- a/src/css/tailwind.config.js +++ b/src/css/tailwind.config.js @@ -20,12 +20,13 @@ module.exports = { inter: ['Inter', 'sans-serif'], }, fontSize: { + descriptionSize: ['0.75rem', { lineHeight: '1.25' }], xxs: ['0.625rem', { lineHeight: '0.75' }], xs: ['0.75rem', { lineHeight: '1.5' }], sm: ['0.875rem', { lineHeight: '1.5715' }], base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }], lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }], - validateLg: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }], + validateSize: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }], xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }], '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }], '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }], diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 4d85496..d68aa5d 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; - import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; -import ProfileTableItem from '../../partials/digitalId/ProfileTableItem'; +import ProfileTable from '../../partials/digitalId/ProfileTable'; +import Image from '../../images/transactions-image-04.svg'; import ProfileIcon from '../../images/profile-icon.svg'; import Avatar01 from '../../images/avatar-01.jpg'; import Avatar02 from '../../images/avatar-02.jpg'; @@ -10,16 +10,184 @@ import Avatar03 from '../../images/avatar-03.jpg'; function Profile () { const [sidebarOpen, setSidebarOpen] = useState(false); + const [buttonPanelOpen, setButtonPanelOpen] = useState(true); + const [removePanelOpen, setRemovePanelOpen] = useState(false); + const [changePanelOpen, setChangePanelOpen] = useState(false); + const [toggle, setToggle] = useState(true); + const [addPanelOpen, setAddPanelOpen] = useState(false); + const [selectedItems, setSelectedItems] = useState([]); - const data = { + const handleSelectedItems = (selectedItems) => { + setSelectedItems([...selectedItems]); + if (selectedItems.length > 0) { + setButtonPanelOpen(false); + setAddPanelOpen(false); + setChangePanelOpen(true); + } + if (removePanelOpen === true) { + setChangePanelOpen(false); + } + if (selectedItems.length === 0) { + setRemovePanelOpen(false); + setButtonPanelOpen(true); + setChangePanelOpen(false); + } + }; + + const openAddPanel = () => { + setAddPanelOpen(true); + setButtonPanelOpen(false); + } + + const cancelAddPanel = () => { + setAddPanelOpen(false); + setButtonPanelOpen(true); + } + + const openRemovePanel = () => { + setRemovePanelOpen(true); + setChangePanelOpen(false); + } + + const applyRemovePanel = () => { + setRemovePanelOpen(false); + setButtonPanelOpen(true); + } + + const userData = [ + { id: '0', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Dominik', + property: 'First name', + status: 'Completed', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + { + id: '1', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Lamakani', + property: 'Second name', + status: 'Progress', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '2', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '05.10.1983', + property: 'Birthdate', + status: 'Incorrect', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '3', + category: 'General', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'Male', + property: 'Gender', + status: 'Stored', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '4', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'United Kindom', + property: 'Residence', + status: 'Completed', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + { + id: '5', + category: 'Nationality', + validated: true, + blockchained: true, image: ProfileIcon, value: 'Passport', property: 'Document type', status: 'Progress', transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], avatars: [Avatar01, Avatar02, Avatar03] - }; + }, + { + id: '6', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: 'A123B3143', + property: 'Document ID', + status: 'Incorrect', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '7', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '05.10.2012', + property: 'Issue date', + status: 'Stored', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '8', + category: 'Nationality', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '05.10.2032', + property: 'Expiry date', + status: 'Stored', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '9', + category: 'Social', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '@lamakani', + property: 'Telegram', + status: 'Completed', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: null + }, + { + id: '10', + category: 'Social', + validated: true, + blockchained: true, + image: ProfileIcon, + value: '@lamakani', + property: 'Telegram', + status: 'Progress', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }, + ] return (
@@ -30,27 +198,193 @@ function Profile () { {/* Site header */}
-
- {/* Page header */} -
- {/* Title */} -

Profile ✨

+
+
+ {/* Page header */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ {/* Table */} + +
+ {/* Left sidebar */} +
+ {/* Button panel*/} +
+
+ +
+
+
+ {/* Add panel */} +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ Store data on blockchain +
+
+ setToggle(!toggle)} /> + +
+
+
+ {/* Buttons */} +
+ + +
+
+ {/* Remove panel */} +
+

Summary

+
+ {userData.filter(({ id }) => selectedItems.includes(id)).map(item => ( + {item.property} + ))} +
+
+ On blockchain too +
+
+ setToggle(!toggle)} /> + +
+
+
+
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms. +
+
+ {/* Details */} +
+ {/* Top */} +
+
+ Transaction 04 +
+
0.012 IDN
+
Total amount fee
+
+ {/* Divider */} + +
+ {/* Change panel */} +
+
+ + + +
+
+
- {/* Table */} - - - - -
diff --git a/src/partials/digitalId/ProfileTable.jsx b/src/partials/digitalId/ProfileTable.jsx new file mode 100644 index 0000000..cadad05 --- /dev/null +++ b/src/partials/digitalId/ProfileTable.jsx @@ -0,0 +1,108 @@ +import React, {useState, useEffect} from 'react'; +import ProfileTableItem from './ProfileTableItem'; + +function ProfileTable({ + selectedItems, + userData +}) { + + const [isCheck, setIsCheck] = useState([]); + + useEffect(() => { + selectedItems(isCheck); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isCheck]); + + const handleClick = e => { + const { id, checked } = e.target; + setIsCheck([...isCheck, id]); + if (!checked) { + setIsCheck(isCheck.filter(item => item !== id)); + } + }; + + return ( + <> + {/* General */} +

General 🖋️

+
+ + + {userData.filter(data => data.category === 'General') + .map(data => { + return ( + + ) + }) + } + +
+
+ {/* Nationality */} +

Nationality 🖋️

+
+ + + {userData.filter(data => data.category === 'Nationality') + .map(data => { + return ( + + ) + }) + } + +
+
+ {/* Social */} +

Social 🖋️

+
+ + + {userData.filter(data => data.category === 'Social') + .map(data => { + return ( + + ) + }) + } + +
+
+ + ) +} + +export default ProfileTable; diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx index 5a17432..4fd2e33 100644 --- a/src/partials/digitalId/ProfileTableItem.jsx +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -5,7 +5,7 @@ function ProfileTableItem(props) { return ( <> - +
- +
@@ -122,8 +122,8 @@ function ProfileTableItem(props) {

- Validate by - {data} + Validate by + {data}