maintenance

src/components/forms/Checkbox/index.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import React, {ChangeEvent} from 'react';
+import styled from 'styled-components';
+import {theme} from 'components/shared/theme';
+
+const CheckboxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${theme.spacing.small};
+`;
+
+const HiddenCheckbox = styled.input.attrs({type: 'checkbox'})`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+`;
+
+const StyledCheckbox = styled.div<{checked: boolean}>`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: ${props => (props.checked ? theme.colors.red : theme.colors.white)};
+  border: 2px solid ${theme.colors.gray400};
+  border-radius: 3px;
+  transition: all 150ms;
+  cursor: pointer;
+  margin-right: ${theme.spacing.small};
+
+  &::after {
+    content: '';
+    position: relative;
+    display: ${props => (props.checked ? 'block' : 'none')};
+    left: 3px;
+    top: 0px;
+    width: 4px;
+    height: 8px;
+    border: solid ${theme.colors.white};
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+`;
+
+const Label = styled.label`
+  cursor: pointer;
+  color: ${theme.colors.gray900};
+  font-size: ${theme.typography.primaryFontSize};
+  user-select: none;
+`;
+
+interface CheckboxProps {
+  id: string;
+  checked: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  checked,
+  onChange,
+  label,
+  value,
+  disabled = false,
+  className
+}) => {
+  return (
+    <CheckboxContainer className={className}>
+      <HiddenCheckbox
+        id={id}
+        checked={checked}
+        onChange={onChange}
+        value={value}
+        disabled={disabled}
+      />
+      <StyledCheckbox checked={checked} />
+      {label && <Label htmlFor={id}>{label}</Label>}
+    </CheckboxContainer>
+  );
+};
+
+export default Checkbox;