✨ feat: add checkbox component

.storybook/main.js

@@ -30,6 +30,8 @@ module.exports = {
       loader: require.resolve('@svgr/webpack'),
     });
 
+    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
+
     return config;
   },
 };

src/components/common/CheckBox.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import CheckBox from './CheckBox';
+
+export default {
+  title: 'CheckBox',
+  component: CheckBox,
+} as ComponentMeta<typeof CheckBox>;
+
+const Template: ComponentStory<typeof CheckBox> = (args) => {
+  return <CheckBox {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Text label',
+};

src/components/common/CheckBox.tsx

@@ -0,0 +1,45 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { uniqueId } from 'src/lib/utils';
+
+import { CheckIcon } from './icons';
+
+interface Props extends Omit<DefaultProps, 'value'> {
+  label?: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+const CheckBox = ({ disabled, checked, label, onChange, ...props }: Props) => {
+  const id = useRef('');
+
+  useEffect(() => {
+    id.current = uniqueId('radio');
+  }, []);
+
+  return (
+    <div
+      className={`flex items-center gap-3 p-3 border cursor-pointer w-fit rounded-3xl ${
+        checked ? 'border-gray-500' : 'border-gray-200 '
+      }`}
+      onClick={() => onChange(!checked)}
+    >
+      <input
+        type="checkbox"
+        className={`hidden ${props.className}`}
+        checked={checked}
+        disabled={disabled}
+        id={id.current}
+        readOnly
+        {...props}
+      />
+      <CheckIcon color={checked ? 'black' : 'gray'} />
+      {label && (
+        <label htmlFor={id.current} onClick={(e) => e.stopPropagation()} className="cursor-pointer select-none">
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default memo(CheckBox);

src/components/common/icons/Check.tsx

@@ -0,0 +1,14 @@
+const Check = ({ color }: { color: 'gray' | 'black' | 'white' }) => {
+  return (
+    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1.16675 5.00098L5.05564 8.88987L12.8334 1.11209"
+        stroke={color === 'gray' ? '#CBCBCB' : color === 'white' ? '#ffffff' : '#474747'}
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Check;

src/components/common/icons/index.ts

@@ -1,3 +1,4 @@
+export { default as CheckIcon } from './Check';
 export { ProfileIcon } from './ProfileIcon';
 export { TalentRegisterIcon } from './TalentRegisterIcon';
 export { TalentSearchIcon } from './TalentSearchIcon';

src/lib/utils.ts

@@ -13,3 +13,7 @@ export const formatQueryString = (url: string, queryObject?: Record<string, unkn
 
   return `${url}?${queries}`;
 };
+
+export const uniqueId = (id?: string | number) => {
+  return id + Math.random().toString(16).slice(2);
+};