From 082353e9bca3c6917f24548606c3c66e29578fc6 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Fri, 16 Feb 2024 12:31:13 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20implement=20`compo?=
 =?UTF-8?q?nents`=20page=20to=20act=20as=20storybook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 packages/frontend/src/pages/components/index.tsx

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
new file mode 100644
index 00000000..9a7a8519
--- /dev/null
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const Page = () => {
+  return (
+    <div className="relative h-full min-h-full">
+      <div className="flex flex-col items-center justify-center max-w-7xl mx-auto px-20 py-20">
+        <h1 className="text-4xl font-bold">Manual Storybook</h1>
+        <p className="mt-4 text-lg text-center text-gray-500">
+          Get started by editing{' '}
+          <code className="p-2 font-mono text-sm bg-gray-100 rounded-md">
+            packages/frontend/src/pages/components/index.tsx
+          </code>
+        </p>
+        <div className="w-full h border border-gray-200 px-20 my-10" />
+
+        {/* Insert Components here */}
+        <div className="flex flex-col gap-10 items-center justify-between">
+          <h1 className="text-2xl font-bold">Component A</h1>
+
+          <div className="flex flex-row gap-10 items-center justify-center">
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+          </div>
+
+          <div className="flex flex-row gap-10 items-center justify-center">
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div className="h-20 w-40 bg-red-400 rounded-md" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;