Add files

src/renderer/components/date-picker/index.tsx

@@ -0,0 +1,50 @@
+import type { DatePickerProps as MantineDatePickerProps } from '@mantine/dates';
+import { DatePicker as MantineDatePicker } from '@mantine/dates';
+import styled from 'styled-components';
+
+interface DatePickerProps extends MantineDatePickerProps {
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
+  & .mantine-DatePicker-input {
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-DatePicker-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-DatePicker-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-DatePicker-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-DateRangePicker-disabled {
+    opacity: 0.6;
+  }
+`;
+
+export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
+  return (
+    <StyledDatePicker
+      withinPortal
+      {...props}
+      sx={{ maxWidth, width }}
+    />
+  );
+};
+
+DatePicker.defaultProps = {
+  maxWidth: undefined,
+  width: undefined,
+};