Feat: tier level component

src/App.tsx

@@ -1,6 +1,25 @@
 import { useEffect, useRef, useState } from 'react';
 import './App.css';
 import { TierImage } from './components/Image';
+import { Tier, TierProps } from './components/Tier';
+
+const default_tier_levels: TierProps[] = [
+  {
+    name: 'S',
+    color: 'green',
+    textColor: 'black',
+  },
+  {
+    name: 'A',
+    color: 'yellow',
+    textColor: 'black',
+  },
+  {
+    name: 'B',
+    color: 'red',
+    textColor: 'black',
+  },
+];
 
 function App() {
   const [images, setImages] = useState<string[]>([]);
@@ -15,6 +34,16 @@ function App() {
 
   return (
     <>
+      <div className='flex flex-col w-full'>
+        {default_tier_levels.map(tier_level => (
+          <Tier
+            color={tier_level.color}
+            textColor={tier_level.textColor}
+            name={tier_level.name}
+            key={tier_level.name}
+          />
+        ))}
+      </div>
       <div className='flex flex-row w-full'>
         {images.map((image, index) => (
           <TierImage image={image} name='test' key={index} />

src/components/Tier.tsx

@@ -0,0 +1,43 @@
+export interface TierProps {
+  color: 'red' | 'yellow' | 'green';
+  name: string;
+  textColor: 'white' | 'black';
+}
+export const Tier = ({ color, name, textColor }: TierProps) => {
+  let color_code = '';
+  let text_color_code = '';
+  switch (color) {
+    case 'green':
+      color_code = '#00b894';
+      break;
+    case 'red':
+      color_code = '#ff7675';
+      break;
+    case 'yellow':
+      color_code = '#ffeaa7';
+      break;
+    default:
+      color_code = '#6c5ce7';
+  }
+  switch (textColor) {
+    case 'white':
+      text_color_code = '#dfe6e9';
+      break;
+    default:
+      text_color_code = '#2d3436';
+  }
+  return (
+    <div className='w-full min-h-64 bg-[#2d3436] relative h-auto'>
+      <div
+        className='w-52 h-80 flex items-center justify-center'
+        style={{
+          color: text_color_code,
+          backgroundColor: color_code,
+        }}
+      >
+        <p className=''>{name}</p>
+      </div>
+      <hr />
+    </div>
+  );
+};