Implement SearchFilterCheckboxItem component

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;
+        }
+    }
+}

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