Added teams button and Avatar component.

2026-02-10 07:37:11 +01:00 · 2024-01-31 02:30:49 -08:00 · 2024-01-31 02:30:49 -08:00 · 992342aa72
commit 992342aa72
parent c7df1063ac
8 changed files with 260 additions and 4 deletions
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@ -0,0 +1,158 @@
+import md5 from 'md5';
+
+const pallette = [
+  ['#ff9a9e', '#fad0c4'],
+  ['#a18cd1', '#fbc2eb'],
+  ['#fad0c4', '#ffd1ff'],
+  ['#ffecd2', '#fcb69f'],
+  ['#ff9a9e', '#fecfef'],
+  ['#f6d365', '#fda085'],
+  ['#fbc2eb', '#a6c1ee'],
+  ['#fdcbf1', '#e6dee9'],
+  ['#a1c4fd', '#c2e9fb'],
+  ['#d4fc79', '#96e6a1'],
+  ['#84fab0', '#8fd3f4'],
+  ['#cfd9df', '#e2ebf0'],
+  ['#a6c0fe', '#f68084'],
+  ['#fccb90', '#d57eeb'],
+  ['#e0c3fc', '#8ec5fc'],
+  ['#f093fb', '#f5576c'],
+  ['#fdfbfb', '#ebedee'],
+  ['#4facfe', '#00f2fe'],
+  ['#43e97b', '#38f9d7'],
+  ['#fa709a', '#fee140'],
+  ['#30cfd0', '#330867'],
+  ['#a8edea', '#fed6e3'],
+  ['#5ee7df', '#b490ca'],
+  ['#d299c2', '#fef9d7'],
+  ['#f5f7fa', '#c3cfe2'],
+  ['#667eea', '#764ba2'],
+  ['#fdfcfb', '#e2d1c3'],
+  ['#89f7fe', '#66a6ff'],
+  ['#fddb92', '#d1fdff'],
+  ['#9890e3', '#b1f4cf'],
+  ['#ebc0fd', '#d9ded8'],
+  ['#96fbc4', '#f9f586'],
+  ['#2af598', '#009efd'],
+  ['#cd9cf2', '#f6f3ff'],
+  ['#6a11cb', '#2575fc'],
+  ['#37ecba', '#72afd3'],
+  ['#ebbba7', '#cfc7f8'],
+  ['#fff1eb', '#ace0f9'],
+  ['#c471f5', '#fa71cd'],
+  ['#48c6ef', '#6f86d6'],
+  ['#feada6', '#f5efef'],
+  ['#e6e9f0', '#eef1f5'],
+  ['#accbee', '#e7f0fd'],
+  ['#e9defa', '#fbfcdb'],
+  ['#c1dfc4', '#deecdd'],
+  ['#0ba360', '#3cba92'],
+  ['#00c6fb', '#005bea'],
+  ['#74ebd5', '#9face6'],
+  ['#6a85b6', '#bac8e0'],
+  ['#a3bded', '#6991c7'],
+  ['#9795f0', '#fbc8d4'],
+  ['#a7a6cb', '#8989ba'],
+  ['#f43b47', '#453a94'],
+  ['#0250c5', '#d43f8d'],
+  ['#88d3ce', '#6e45e2'],
+  ['#d9afd9', '#97d9e1'],
+  ['#7028e4', '#e5b2ca'],
+  ['#13547a', '#80d0c7'],
+  ['#ff0844', '#ffb199'],
+  ['#93a5cf', '#e4efe9'],
+  ['#434343', '#000000'],
+  ['#93a5cf', '#e4efe9'],
+  ['#92fe9d', '#00c9ff'],
+  ['#ff758c', '#ff7eb3'],
+  ['#868f96', '#596164'],
+  ['#c79081', '#dfa579'],
+  ['#8baaaa', '#ae8b9c'],
+  ['#f83600', '#f9d423'],
+  ['#b721ff', '#21d4fd'],
+  ['#6e45e2', '#88d3ce'],
+  ['#d558c8', '#24d292'],
+  ['#abecd6', '#fbed96'],
+  ['#5f72bd', '#9b23ea'],
+  ['#09203f', '#537895'],
+  ['#ddd6f3', '#faaca8'],
+  ['#dcb0ed', '#99c99c'],
+  ['#f3e7e9', '#e3eeff'],
+  ['#c71d6f', '#d09693'],
+  ['#96deda', '#50c9c3'],
+  ['#f77062', '#fe5196'],
+  ['#a8caba', '#5d4157'],
+  ['#29323c', '#485563'],
+  ['#16a085', '#f4d03f'],
+  ['#ff5858', '#f09819'],
+  ['#2b5876', '#4e4376'],
+  ['#00cdac', '#8ddad5'],
+  ['#4481eb', '#04befe'],
+  ['#dad4ec', '#f3e7e9'],
+  ['#874da2', '#c43a30'],
+  ['#4481eb', '#04befe'],
+  ['#e8198b', '#c7eafd'],
+  ['#f794a4', '#fdd6bd'],
+  ['#64b3f4', '#c2e59c'],
+  ['#0fd850', '#f9f047'],
+  ['#ee9ca7', '#ffdde1'],
+  ['#209cff', '#68e0cf'],
+  ['#bdc2e8', '#e6dee9'],
+  ['#e6b980', '#eacda3'],
+  ['#1e3c72', '#2a5298'],
+  ['#9be15d', '#00e3ae'],
+  ['#ed6ea0', '#ec8c69'],
+  ['#ffc3a0', '#ffafbd'],
+  ['#cc208e', '#6713d2'],
+  ['#b3ffab', '#12fff7'],
+  ['#243949', '#517fa4'],
+  ['#fc6076', '#ff9a44'],
+  ['#dfe9f3', '#ffffff'],
+  ['#00dbde', '#fc00ff'],
+  ['#f9d423', '#ff4e50'],
+  ['#50cc7f', '#f5d100'],
+  ['#0acffe', '#495aff'],
+  ['#616161', '#9bc5c3'],
+  ['#df89b5', '#bfd9fe'],
+  ['#ed6ea0', '#ec8c69'],
+  ['#d7d2cc', '#304352'],
+  ['#e14fad', '#f9d423'],
+  ['#b224ef', '#7579ff'],
+  ['#c1c161', '#d4d4b1'],
+  ['#ec77ab', '#7873f5'],
+  ['#007adf', '#00ecbc'],
+  ['#20E2D7', '#F9FEA5'],
+  ['#A8BFFF', '#884D80'],
+  ['#B6CEE8', '#F578DC'],
+  ['#FFFEFF', '#D7FFFE'],
+  ['#E3FDF5', '#FFE6FA'],
+  ['#7DE2FC', '#B9B6E5'],
+  ['#CBBACC', '#2580B3'],
+  ['#B7F8DB', '#50A7C2'],
+  ['#007adf', '#00ecbc'],
+];
+
+export function Avatar({ value }: { value: string }) {
+  const hash = md5(value);
+  let num = 0;
+
+  for (let i = 0; i < 8; i++) {
+    num += parseInt(hash.substring(i * 4, i * 4 + 4), 16);
+  }
+
+  const index = num % pallette.length;
+
+  return (
+    <svg viewBox="0 0 100 100">
+      <defs>
+        <linearGradient id={`color-${hash}`} gradientTransform={`rotate(${index % 2 ? 90 : 0})`}>
+          <stop offset="0%" stopColor={pallette[index][0]} />
+          <stop offset="100%" stopColor={pallette[index][1]} />
+        </linearGradient>
+      </defs>
+      <circle cx="50" cy="50" r="50" fill={`url(#color-${hash})`} />
+    </svg>
+  );
+}
+
+export default Avatar;