feat: implement stepper component and deploy to progress section

Author: hbjydev

src/components/Progress.js

@@ -1,13 +1,21 @@
 import React from 'react';
+import Stepper from '../components/Stepper';
 
 const Progress = ({ pageContext: { locale: language } }) => {
+  const stepperItems = [
+    { label: 'Import', status: 'done' },
+    { label: 'Build', status: 'doing' },
+    { label: 'Test', status: null },
+    { label: 'Release', status: null },
+  ];
 
   return (
     <div className="relative bg-white dark:bg-gray-900 py-16 sm:py-24 lg:py-32">
       <div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
         <p className="mt-2 text-3xl font-extrabold text-gray-900 dark:text-gray-300 tracking-tight sm:text-4xl">
 	    Current Release Progress
         </p>
+        <Stepper items={stepperItems}/>
         <p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
 	  Rocky Linux 9.0 will be ready for general release in the June - July 2022 timeframe after thorough testing and validation.
         </p>

src/components/Stepper.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { CheckIcon } from '@heroicons/react/outline';
+
+/**
+ * Items schema:
+ *
+ * { label: string, status: 'done'|'doing'|null }
+ */
+
+const Stepper = ({ items }) => {
+  const stepperItems = items.map((v, i) => {
+    return (
+      <div className={`${i !== items.length - 1 ? 'w-full' : ''} flex items-center`}>
+        <div className="relative flex flex-col items-center">
+          <div className={`rounded-full transition duration-500 ease-in-out h-12 w-12 flex items-center justify-center py-3 ${v.status == 'done' ? 'bg-green-500 text-white' : (v.status == 'doing' ? 'bg-blue-500 text-white' : 'border-gray-300 border-2 text-gray-800 bg-white')} font-bold`}>
+            <span className="font-bold text-xl">
+              { v.status == 'done' ? <CheckIcon className="h-6 w-6" /> : i + 1 }
+            </span>
+          </div>
+          <div className={`absolute top-0 text-center mt-14 w-32 font-medium text-${v.status == 'done' ? 'green' : (v.status == 'doing' ? 'blue' : 'gray')}-500`}>{v.label}</div>
+        </div>
+        <div className="flex-auto border-t-2 transition duration-500 ease-in-out border-gray-300" />
+      </div>
+    );
+  });
+
+  return (
+    <div className="mx-4 p-4 flex justify-between items-center my-20">
+      {stepperItems}
+    </div>
+  );
+}
+
+export default Stepper;
+

tailwind.config.js

@@ -1,8 +1,7 @@
 const colors = require('tailwindcss/colors');
 
 module.exports = {
-  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
-  content: [],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     colors: {
       green: {