From 8f0c39022dde1874a423b211c655e1952d108291 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Mon, 4 Mar 2024 10:40:06 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20render=20componen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 12 ++++++
 .../src/pages/components/renders/steps.tsx    | 41 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 packages/frontend/src/pages/components/renders/steps.tsx

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index aab2d652..077434d5 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -26,6 +26,7 @@ import {
 import { renderInputs } from './renders/input';
 import { RADIO_OPTIONS } from './renders/radio';
 import { SEGMENTED_CONTROLS_OPTIONS } from './renders/segmentedControls';
+import { renderHorizontalSteps, renderVerticalSteps } from './renders/steps';
 import {
   renderTabWithBadges,
   renderTabs,
@@ -56,6 +57,17 @@ const Page: React.FC = () => {
 
         <div className="w-full h border border-gray-200 px-20 my-10" />
 
+        {/* Steps */}
+        <div className="flex flex-col gap-10 items-center justify-between">
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Steps</h1>
+            <div className="flex flex-col gap-10 items-center justify-center">
+              {renderVerticalSteps()}
+              {renderHorizontalSteps()}
+            </div>
+          </div>
+        </div>
+
         {/* Tag */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <div className="flex flex-col gap-10 items-center justify-between">
diff --git a/packages/frontend/src/pages/components/renders/steps.tsx b/packages/frontend/src/pages/components/renders/steps.tsx
new file mode 100644
index 00000000..2d3f3da5
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/steps.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Steps } from 'components/shared/Steps';
+
+export const renderVerticalSteps = () => {
+  return (
+    <Steps
+      currentIndex={1}
+      steps={[
+        {
+          label: 'Create repository',
+        },
+        {
+          label: 'Deploy',
+        },
+        {
+          label: `What's next?`,
+        },
+      ]}
+    />
+  );
+};
+
+export const renderHorizontalSteps = () => {
+  return (
+    <Steps
+      orientation="horizontal"
+      currentIndex={1}
+      steps={[
+        {
+          label: 'Create repository',
+        },
+        {
+          label: 'Deploy',
+        },
+        {
+          label: `What's next?`,
+        },
+      ]}
+    />
+  );
+};