feat: sheet component

src/App.js

@@ -1,26 +1,173 @@
 import React from 'react';
 import './App.css';
-import { Trainee } from './Components';
+import { Board } from './Components';
 
 const App = () => {
   const trainees = [
-    { name: 'Ahmed Hossam', handle: 'ahmed.7oskaa' },
-    { name: 'Abdalla Tarek', handle: 'Bodipie' },
-    { name: 'Yousab Esaa', handle: 'Yousab_Esaa' },
-    { name: 'Abdalla Nasser', handle: 'abdallanaser1432000' },
-    { name: 'Mahmoud Aboelsoud', handle: 'aboelsoudJr' },
-    { name: 'Abdelrehman Mamdouh', handle: 'Abdelrehman' },
-    { name: 'Mahmoud Elsayed', handle: 'Mahmoudelsayed00' },
-    { name: 'Yousef Mohamed', handle: 'Pixelise' },
-    { name: 'Hadir Alnajdy', handle: 'Hdrnjd' },
-    { name: 'Lama Salah', handle: 'LamaSalah' }
+    {
+      name: 'Ahmed Hossam',
+      handle: 'ahmed.7oskaa',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Abdalla Tarek',
+      handle: 'Bodipie',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Yousab Esaa',
+      handle: 'Yousab_Esaa',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Abdalla Nasser',
+      handle: 'abdallanaser1432000',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Mahmoud Aboelsoud',
+      handle: 'aboelsoudJr',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Abdelrehman Mamdouh',
+      handle: 'Abdelrehman',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Mahmoud Elsayed',
+      handle: 'Mahmoudelsayed00',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Yousef Mohamed',
+      handle: 'Pixelise',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Hadir Alnajdy',
+      handle: 'Hdrnjd',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Lama Salah',
+      handle: 'LamaSalah',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Mariem Osama',
+      handle: 'Mariem_Osama',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Abdelrahman Elwardany',
+      handle: 'Abdelrahman_Elwardany',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Ibrahim Abdalrhman',
+      handle: 'ibrahimpepo',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Mohamed AboElkhair',
+      handle: 'Mohamed_AboELkhair',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Salma Ahmed',
+      handle: 'Sa310',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Hala Ibrahim',
+      handle: 'Hala_ibrahim7',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Omnia Adel',
+      handle: 'omnia_adel',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Merna Tarek',
+      handle: 'Merno',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Ahmed AbdElsalam',
+      handle: 'Genius22',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    },
+    {
+      name: 'Emad Moenes',
+      handle: 'emadmoenes',
+      states: { solved: 26, tried: 5, missed: 120, submissions: 530 }
+    }
+  ];
+
+  const sheets = [
+    {
+      id: '219158',
+      name: 'Sheet #1 (Data type - Conditions)',
+      problems: [
+        { id: 'A', name: 'Say Hello With C++' },
+        { id: 'B', name: 'Basic Data Types' },
+        { id: 'C', name: 'Extremely Basic' },
+        { id: 'D', name: 'Difference' },
+        { id: 'E', name: 'Four Numbers' }
+      ]
+    },
+    {
+      id: '219432',
+      name: 'Sheet #2 (Loops)',
+      problems: [
+        { id: 'A', name: '1 to N' },
+        { id: 'B', name: 'Even Numbers' },
+        { id: 'C', name: 'Summation using Loops' },
+        { id: 'D', name: 'Even, Odd, Positive and Negative' },
+        { id: 'E', name: 'Fixed Password' }
+      ]
+    },
+    {
+      id: '219856',
+      name: 'Sheet #4 (Strings)',
+      problems: [
+        { id: 'A', name: 'Create A New String' },
+        { id: 'B', name: 'Find Length' },
+        { id: 'C', name: "Let's use Getline" },
+        { id: 'D', name: 'Compare' },
+        { id: 'E', name: 'Strings' }
+      ]
+    },
+
+    {
+      id: 'fake-1',
+      name: 'Sheet #4 (Strings)',
+      problems: [
+        { id: 'A', name: 'Create A New String' },
+        { id: 'B', name: 'Find Length' },
+        { id: 'C', name: "Let's use Getline" },
+        { id: 'D', name: 'Compare' },
+        { id: 'E', name: 'Strings' }
+      ]
+    },
+    {
+      id: 'fake-2',
+      name: 'Sheet #4 (Strings)',
+      problems: [
+        { id: 'A', name: 'Create A New String' },
+        { id: 'B', name: 'Find Length' },
+        { id: 'C', name: "Let's use Getline" },
+        { id: 'D', name: 'Compare' },
+        { id: 'E', name: 'Strings' }
+      ]
+    }
   ];
 
   return (
     <div className="App">
-      {trainees.map(({ name, handle, photo }) => (
-        <Trainee key={handle} name={name} handle={handle} />
-      ))}
+      <Board sheets={sheets} trainees={trainees} />
     </div>
   );
 };

