From 9a6ad1a74d88ba334bb3c92dd2004683c0d428fb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 11 Mar 2022 01:13:45 -0800
Subject: [PATCH] Implement SearchFilter component

---
 components/SearchFilter/index.scss | 74 ++++++++++++++++++++++++++++++
 components/SearchFilter/index.tsx  | 34 ++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 components/SearchFilter/index.scss
 create mode 100644 components/SearchFilter/index.tsx

diff --git a/components/SearchFilter/index.scss b/components/SearchFilter/index.scss
new file mode 100644
index 00000000..0c1bf29e
--- /dev/null
+++ b/components/SearchFilter/index.scss
@@ -0,0 +1,74 @@
+.DropdownLabel {
+    align-items: center;
+    background: $grey-90;
+    border: none;
+    border-radius: $unit * 2;
+    color: $grey-40;
+    display: flex;
+    gap: calc($unit / 2);
+    flex-direction: row;
+    padding: ($unit) ($unit * 2);
+
+    &:hover {
+        background: $grey-80;
+        color: $grey-00;
+        cursor: pointer;
+    }
+
+    .count {
+        color: $grey-60;
+        font-weight: $medium;
+    }
+
+    & > .icon {
+        $diameter: 12px;
+        height: $diameter;
+        width: $diameter;
+
+        svg {
+            transform: scale(0.85);
+
+            path {
+                fill: $grey-60;
+            }
+        }
+    }
+}
+
+.Dropdown {
+    background: white;
+    border-radius: $unit;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.18);
+    display: flex;
+    flex-direction: column;
+    gap: calc($unit / 2);
+    padding: $unit;
+    min-width: 120px;
+
+    & > span {
+        overflow: hidden;
+
+        svg {
+            fill: white;
+            filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0.18));
+        }
+    }
+
+    section {
+        display: flex;
+        flex-direction: row;
+        gap: $unit;
+    }
+
+    .Group {
+        flex: 1 1 0px;
+        flex-direction: column;
+    }
+
+    .Label {
+        color: $grey-60;
+        font-size: $font-small;
+        margin-bottom: calc($unit / 2);
+        padding-left: calc($unit / 2);
+    }
+}
\ No newline at end of file
diff --git a/components/SearchFilter/index.tsx b/components/SearchFilter/index.tsx
new file mode 100644
index 00000000..8d6678fb
--- /dev/null
+++ b/components/SearchFilter/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+import ArrowIcon from '~public/icons/Arrow.svg'
+import './index.scss'
+
+interface Props {
+    label: string
+    open: boolean
+    numSelected: number
+    onOpenChange: (open: boolean) => void
+    children: React.ReactNode
+}
+
+const SearchFilter = (props: Props) => {
+    return (
+        <DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
+            <DropdownMenu.Trigger className="DropdownLabel">
+                {props.label}
+                <span className="count">{props.numSelected}</span>
+                <span className="icon">
+                    <ArrowIcon />
+                </span>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content className="Dropdown" sideOffset={4}>
+                {props.children}
+                <DropdownMenu.Arrow />
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    )
+}
+
+export default SearchFilter