From cc97ddff9d828592d38827a981173ffcec6ce83b Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 20 Feb 2024 16:33:12 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20chevron?=
 =?UTF-8?q?=20left,=20right,=20and=20grabbed=20horizontal=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomIcon/ChevronGrabberHorizontal.tsx   | 20 ++++++++++++++++++
 .../shared/CustomIcon/ChevronLeft.tsx         | 21 +++++++++++++++++++
 .../shared/CustomIcon/ChevronRight.tsx        | 21 +++++++++++++++++++
 .../src/components/shared/CustomIcon/index.ts |  3 +++
 4 files changed, 65 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx

diff --git a/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx b/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
new file mode 100644
index 00000000..b62f79d0
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ChevronGrabberHorizontal = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M6.66666 12.5L9.99999 15.8333L13.3333 12.5M6.66666 7.5L9.99999 4.16666L13.3333 7.5"
+        stroke="currentColor"
+        strokeLinecap="square"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx b/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
new file mode 100644
index 00000000..f9c4885c
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ChevronLeft = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.7071 2.66666L5.37378 8.00001L10.7071 13.3333L10 14.0404L3.95956 8.00001L10 1.95956L10.7071 2.66666Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx b/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
new file mode 100644
index 00000000..75da0052
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ChevronRight = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.00001 1.95956L12.0405 7.99998L6.00001 14.0404L5.29291 13.3333L10.6262 7.99999L5.29291 2.66666L6.00001 1.95956Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index d50d942c..e4b51032 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -1,2 +1,5 @@
 export * from './PlusIcon';
 export * from './CustomIcon';
+export * from './ChevronGrabberHorizontal';
+export * from './ChevronLeft';
+export * from './ChevronRight';