feat: trainee component

package.json

@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0"

src/App.js

@@ -1,8 +1,28 @@
 import React from 'react';
 import './App.css';
+import { Trainee } from './Components';
 
 const App = () => {
-  return <div className="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' }
+  ];
+
+  return (
+    <div className="App">
+      {trainees.map(({ name, handle, photo }) => (
+        <Trainee key={handle} name={name} handle={handle} />
+      ))}
+    </div>
+  );
 };
 
 export default App;

src/Components/Trainee/Trainee.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getShortName, getUniqueHashFromName } from '../../utils';
+import './styles.css';
+
+class Trainee extends React.Component {
+  render() {
+    const { name, handle } = this.props;
+    const shortName = getShortName(name);
+    const colorPercent = getUniqueHashFromName(name);
+
+    return (
+      <div className="trainee">
+        <div
+          className="photo"
+          style={{ backgroundColor: `hsl(${colorPercent * 360}, 100%, 75%)` }}
+        >
+          {shortName}
+        </div>
+        <div className="info">
+          <div className="name">{name.trim()}</div>
+          <div className="handle">
+            <a
+              href={`https://codeforces.com/profile/${handle}`}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              @{handle.trim()}
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Trainee.propTypes = {
+  name: PropTypes.string.isRequired,
+  handle: PropTypes.string.isRequired
+};
+
+export default Trainee;

src/Components/Trainee/index.js

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

src/Components/Trainee/styles.css

@@ -0,0 +1,39 @@
+.trainee {
+  display: flex;
+  flex-direction: row;
+  font-size: 18px;
+}
+
+.trainee .photo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  margin: 10px;
+  border-radius: 5px;
+  user-select: none;
+}
+
+.trainee .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.trainee .info .handle {
+  font-size: 12px;
+}
+
+.trainee .info .handle > a {
+  color: grey;
+  text-decoration: none;
+}
+
+.trainee .info .handle > a:hover {
+  color: darkgray;
+}
+
+.trainee .info .handle > a:active {
+  color: black;
+}

src/Components/index.js

@@ -0,0 +1 @@
+export * from './Trainee';

src/consts/index.js

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

src/consts/primes.js

@@ -0,0 +1,28 @@
+export default [
+  2,
+  3,
+  5,
+  7,
+  11,
+  13,
+  17,
+  19,
+  23,
+  29,
+  31,
+  37,
+  41,
+  43,
+  47,
+  53,
+  59,
+  61,
+  67,
+  71,
+  73,
+  79,
+  83,
+  89,
+  97,
+  101
+];

src/utils/index.js

@@ -0,0 +1 @@
+export * from './names';

src/utils/names.js

@@ -0,0 +1,30 @@
+import { primes } from '../consts';
+
+export const getShortName = name => {
+  return name
+    .trim()
+    .split(' ')
+    .reduce((acc, name) => (name.length ? `${acc}${name[0]}` : acc), '')
+    .toUpperCase();
+};
+
+export const getUniqueHashFromName = name => {
+  const chars = name
+    .trim()
+    .toUpperCase()
+    .split(' ')
+    .join('')
+    .split('');
+
+  let rand = 0;
+  for (let i = 0; i < chars.length; i++) {
+    const index = chars[i].charCodeAt() - 'A'.charCodeAt();
+    rand += Math.pow(primes[index], chars.length - i);
+  }
+
+  while (rand > 1) {
+    rand /= 10;
+  }
+
+  return rand;
+};