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

---
 .../SearchFilterCheckboxItem/index.scss       | 41 +++++++++++++++++++
 components/SearchFilterCheckboxItem/index.tsx | 34 +++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 components/SearchFilterCheckboxItem/index.scss
 create mode 100644 components/SearchFilterCheckboxItem/index.tsx

diff --git a/components/SearchFilterCheckboxItem/index.scss b/components/SearchFilterCheckboxItem/index.scss
new file mode 100644
index 00000000..7a951781
--- /dev/null
+++ b/components/SearchFilterCheckboxItem/index.scss
@@ -0,0 +1,41 @@
+.Item {
+    align-items: center;
+    border-radius: calc($unit / 2);
+    color: $grey-40;
+    font-size: $font-regular;
+    line-height: 1.2;
+    min-width: 100px;
+    position: relative;
+    padding: $unit;
+    padding-left: $unit * 3;
+
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }
+
+    &[data-state="checked"] {
+        background: $grey-90;
+
+        svg {
+            fill: $grey-50;
+        }
+    }
+
+    .Indicator {
+        $diameter: 18px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        left: calc($unit / 2);
+        height: $diameter;
+        width: $diameter;
+
+        svg {
+            height: $diameter;
+            width: $diameter;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/SearchFilterCheckboxItem/index.tsx b/components/SearchFilterCheckboxItem/index.tsx
new file mode 100644
index 00000000..b6429fec
--- /dev/null
+++ b/components/SearchFilterCheckboxItem/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+import CheckIcon from '~public/icons/Check.svg'
+import './index.scss'
+
+interface Props {
+    checked?: boolean
+    valueKey: string
+    onCheckedChange: (open: boolean, key: string) => void
+    children: React.ReactNode
+}
+
+const SearchFilterCheckboxItem = (props: Props) => {
+    function handleCheckedChange(checked: boolean) {
+        props.onCheckedChange(checked, props.valueKey)
+    }
+
+    return (
+        <DropdownMenu.CheckboxItem 
+            className="Item" 
+            checked={props.checked || false}
+            onCheckedChange={handleCheckedChange}
+            onSelect={ (event) => event.preventDefault() }>
+                <DropdownMenu.ItemIndicator className="Indicator">
+                    <CheckIcon />
+                </DropdownMenu.ItemIndicator>
+                {props.children}
+        </DropdownMenu.CheckboxItem>
+    )
+}
+
+export default SearchFilterCheckboxItem