From e6a6e115176cb2b613f7c081d298e218f676715d Mon Sep 17 00:00:00 2001
From: Florian Herrengt <contact@florianherrengt.com>
Date: Fri, 4 Aug 2023 18:19:15 +0100
Subject: [PATCH] use webflow icons for the dropdown (#1)

---
 src/components/Dropdown/Dropdown.tsx | 11 +++++--
 src/components/Icon/Icon.tsx         | 45 ++++++++++++++++++++++++++++
 src/components/Icon/index.ts         |  1 +
 src/components/index.tsx             |  1 +
 4 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Icon/Icon.tsx
 create mode 100644 src/components/Icon/index.ts

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index f007198..e7e4674 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { theme } from "../../theme";
+import { Icon } from "../Icon";
 
 export interface DropdownProps {
   onChange: (value: string) => void;
@@ -19,7 +20,7 @@ const DropdownOptions: React.FC<DropdownProps> = (props) => {
           }}
         >
           <div style={{ marginRight: 10, width: 10 }}>
-            {props.selected === value ? "X" : ""}
+            {props.selected === value ? <Icon name="check" /> : ""}
           </div>
           <div>{label}</div>
         </div>
@@ -79,7 +80,13 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
           gap: 2,
         }}
       >
-        {props.options.find(({ value }) => selected === value)!.label}
+        <span style={{ flex: 1 }}>
+          {props.options.find(({ value }) => selected === value)!.label}
+        </span>
+        <Icon
+          styles={{ textAlign: "right", marginRight: 12 }}
+          name="chevron-down"
+        />
       </div>
       {isOpen && (
         <DropdownOptions
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
new file mode 100644
index 0000000..a992352
--- /dev/null
+++ b/src/components/Icon/Icon.tsx
@@ -0,0 +1,45 @@
+import React, { CSSProperties } from "react";
+
+export const icons = {
+  check: (
+    <svg
+      width="14"
+      height="11"
+      viewBox="0 0 14 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.8959 1.64744L12.4657 0.217285L5.05793 7.61398L1.6511 4.21729L0.220947 5.64745L5.0584 10.4849L13.8959 1.64744Z"
+        fill="#D9D9D9"
+      />
+    </svg>
+  ),
+  "chevron-down": (
+    <svg
+      style={{
+        position: "absolute",
+        top: -2,
+      }}
+      width="9"
+      height="6"
+      viewBox="0 0 9 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.10077 3.46933L7.11268 0.887695L8.08887 2.02658L4.10077 5.44495L0.11268 2.02658L1.08887 0.887695L4.10077 3.46933Z"
+        fill="#D9D9D9"
+      />
+    </svg>
+  ),
+};
+
+export const Icon = (props: {
+  name: keyof typeof icons;
+  styles?: CSSProperties;
+}) => (
+  <i style={{ position: "relative", ...props.styles }}>{icons[props.name]}</i>
+);
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
new file mode 100644
index 0000000..998237c
--- /dev/null
+++ b/src/components/Icon/index.ts
@@ -0,0 +1 @@
+export * from "./Icon";
diff --git a/src/components/index.tsx b/src/components/index.tsx
index b0534c5..f7412a5 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,3 +1,4 @@
 export * from "./Button";
 export * from "./Chart";
 export * from "./Dropdown";
+export * from "./Icon";