refactor: quick start component

Author: usingbrain

client/src/Components/TeacherHomepage/Instruction.tsx

@@ -4,43 +4,65 @@ import startImg from '../../Assets/startsession.png';
 import attendanceImg from '../../Assets/classdata.png';
 import studentData from '../../Assets/studentdata.png';
 
-const imgStyle = "bg-white rounded-full h-16 w-16 flex justify-center items-center"
-const info = "w-2/3 text-2xl h-20 flex md:pl-8 pl-1 pr-2 items-center rounded-full justify-between"
+const imgStyle =
+  'bg-white rounded-full h-16 w-16 flex justify-center items-center';
+const info =
+  'w-2/3 text-2xl h-20 flex flex-row md:pl-8 pl-1 pr-2 mb-8 items-center rounded-full justify-between';
+
+interface Props {
+  el: { color: string; text: string; img: string };
+}
+
+const Floop: React.FC<Props> = ({ el }) => {
+  return (
+    <div className={`${info} ${el.color}`}>
+      <p>{el.text}</p>
+      <div className={imgStyle}>
+        <img src={el.img} alt={el.text} className="h-10 w-10" />
+      </div>
+    </div>
+  );
+};
+
+const create = {
+  color: 'bg-shades-one',
+  text: 'Create or open a class',
+  img: openOrCreate,
+};
+
+const register = {
+  color: 'bg-shades-two',
+  text: 'Register students',
+  img: registerImg,
+};
+
+const start = {
+  color: 'bg-shades-three',
+  text: 'Start a session',
+  img: startImg,
+};
+
+const access = {
+  color: 'bg-shades-four',
+  text: 'Access attendance data',
+  img: attendanceImg,
+};
+
+const check = {
+  color: 'bg-shades-five',
+  text: 'Check individual student data',
+  img: studentData,
+};
 
 const Instruction = () => {
   return (
     <div className="h-screen flex flex-col items-center">
       <h1 className="text-5xl my-8">Quick start</h1>
-      <p className={`${info} mb-4 bg-shades-one`}>
-        Create or open a class
-        <div className={imgStyle}>
-          <img src={openOrCreate} alt="Open or create class" className="h-10 w-10" />
-        </div>
-      </p>
-      <p className={`${info} my-4 bg-shades-two`}>
-        Register students
-        <div className={imgStyle}>
-          <img src={registerImg} alt="Open or create class" className="h-10 w-10" />
-        </div>
-      </p>
-      <p className={`${info} my-4 bg-shades-three`}>
-        Start a session
-        <div className={imgStyle}>
-          <img src={startImg} alt="Open or create class" className="h-10 w-10" />
-        </div>
-      </p>
-      <p className={`${info} my-4 bg-shades-four`}>
-        Access attendance data
-        <div className={imgStyle}>
-          <img src={attendanceImg} alt="Open or create class" className="h-10 w-10" />
-        </div>
-      </p>
-      <p className={`${info} my-4 bg-shades-five`}>
-        Check individual student data
-        <div className={imgStyle}>
-          <img src={studentData} alt="Open or create class" className="h-10 w-10" />
-        </div>
-      </p>
+      <Floop el={create} />
+      <Floop el={register} />
+      <Floop el={start} />
+      <Floop el={access} />
+      <Floop el={check} />
     </div>
   );
 };