src/Components/Board/Board.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TraineeList } from '../TraineeList';
+import Sheet from '../Sheet';
+import './styles.css';
+
+class Board extends React.Component {
+  render() {
+    const { sheets, trainees } = this.props;
+
+    return (
+      <div className="board">
+        <div className="trainees-section">
+          <TraineeList trainees={trainees} />
+        </div>
+        <div className="sheets-section">
+          <div className="sheets">
+            {sheets.map(({ id, name, problems }, index) => (
+              <div className="sheet-collection" key={index}>
+                <Sheet id={id} name={name} problems={problems} />
+              </div>
+            ))}
+          </div>
+          <div>Hi</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Board.propTypes = {
+  sheets: PropTypes.array.isRequired,
+  trainees: PropTypes.array.isRequired
+};
+
+export default Board;

src/Components/Board/index.js

@@ -0,0 +1 @@
+export { default as Board } from './Board';

src/Components/Board/styles.css

@@ -0,0 +1,28 @@
+.board {
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+}
+
+/* trainees */
+.board .trainees-section {
+  background-color: white;
+  position: sticky;
+  left: 0;
+}
+
+/* sheets */
+.board .sheets-section .sheets {
+  display: flex;
+  flex-direction: row;
+}
+
+.board .sheets-section .sheets .sheet-collection {
+  border-top: 1px solid #535353;
+  border-right: 1px solid #535353;
+  border-bottom: 1px solid #535353;
+}
+
+.board .sheets-section .sheets .sheet-collection:first-of-type {
+  border-left: 1px solid #535353;
+}

src/Components/Sheet/Sheet.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sheetNameHeight, blockSize, sheetProblemIdHeight } from '../common';
+import './styles.css';
+
+class Sheet extends React.Component {
+  render() {
+    const { id, name, problems } = this.props;
+
+    return (
+      <div className="sheet">
+        <a
+          href={`https://codeforces.com/group/MWSDmqGsZm/contest/${id}`}
+          rel="noopener noreferrer"
+          target="_blank"
+          className="title"
+          style={{ height: sheetNameHeight }}
+        >
+          {name}
+        </a>
+        <div className="problems">
+          {problems.map((problem, index) => (
+            <a
+              key={index}
+              href={`https://codeforces.com/group/MWSDmqGsZm/contest/${id}/problem/${problem.id}`}
+              rel="noopener noreferrer"
+              target="_blank"
+              className="problem"
+              style={{ width: blockSize, height: sheetProblemIdHeight }}
+            >
+              <div className="id">{problem.id}</div>
+              <div className="status">(999/999)</div>
+              <div
+                className="details"
+                style={{ top: sheetProblemIdHeight - 5 }}
+              >
+                {problem.name}
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+Sheet.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  problems: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default Sheet;

src/Components/Sheet/index.js

@@ -0,0 +1 @@
+export { default } from './Sheet';

src/Components/Sheet/styles.css

@@ -0,0 +1,49 @@
+.sheet .title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  text-decoration: none;
+  border-bottom: 1px solid #e1e1e1;
+  background-color: #e1e1e1;
+  color: #535353;
+}
+
+.sheet .problems {
+  display: flex;
+  flex-direction: row;
+}
+
+.sheet .problems .problem {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  background-color: #e1e1e1;
+}
+
+.sheet .problems .problem .status {
+  font-size: 10px;
+  color: gray;
+}
+
+.sheet .problems .problem .details {
+  position: absolute;
+  z-index: 10;
+  white-space: nowrap;
+  font-size: 10px;
+  background-color: lightyellow;
+  padding: 3px;
+  border: 1px solid darkgray;
+  opacity: 0;
+  transition: all 300ms;
+  visibility: hidden;
+}
+
+.sheet .problems .problem:hover .details {
+  opacity: 1;
+  visibility: visible;
+}

src/Components/Trainee/index.js

@@ -1 +1 @@
-export { default as Trainee } from './Trainee';
+export { default } from './Trainee';

src/Components/TraineeList/TraineeList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trainee } from '../Trainee';
+import { sheetNameHeight, sheetProblemIdHeight } from '../common';
+import Trainee from '../Trainee';
 import './styles.css';
 
 class TraineeList extends React.Component {
@@ -11,7 +12,7 @@ class TraineeList extends React.Component {
       <div className="trainee-list">
         <table className="trainee-list-table">
           <thead className="header">
-            <tr>
+            <tr style={{ height: sheetNameHeight + sheetProblemIdHeight }}>
               <td>Trainee</td>
               <td>Progress</td>
             </tr>

src/Components/common.js

@@ -0,0 +1,3 @@
+export const sheetNameHeight = 25;
+export const sheetProblemIdHeight = 35;
+export const blockSize = 55;

src/Components/index.js

@@ -1 +1,3 @@
 export * from './Trainee';
+export * from './TraineeList';
+export * from './Board';