Add files

src/renderer/components/select/index.tsx

@@ -0,0 +1,144 @@
+import type {
+  SelectProps as MantineSelectProps,
+  MultiSelectProps as MantineMultiSelectProps,
+} from '@mantine/core';
+import { Select as MantineSelect, MultiSelect as MantineMultiSelect } from '@mantine/core';
+import styled from 'styled-components';
+
+interface SelectProps extends MantineSelectProps {
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+interface MultiSelectProps extends MantineMultiSelectProps {
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+const StyledSelect = styled(MantineSelect)`
+  & [data-selected='true'] {
+    background: var(--input-bg);
+  }
+
+  & .mantine-Select-disabled {
+    background: var(--input-bg);
+    opacity: 0.6;
+  }
+
+  & .mantine-Select-itemsWrapper {
+    & .mantine-Select-item {
+      padding: 40px;
+    }
+  }
+`;
+
+export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
+  return (
+    <StyledSelect
+      withinPortal
+      styles={{
+        dropdown: {
+          background: 'var(--dropdown-menu-bg)',
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
+        },
+        input: {
+          background: 'var(--input-bg)',
+          color: 'var(--input-fg)',
+        },
+        item: {
+          '&:hover': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-hovered]': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-selected="true"]': {
+            '&:hover': {
+              background: 'var(--dropdown-menu-bg-hover)',
+            },
+            background: 'none',
+            color: 'var(--primary-color)',
+          },
+          color: 'var(--dropdown-menu-fg)',
+          padding: '.3rem',
+        },
+      }}
+      sx={{ maxWidth, width }}
+      transition="pop"
+      transitionDuration={100}
+      {...props}
+    />
+  );
+};
+
+const StyledMultiSelect = styled(MantineMultiSelect)`
+  & [data-selected='true'] {
+    background: var(--input-select-bg);
+  }
+
+  & .mantine-MultiSelect-disabled {
+    background: var(--input-select-bg);
+    opacity: 0.6;
+  }
+
+  & .mantine-MultiSelect-itemsWrapper {
+    & .mantine-Select-item {
+      padding: 40px;
+    }
+  }
+`;
+
+export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) => {
+  return (
+    <StyledMultiSelect
+      withinPortal
+      styles={{
+        dropdown: {
+          background: 'var(--dropdown-menu-bg)',
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
+        },
+        input: {
+          background: 'var(--input-bg)',
+          color: 'var(--input-fg)',
+        },
+        item: {
+          '&:hover': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-hovered]': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-selected="true"]': {
+            '&:hover': {
+              background: 'var(--dropdown-menu-bg-hover)',
+            },
+            background: 'none',
+            color: 'var(--primary-color)',
+          },
+          color: 'var(--dropdown-menu-fg)',
+          padding: '.5rem .1rem',
+        },
+        value: {
+          margin: '.2rem',
+          paddingBottom: '1rem',
+          paddingLeft: '1rem',
+          paddingTop: '1rem',
+        },
+      }}
+      sx={{ maxWidth, width }}
+      transition="pop"
+      transitionDuration={100}
+      {...props}
+    />
+  );
+};
+
+Select.defaultProps = {
+  maxWidth: undefined,
+  width: undefined,
+};
+
+MultiSelect.defaultProps = {
+  maxWidth: undefined,
+  width: undefined,
+};