feat: add cookie page

src/shared/ui/checkbox/checkbox.module.scss

@@ -0,0 +1,72 @@
+.Container {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.Input {
+  border: none;
+  position: absolute;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: none;
+  opacity: 0;
+}
+
+.Checkbox {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 0.125rem;
+
+  border: 1px solid #e3e4e5;
+}
+
+.CheckboxError {
+  composes: Checkbox;
+  border: 1px solid #ff6969 !important;
+}
+
+.Input:hover + .Checkbox {
+  background: #f0faff;
+  border: 1px solid #94dfff;
+}
+
+.Input:focus + .Checkbox {
+  background: #f0faff;
+  border: 1px solid #94dfff;
+}
+
+.Input:checked + .Checkbox {
+  background: url(/svg/checkbox.svg) center no-repeat, #00affa;
+}
+
+.Input:checked:hover + .Checkbox {
+  background: url(/svg/checkbox.svg) center no-repeat, #00a4eb;
+}
+
+.Input:disabled + .Checkbox {
+  background: #f5f6f7;
+  border: 1px solid #e3e4e5;
+}
+
+.Input:disabled:checked + .Checkbox {
+  background: url(/svg/checkbox.svg) center no-repeat, #e3e4e5;
+  border: 1px solid transparent;
+}
+
+.Label {
+  font-family: $font-open-sans;
+  font-weight: $font-regular;
+  font-size: rem(12px);
+  line-height: 100%;
+  color: #333333;
+  margin-left: 0.5rem;
+}
+
+.LabelError {
+  composes: Label;
+  color: #ff6969 !important;
+}

src/shared/ui/checkbox/checkbox.tsx

@@ -0,0 +1,20 @@
+import s from './checkbox.module.scss';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+type CheckboxProps = {
+  className?: string;
+  label?: string;
+  error?: string | boolean;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function Checkbox({ ...props }: CheckboxProps) {
+  const { label, error } = props;
+
+  return (
+    <div className={s.Container}>
+      <input {...props} className={s.Input} type='checkbox' />
+      <div className={!error ? s.Checkbox : s.CheckboxError} />
+      <div className={!error ? s.Label : s.LabelError}>{label}</div>
+    </div>
+  );
+}

src/shared/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './checkbox';

src/shared/ui/index.ts

@@ -4,3 +4,4 @@ export { Input } from './input';
 export { TextArea } from './text-area';
 export { PhoneInput } from './phone-input';
 export { Modal, ModalContent } from './modal';
+export { Checkbox } from './checkbox';