From 596889b5e2b70feab7a0c1ccddfb8daed6895b48 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 22 Feb 2024 17:01:58 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20render=20tags=20c?=
 =?UTF-8?q?omponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/components/index.tsx   | 14 +++++
 .../src/pages/components/renders/tags.tsx     | 63 +++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 packages/frontend/src/pages/components/renders/tags.tsx

diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 67e68e0b..2da8cc9e 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -23,6 +23,7 @@ import {
   renderInlineNotifications,
 } from './renders/inlineNotifications';
 import { renderInputs } from './renders/input';
+import { renderDefaultTags, renderMinimalTags } from './renders/tags';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -41,6 +42,19 @@ const Page = () => {
 
         <div className="w-full h border border-gray-200 px-20 my-10" />
 
+        {/* Tags */}
+        <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">Tags</h1>
+            <div className="flex flex-col gap-10 items-center justify-center">
+              {renderDefaultTags()}
+              {renderMinimalTags()}
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full h border border-gray-200 px-20 my-10" />
+
         {/* Button */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <h1 className="text-2xl font-bold">Input</h1>
diff --git a/packages/frontend/src/pages/components/renders/tags.tsx b/packages/frontend/src/pages/components/renders/tags.tsx
new file mode 100644
index 00000000..760b7313
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/tags.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Tags } from 'components/shared/Tags';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+export const renderDefaultTags = () =>
+  (['default'] as const).map((style) => (
+    <div key={style} className="flex gap-4 items-center">
+      {(
+        ['attention', 'negative', 'positive', 'emphasized', 'neutral'] as const
+      ).map((type) => (
+        <div key={type} className="flex flex-col gap-4">
+          <Tags
+            leftIcon={<PlusIcon />}
+            rightIcon={<PlusIcon />}
+            style={style}
+            type={type}
+            size="sm"
+          >
+            Label
+          </Tags>
+          <Tags
+            leftIcon={<PlusIcon />}
+            rightIcon={<PlusIcon />}
+            size="xs"
+            style={style}
+            type={type}
+          >
+            Label
+          </Tags>
+        </div>
+      ))}
+    </div>
+  ));
+
+export const renderMinimalTags = () =>
+  (['minimal'] as const).map((style) => (
+    <div key={style} className="flex gap-4 items-center">
+      {(
+        ['attention', 'negative', 'positive', 'emphasized', 'neutral'] as const
+      ).map((type) => (
+        <div key={type} className="flex flex-col gap-4">
+          <Tags
+            leftIcon={<PlusIcon />}
+            rightIcon={<PlusIcon />}
+            style={style}
+            type={type}
+            size="sm"
+          >
+            Label
+          </Tags>
+          <Tags
+            leftIcon={<PlusIcon />}
+            rightIcon={<PlusIcon />}
+            size="xs"
+            style={style}
+            type={type}
+          >
+            Label
+          </Tags>
+        </div>
+      ))}
+    </div>
+  ));