From bdb1bb05f100f8fc33ebfada7d64bd397a92a561 Mon Sep 17 00:00:00 2001
From: Yoginth <hey@yoginth.com>
Date: Sun, 29 Sep 2024 07:49:25 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20design=20system=20for=20Se?=
 =?UTF-8?q?lect=20(#yoginth/eng-26-add-design-system-for-select)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary: Added a design system for the `Select` component.

Highlights:

• Created `SelectDesign.tsx` to showcase different `Select` component variations.
• Integrated `SelectDesign` into the main design system index.
• Demonstrated `Select` with simple, searchable, and icon options.

Read more: https://pierre.co/hey/hey/yoginth/eng-26-add-design-system-for-select
---
 .../src/components/Design/SelectDesign.tsx    | 64 +++++++++++++++++++
 apps/web/src/components/Design/index.tsx      |  2 +
 2 files changed, 66 insertions(+)
 create mode 100644 apps/web/src/components/Design/SelectDesign.tsx

diff --git a/apps/web/src/components/Design/SelectDesign.tsx b/apps/web/src/components/Design/SelectDesign.tsx
new file mode 100644
index 00000000000..7f79ae0b2ab
--- /dev/null
+++ b/apps/web/src/components/Design/SelectDesign.tsx
@@ -0,0 +1,64 @@
+import { Card, CardHeader, Select } from "@hey/ui";
+import type { FC } from "react";
+
+const SelectDesign: FC = () => {
+  const options = [
+    {
+      htmlLabel: "Simple Label",
+      label: "Simple Label",
+      value: "simple-label",
+      selected: true
+    },
+    { htmlLabel: <b>HTML Label</b>, label: "HTML Label", value: "html-label" }
+  ];
+
+  const optionsWithIcon = [
+    {
+      label: "Option 1",
+      value: "1",
+      icon: "https://hey-assets.b-cdn.net/images/app-icon/0.png",
+      selected: true
+    },
+    {
+      label: "Option 2",
+      value: "2",
+      icon: "https://hey-assets.b-cdn.net/images/app-icon/2.png"
+    },
+    {
+      label: "Option 3",
+      value: "3",
+      icon: "https://hey-assets.b-cdn.net/images/app-icon/3.png"
+    },
+    {
+      label: "Option 4",
+      value: "4",
+      icon: "https://hey-assets.b-cdn.net/images/app-icon/4.png"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader title="Select" />
+      <div className="m-5 flex flex-col items-start gap-5">
+        <div className="w-2/6">
+          <div className="label">Simple Select</div>
+          <Select onChange={() => {}} options={options} />
+        </div>
+        <div className="w-2/6">
+          <div className="label">Select with Search</div>
+          <Select onChange={() => {}} options={options} showSearch />
+        </div>
+        <div className="w-2/6">
+          <div className="label">Select with Icon</div>
+          <Select
+            onChange={() => {}}
+            options={optionsWithIcon}
+            iconClassName="size-4"
+          />
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default SelectDesign;
diff --git a/apps/web/src/components/Design/index.tsx b/apps/web/src/components/Design/index.tsx
index c3849f8bfa5..908ea9e994e 100644
--- a/apps/web/src/components/Design/index.tsx
+++ b/apps/web/src/components/Design/index.tsx
@@ -13,6 +13,7 @@ import ImageDesign from "./ImageDesign";
 import InputDesign from "./InputDesign";
 import ModalDesign from "./ModalDesign";
 import ProfilesDesign from "./ProfilesDesign";
+import SelectDesign from "./SelectDesign";
 import SpinnerDesign from "./SpinnerDesign";
 import StackedAvatarsDesign from "./StackedAvatarsDesign";
 import TextAreaDesign from "./TextAreaDesign";
@@ -35,6 +36,7 @@ const Design: NextPage = () => {
         <CheckboxDesign />
         <InputDesign />
         <TextAreaDesign />
+        <SelectDesign />
         <SpinnerDesign />
         <BadgeDesign />
         <ImageDesign />