[Design/Routes] Welcome Screen / Initial Setup (#42)

* feat(new component): welcome screen and initial setup component

* feat(frontend): setup with login, settings, radarr/sonarr

* feat(frontend): add login functionality to login step for setup

Co-authored-by: Alexander Zoitos <azoitos1@gmail.com>

src/components/Setup/SetupSteps.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+interface CurrentStep {
+  stepNumber: number;
+  description: string;
+  active?: boolean;
+  completed?: boolean;
+  isLastStep?: boolean;
+}
+
+const SetupSteps: React.FC<CurrentStep> = ({
+  stepNumber,
+  description,
+  active = false,
+  completed = false,
+  isLastStep = false,
+}) => {
+  return (
+    <li className="relative md:flex-1 md:flex">
+      <div className="px-6 py-4 flex items-center text-sm leading-5 font-medium space-x-4">
+        <div
+          className={`flex-shrink-0 w-10 h-10 flex items-center justify-center border-2
+          ${active ? 'border-indigo-600 ' : 'border-white '}
+          ${completed ? 'bg-indigo-600 border-indigo-600 ' : ''} rounded-full`}
+        >
+          {completed && (
+            <svg
+              className="w-6 h-6 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip="evenodd"
+              />
+            </svg>
+          )}
+          {!completed && (
+            <p className={active ? 'text-white' : 'text-indigo-200'}>
+              {stepNumber}
+            </p>
+          )}
+        </div>
+        <p
+          className={`text-sm leading-5 font-medium ${
+            active ? 'text-white' : 'text-indigo-200'
+          }`}
+        >
+          {description}
+        </p>
+      </div>
+
+      {!isLastStep && (
+        <div className="hidden md:block absolute top-0 right-0 h-full w-5">
+          <svg
+            className="h-full w-full text-cool-gray-600"
+            viewBox="0 0 22 80"
+            fill="none"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0 -2L20 40L0 82"
+              vectorEffect="non-scaling-stroke"
+              stroke="currentcolor"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      )}
+    </li>
+  );
+};
+
+export default SetupSteps;