use webflow icons for the dropdown (#1)
This commit is contained in:
parent
97dc26f158
commit
e6a6e11517
src/components
|
@ -1,5 +1,6 @@
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { theme } from "../../theme";
|
import { theme } from "../../theme";
|
||||||
|
import { Icon } from "../Icon";
|
||||||
|
|
||||||
export interface DropdownProps {
|
export interface DropdownProps {
|
||||||
onChange: (value: string) => void;
|
onChange: (value: string) => void;
|
||||||
|
@ -19,7 +20,7 @@ const DropdownOptions: React.FC<DropdownProps> = (props) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ marginRight: 10, width: 10 }}>
|
<div style={{ marginRight: 10, width: 10 }}>
|
||||||
{props.selected === value ? "X" : ""}
|
{props.selected === value ? <Icon name="check" /> : ""}
|
||||||
</div>
|
</div>
|
||||||
<div>{label}</div>
|
<div>{label}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -79,7 +80,13 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
|
||||||
gap: 2,
|
gap: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<span style={{ flex: 1 }}>
|
||||||
{props.options.find(({ value }) => selected === value)!.label}
|
{props.options.find(({ value }) => selected === value)!.label}
|
||||||
|
</span>
|
||||||
|
<Icon
|
||||||
|
styles={{ textAlign: "right", marginRight: 12 }}
|
||||||
|
name="chevron-down"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
<DropdownOptions
|
<DropdownOptions
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./Icon";
|
|
@ -1,3 +1,4 @@
|
||||||
export * from "./Button";
|
export * from "./Button";
|
||||||
export * from "./Chart";
|
export * from "./Chart";
|
||||||
export * from "./Dropdown";
|
export * from "./Dropdown";
|
||||||
|
export * from "./Icon";
|
||||||
|
|
Loading…
Reference in New Issue