Improved class filters visibility

src/components/planner/ScheduleType.tsx

@@ -1,4 +1,5 @@
-import { getClassType } from '../../utils'
+import { getClassType} from '../../utils'
+import { Badge } from '../ui/badge'
 
 type Props = {
   types: string[],
@@ -7,40 +8,49 @@ type Props = {
 }
 
 const ScheduleTypes = ({ types, hiddenLessonsTypes, setHiddenLessonsTypes }: Props) => {
+  const toggleType = (lessonType: string) => {
+    if (hiddenLessonsTypes.includes(lessonType)) {
+      setHiddenLessonsTypes(hiddenLessonsTypes.filter(t => t !== lessonType))
+    } else {
+      setHiddenLessonsTypes([...hiddenLessonsTypes, lessonType])
+    }
+  }
   return (
     <>
-      {types.map((lessonType) => (
-        <label
-          className="group relative flex items-center gap-1.5 overflow-x-hidden rounded-lg hover:cursor-pointer lg:gap-1"
-          key={`lesson-type-${lessonType}`}
-        >
-          <input
-            type="checkbox"
-            className="peer hidden"
-            checked={hiddenLessonsTypes.includes(lessonType)}
-            onChange={(e) => {
-              if (e.target.checked) {
-                setHiddenLessonsTypes([...hiddenLessonsTypes, lessonType])
-              } else {
-                setHiddenLessonsTypes(hiddenLessonsTypes.filter((type) => type !== lessonType))
-              }
-            }}
-          />
+      <div className="flex flex-wrap gap-2">
+        {types.map((lessonType) => {
+          const isHidden = hiddenLessonsTypes.includes(lessonType)
 
-          <span
-            className={`flex h-4 w-4 items-center justify-center rounded 2xl:h-4 2xl:w-4 peer-checked:opacity-50
-          ${'bg-schedule-' + lessonType.toLowerCase() + '/80'}`}
-            style={{ marginRight: '5px' }}
-          />
-
-          <span className="cursor-pointer select-none peer-checked:line-through peer-checked:opacity-50">{getClassType(lessonType)}</span>
-
-          {/* Shine box */}
-          <div className="z-5 absolute -inset-full top-0 block h-full w-1/2 -skew-x-12 transform bg-gradient-to-r from-transparent to-white opacity-40 group-hover:animate-shine" />
-        </label>
-      ))}
+          return (
+            <Badge
+              key={lessonType}
+              onClick={() => toggleType(lessonType)}
+              variant={isHidden ? 'outline' : 'secondary'}
+              className={`
+                cursor-pointer select-none transition-all
+                hover:opacity-90
+              `}
+            >
+              <span
+                className={`
+                  flex h-4 w-4 items-center justify-center rounded mr-2
+                  ${'bg-schedule-' + lessonType.toLowerCase() + '/80'}
+                  peer-checked:opacity-50
+                `}
+              >
+                {!isHidden &&    
+                (<span className="absolute text-white text-[11px] font-semibold leading-none">
+                  ✓
+                </span>)
+                }
+              </span>
+              {getClassType(lessonType)}
+            </Badge>
+          )
+        })}
+      </div>
     </>
   )
 }
 
-export default ScheduleTypes
+export default ScheduleTypes