feat: create Checkbox component (#134)

frontend/src/components/common/Checkbox/Checkbox.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { Checkbox as HeadlessCheckbox, CheckboxProps } from '@headlessui/react';
+import { generateClassNames } from '@app/utils';
+
+const styles: { [checked: string]: { [disabled: string]: string } } = {
+  true: {
+    true: 'bg-blue-800 opacity-50', // checked disabled
+    false: 'bg-blue-800 hover:bg-blue-900', // checked enabled
+  },
+  false: {
+    true: 'bg-navy-200', // unchecked disabled
+    false: 'bg-white border border-navy-300 hover:border-navy-400', // unchecked enabled
+  },
+};
+
+export const Checkbox: FC<CheckboxProps> = (props) => {
+  const { disabled, checked } = props;
+  const currentStyles = styles[(checked ?? false).toString()][(disabled ?? false).toString()];
+
+  return (
+    <HeadlessCheckbox
+      className={generateClassNames('flex h-6 w-6 items-center justify-center rounded', currentStyles)}
+      {...props}
+    >
+      {checked && (
+        <svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.2559 0.410765C15.5814 0.736202 15.5814 1.26384 15.2559 1.58928L6.08926 10.7559C5.76382 11.0814 5.23618 11.0814 4.91074 10.7559L0.744078 6.58928C0.418641 6.26384 0.418641 5.7362 0.744078 5.41077C1.06951 5.08533 1.59715 5.08533 1.92259 5.41077L5.5 8.98818L14.0774 0.410765C14.4028 0.0853278 14.9305 0.0853278 15.2559 0.410765Z"
+            fill="white"
+          />
+        </svg>
+      )}
+    </HeadlessCheckbox>
+  );
+};

frontend/src/components/common/Checkbox/index.ts

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

frontend/src/components/pages/ProfileSetting/modules/Notifications/Notifications.tsx

@@ -12,8 +12,8 @@ export const Notifications: React.FC = () => {
           <Typography variant="body-m/medium">Send me notifications via</Typography>
         </div>
         <div className="flex flex-row gap-8">
-          <NotificationCheckbox icon={<SlackIcon />} />
-          <NotificationCheckbox icon={<EnvelopeIcon />} />
+          <NotificationCheckbox icon={<SlackIcon />} checked={true} />
+          <NotificationCheckbox icon={<EnvelopeIcon />} checked={false} />
         </div>
       </div>
     </Card>

frontend/src/components/pages/ProfileSetting/utils.tsx

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { Typography } from '@app/components/common/Typography';
+import { Checkbox } from '@app/components/common/Checkbox';
 
-export const NotificationCheckbox: React.FC<{ icon: ReactNode }> = ({ icon }) => (
-  <div className="flex flex-col items-center">
+export const NotificationCheckbox: React.FC<{ icon: ReactNode; checked: boolean }> = ({ icon, checked }) => (
+  <div className="flex flex-col items-center justify-between">
     <div className="mb-6 text-navy-500">{icon}</div>
     <div className="flex h-6 items-center">
-      <input type="checkbox" className="border-gray-300 h-4 w-4 rounded text-blue-800 focus:ring-blue-800" />
+      <Checkbox checked={checked} />
     </div>
   </div>
 );